Hey guys,
Have a sticky header that snaps on scroll at http://hudson.mystox.com.au
Is there a way to get rid of the snap and just have it static at the top at all times?
Regards,
Paul
Hey guys,
Have a sticky header that snaps on scroll at http://hudson.mystox.com.au
Is there a way to get rid of the snap and just have it static at the top at all times?
Regards,
Paul
It appears to be fixed twice.
In template.css
on line 1217:
.navbar-fixed-top {
position: fixed !important;
And in bootstrap.css, line 4409:
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed ;
Remember if you remove the sticky header and use the fixed positioned version you will need to make sure that content is not obscured by the header. You can do this with some padding but does rely on magic numbers which I hate.
.t3-wrapper{padding-top:5em}
Did I miss something? When I looked at the site, I only saw a fixed header, not a sticky header as such. So assumed what they wanted was just a normal static one.
Hi Sam,
They’re just after a plane-Jane normal static one.
I was just going by the initial question:
That suggests that it was a sticky header and that the OP wanted a fixed header (i.e. ‘static at the top at all times’). I just assumed that the sticky header had been removed and the fixed header already added.
Of course I may be wrong
If a normal header is needed then just remove the .navbar-fixed-top class from the nav
Or no dramas I will give that a try
yeah that worked, I will see if he likes that
Thank you
Looks like he wanted to keep the navbar-fixed-top class
It’s how it should be now on desktop but the hamburger stack is broken on mobile
EDIT: Ok fixed that
Now how to make the height a little bit smaller without breaking everything
You will need to address the top and bottom padding and margin on all those inner nav elements to adjust the height. You will also need to adjust the line-height in places and also change the min-height on .navbar.
Bit stuck on this one, getting around the padding by putting
padding-top: 120px on everything which is going to break at some stage
You don’t need to put padding-top on everything you just need to put it on either the body element or the page container.
As I said above fixed positioned elements are removed from the flow so you cannot ‘automatically’ cater for them which is why they are mostly a bad choice for anything other than a single small line. It’s one of the reasons that sticky headers are popular because at first they are not fixed and then only become fixed after you have scrolled them away.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.