The new Sticky Header in 3.2 may need some adjustments.
Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.
/* START OF Adjust 3.2 Sticky Header */
/* Remove Transparency */
/* This can be more easily done using Customize>Header>Design & Layout>Sticky header : semi-transparent on scroll = UNCHECK */
.sticky-enabled .tc-header {
background: none repeat scroll 0 0 rgba(255, 255, 255, 1);
}
/* Remove Transparency / Add a border */
.sticky-enabled .tc-header {
background: none repeat scroll 0 0 rgba(255, 255, 255, 1);
border-bottom: 2px solid red; /* Adjust border|border-top|border-right|border-left & settings */
}
/* Stop Logo Size Reduction */
/* This can be more easily done using Customize>Header>Design & Layout>Sticky header : shrink title / logo = UNCHECK */
.sticky-enabled .tc-shrink-on .site-logo img {
height: 100% !important;
}
/* END OF Adjust 3.2 Sticky Header */
19 thoughts on “Adjust 3.2+ Sticky Header”
I would like keep the sticky-enabled class always in mobile views. It’s posible to keep the original work of sticky in pc views and fix the header with sticky-enabled class always in mobile/ipad view? The height is too long and looks wrong
thx
hi,
I’m loving this theme. I’m willing to buy the license, but I’d like to know if I can change the header (inserting na image), chance the background color and change the menu bar putting a gradiente color in the background.
Please, if these 3 changes are possible, tell me where to find the tutorials to help me.
I’ll wait for your response, to buy my license.
Tks,
Sheyla
Hi Sheyla, did you resolve this (sorry for not seeing it sooner)?
All your points can be achieved either by using the Snippets or contacting the Forum. The Pro version has its own premium support.
Hi! I love your theme! I am having a problem with the logo though, even though I select to have a sticky logo in the customizations, it scrolls up. Is there a fix for that? I have been looking everywhere and can’t find the fix.
Also, I want to use ™ symbol in the tagline but it shows up too big, how can I modify the size of the sup? I tried in the custom css but couldn’t make it work.
Thanks!
Hi Silvina, did you resolve this (sorry for not seeing it sooner)? If you need help, can you please post this thread in the theme users Support Forum.
Thanks and we’ll do our best to help.
Hello. I have a problem. When I use this code and use the scroll bar the header change its size. I need that the size doesn´t change
Could you help me please?
Hi Vero, can you please report this in the support forum and share a link to your website ?
Thanks
Hi Nina, I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And important, please include a link to your Site.
Hey i dint want the sticky header its causing a lag how do i remove it?
Thank you for these good tips. I am now looking for a way to make the sticky-header work with a “fixed-width” header. I used the code for “Fixed Width for Customizr with High Resolution Screens” and this works fine, also with 3.2. But when I chage the setting to “sticky”, the header moves to the left. I cannot find a way to center it again. Any ideas?? Thanks in advance.
Great snippet, thank you. I had made some edits to the sticky Nav using other classes but yours is much more simple.
In order to change the background color of the sticky NAV I used the below code in addition to the above code.
.tc-solid-color-on-scroll.sticky-enabled .tc-header { background-color: #ffffff; }Thanks for sharing this tip Richard
My pleasure, Nicolas. I check the Snippets here almost daily, and I had just spent some time styling the sticky nav when I saw this snippet.
I thought I might give some quick tips to the non-pro web designers like myself who want to make customizations to their T&C website:
TIPS FOR AMATEUR DEVELOPERS LIKE MYSELF:
Nikeo has made this aptly-named theme extremely customizable, even if all you use is CSS.
You can go miles further with PHP, but making big changes to your site using CSS is relatively easy to do (check out w3schools for a wealth of how-to’s and tutorials).
For example, I’ve made a lot of changes to my own site with my child theme’s CSS sheet, which is very long now (by my standards, anyway).
I had been using HTML(5) and CSS for years but that was all I knew. Once I implemented the Child Theme I started learning and using PHP as well, which I had never done before. And that’s due to a) the flexibility of this theme and b) the extensive snippets and documentation.
So I figured others can learn just as easily.
STYLING TIP:
The best way that I’ve found (as an amateur/hobbyist “developer”, if you can call it that) to style your site is to:
1) Identify the classes / ID’s / selectors of the parts of the site you want to change by: [right click] > “Inspect Element” … (or use FireBug, which Nikeo has suggested more than once and is wildly useful) … then,
2) “Override” the respective CSS code in your child theme’s CSS, or Customizr’s built-in Custom CSS field located in the Customize panel.
** NOTE/WARNING: You could use some other CSS tool like JetPack’s Custom CSS add-on, or a plugin for adding code to the head section, but those options can cause conflicts/complications/problems/etc. that can be completely avoided by (again) using a child theme.
Not to be redundant, but… Use a Child Theme(!):
As Nikeo and other WP pro’s have stressed over and over: implementing a child theme is the most effective and safest way to go about making changes to your site.
It’s a ‘best-practice’ thing, it ensures you never lose your changes on updates, and it opens up the door to even more extensive customizations when you get a hang of it (like the ones you find here in the Snippets).
It can be intimidating to amateurs at first (it was to me when I first decided to do it, and I quickly realized there was no need to be intimidated by it). It is really not that difficult, especially with the Customizr Child Theme Download that Nikeo has provided.
THANK YOU TO NIKEO, et al
We all owe him a big round of applause. I’ve used 5 themes across the 3 sites I have and I’ve never worked with a free OR paid theme that is so customizable and flexible and well-documented. Such an awesome, powerful theme – Thank You, Nikeo!. And thank you to Dave Bardell, @electricfeet, @acub, @tomaja and everyone else who has contributed to making this the best WP theme I’ve ever used.
Eternally Grateful,
Rich D.
Owner, CraftPro Contracting LLC
Morris County, NJ
Thanks Richard for this really interesting feedback. I am sure this will be very useful for many people.
Thanks, I feel really happy to help, your comment just made my day!
PS : big thanks to Dave for this snippet update !
I hope it does help some people who are just starting to learn how to make CSS edits. I see a lot of comments on snippets where a simple google search or a visit to w3schools would answer their question. There are a ton of resources out there – theme developers like you (Nicolas) and snippet contributors (like Dave) shouldn’t be expected to answer every individual question.
Thanks for all your snippets Dave! I’ve been spending the day “redecorating” my site and your snippets have helped a lot.
Nicolas I could go on thanking you all day. You’ve developed an awesome theme and we’re all very grateful.
Wow Richard your site has been fully customizd and the attention to details is amazing! Thanks to Nikeo for the great canvas. I am very fearful of changing the defaults it might break, I am no programmer just trying to follow instruction with a bit of common sense.
I would like to know how you created your small customer review slider on the front page. I want to find a way to create them inside pages. I have not found an instruction here yet.
Thank you!
my site a work in progress
Hi Jeff – thanks for the compliment!
The customer review slider is actually from Meta Slider plugin: a very popular, useful and SEO-friendly plugin. Definitely worth checking out.