That has to do with the sticky headers option.
The sticky header options I found are like below or this image.
Sticky on scroll
If checked, this option makes the header stick to the top of the page on scroll down.
Sticky header : display the tagline
Sticky header : display the title / logo
Sticky header : display the menu
Sticky header : shrink title / logo
Sticky header : semi-transparent on scroll
Did I look at the wrong place?
That’s the correct place. Turn off sticky header and you’ll see the difference.
Ah. I see what you guys mean. It seems like I didn’t make the question clear enough.
Let’s me explain again.
I want the sticky header staying on my website. The problem is the part of navigation. When the page is on the top, the text of navigation is bigger and at a lower position. When the page is scrolled down, the text jumps to a higher position and font size becomes smaller.
My question is how to make the text at same position and same font size when the page is on the top and also when the page is scrolled down.
There is a class that is changed depending on the sticky status:
.sticky-disabled and .sticky-enabled.
1) Take this out of your style.css:
.navbar .navbar-inner{
margin:8px 20px 5px;;
}
which aligns the menu items better
2) Still looking for something that reduces by a small %ge when sticky-enabled emerges. May be some javascript?
Thanks, rdellconsulting. The sticky class is very useful.
@rdellconsulting.
“sticky-enabled” class, is added via javascript as you say, but changes are made with css.
@dimanche7
try this css:
.sticky-enabled .navbar .nav>li>a {
font-size: 16px;
}
.sticky-enabled .navbar .navbar-inner{
margin-top: 12px;
}
Thank you so much! It works just like what I want!
