Hi,
you might want to take a look at the STICKY HEADER SETTINGS
in Appearance -> Customize -> Header -> Design and Layout.
I checked there earlier too, but the option there is only to enable/disable the shrinking on logo. No option to prevent the shrinking on complete header. Can you please suggest me how to do that?
Thanks again.
If you check all the “display” check boxes and uncheck “shrink title/logo” you have the normal sizes then for the menu items add this to your custom css:
.sticky-enabled .navbar .nav>li>a{ font-size: inherit;}
and to display the social block:
.sticky-enabled .tc-header .social-block{display: block}
What else?.. the navbar on the left, if you have it on the left:
.sticky-enabled .nav-collapse {float: left;}
Did this help? Let me know 😉
It went pretty well, but it is not getting the job done for me. 🙁 Here is my site : equonomix.com
I added the code you give to custom CSS, but on scrolling down, fonts are still shifting a bit and the colour and size of header is also changing. I want a sticky header but its size or logos should remain unaltered during scroll. Please help me out. Also suggest me how to change the colour of header.
Thanks a lot! 🙂
Header background on sticky:
.tc-solid-color-on-scroll.sticky-enabled .tc-header {
background: inherit; /* will inherit the parent background*/
}
or
.tc-solid-color-on-scroll.sticky-enabled .tc-header {
background: #dd0000; /* red */
}
Change the normal header background:
header.tc-header {background: #dd0000; /*red*/}
more about colors
I want a sticky header but its size or logos should remain unaltered during scroll.
Logo is unaltered indeed
To avoid the shifting upward:
.sticky-enabled .navbar-wrapper { margin-top: 4px;}
.navbar .navbar-inner {margin-bottom: 19px;}
And if you want to keep also the border size:
.sticky-enabled .tc-header { border-bottom-width: 10px;}
play with these values.
It’s just about css…
hope this helps
Immense help! It helped. 😀 🙂
I know I am bothering you a lot, but during scroll, the colour of header is getting changed. Can you please suggest me CSS to keep header colour intact during scroll. The border is also shifting upwards during scroll. Is there any way to remove border completely?
Figured a way from CSS codes you gave. Thanks a lot. Awesome support! 🙂
