Sticky header to static header?

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 :slight_smile:

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 :slight_smile:

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.