Sticky Header issues

FRGD
(@frgd)

12 years, 2 months ago
Hi there… i’ve been using some of the snippets you’ve provided on your website for the sticky header. I’ve been going around in circles with one small problem though and I just can’t seem to find the solution.
In the comments here: http://www.themesandco.com/snippet/make-header-sticky/, I notice that Mac (who has commented) also had a similar problem.

When I use the code as you’ve provided it
```
/* Make Header 'Sticky' */
.tc-header {
position:         fixed;
top:              0px;
background-color: #fff;
z-index:          100;
width:            100%;
}
```
using the section in bold results in the header showing UNDERNEATH the admin bar when logged in.

When I remove this line, it becomes fixed below the admin bar when logged in, which is great. BUT this works ONLY on the home page. on every other page, it is about 18px BELOW the admin bar when logged in and below the browser bar when not logged in.

Any help would be incredibly appreciated. I just cannot understand why it would not be a universal change across the board for all the pages?

Viewing 4 replies - 1 through 4 (of 4 total)

Thread Starter FRGD
(@frgd)

12 years, 2 months ago

I should add, I’ve done various test and I found the following:

When adding a slider to the page, whether it is the home page or not, the fixed header works as it should.

When there is NO slider added to the page, it leaves an open area of about 18px under the admin bar, or browser bar, depending on whether I’m logged in or not.

I have also tried the different page options ie. full-width, sidebars etc. the results are the same for all of them.

rdellconsulting
(@rdellconsulting)

12 years, 2 months ago

Did you add the Carousel padding & Wrapper padding? With wrapper padding, you need to delete #1 or #2 depending on whether there is a slider or not. (You can switch the lines around if you don’t want to delete, as CSS will pick up the order of code inline). Now depending on other changes you made, you may have to adjust the -80px/230px/60px to whatever works for you.

As far as the Admin bar is concerned, I didn’t prioritise on what that looks like as it’s the published website that is important. You may not agree!

Thread Starter FRGD
(@frgd)

12 years, 2 months ago

Yes, everything else works just fine:) I’ve used the wrapping and padding and already adjusted it to my needs.

ok…no problem. Thanks very much for the quick reply. if you do stumble upon a solution though I would greatly appreciate it:)

Thanks again

ElectricFeet
(@electricfeet)

12 years, 2 months ago

As to the height issues: It sounds like you’ve fixed them: the padding is key at the various media sizes. It’s necessary, because setting an element with position: fixed takes it out of the html flow, so the next element will start rendering at the same point.

For your menu issues: I’m using the plugin Auto Hide Admin Bar, which does exactly what it says. Move your mouse near the top of the page and it slips down again. I like it, because you can see the top of your site properly, as it appears to others, even when you are logged in.

I haven’t tested it on mobile devices (where an unhide on hover can’t work) so I don’t know how it behaves there.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Sticky Header issues’ is closed to new replies.

Tags