How to make your header / top nav always show?

[MM]

Hi,

On Eleven40 theme and mikemetcalfe.co

I'm trying to have the header bar always show, so if users scroll down, it's always at the top of page.

Anyone found a solution? Thanks!

[Brad Dalton]

This may need some modifying http://www.briangardner.com/sticky-menu/

Or there are plugins which will do this.

---

Tutorials for StudioPress Themes.

[csbeck]

I've done this recently on a site I completed (http://www.wealors.com). It's not as flashy (no fade or sliding etc.) but it does the trick. I just made sure that the header/menu area had these attributes:

.header {

position: fixed;

top: 0px;

}

I hope this helps.

[MM]

Thks csbeck and brad.  @csbeck - did you insert that in style.css ?

[csbeck]

Hi Michael,

Yes, I did have that information in my style.css (Appearance/Editor).

In fact, if I were you, I would find the section in your style.css with "/* Header" and add a new style and attributes:

#header {

    background: url("images/bg.png") repeat-x scroll 0 0 transparent;
    margin: 0 auto;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
}
Or something like this. This way, your background will stay with your header.

Good luck.  Chris

[MM]

Awesome, thanks Chris. Almost there! Any idea what's wrong here: mikemetcalfe.co ? Thks.

[Brad Dalton]

Good little trick. Heaps easier than using 3 types of code.

---

Tutorials for StudioPress Themes.

[csbeck]

Yeah, almost there.

You've got 2 sets of quotes for the background image. You'll need to remove those. That will fix your background.

Now you have to push your inner div down so it doesn't get cut off. Use:
#inner {

    clear: both;
    margin-top: 50px;

}

And then you'll have to remove the background from the first wrap div.

#wrap {

    background: url("images/bg.png") repeat-x scroll 0 0 transparent;

}
You can either remove the background line or comment it out like this:

#wrap {

    /***background: url("images/bg.png") repeat-x scroll 0 0 transparent;***/

}

Everything should look good then.

 

[csbeck]

Looking at it a bit more, I notice that the background graphic for the #header has a little white gradient for the shadow. This doesn't look totally polished as you scroll the page down. You can see the white pixels.

If you have Photoshop, I'd suggest making a modification to the graphic. Take it in Photoshop and use one of these methods:

crop out the bottom few pixels and upload it to your theme images folder. For the shadow and add a drop shadow to the #header style using CSS (http://css3generator.com/) - watch out for compatibility though - older IE and others might not display the shadow.

delete the white shadow and add a transparent shadow (either using a gradient fill or a layer effect (watch out with the layer effect though - drop shadows don't go all the way to the edges because it's only making a drop shadow for the pixels. You'll have to save the drop shadow layer as a layer and stretch it or increase the layers pixels so the shadow goes the full width. I can explain more about this if you want to go this direction - it's a Photoshop thing)). Save the graphic out as a PNG with transparency and upload to your theme images folder.

This way anything visible below it will look like it's got a shadow on it from the #header. Does this make sense?

Chris

[MM]

Thanks Chris - will have a crack at the above and report results 😉 Much appreciated!

[MM]

Hi Chris - thanks again.

Turns out it doesn't make sense. Probably user error... but ends up in chaos. Have reset the site.

Just trying to get the full black bar with orange box / logo section, and my custom menu, sticking as users scroll.

Have put CSS (version without sticky menu attempts) here  http://diffchecker.com/5cv2e21n 

 

Think misunderstanding is where to put your code sections suggested. Suggested CSS placement in the link above?

 

Figure if the black bar sticks, that will remove the white dots issue you mentioned also. THANK YOU for helping.

 

Michael

 

[csbeck]

Hi Michael,

I've made some changes to your style.css file. Try this:

https://gist.github.com/csbeck/5155707

Look for all the places that I commented with /** added **/

I believe you will still have to fix the background image so you don't get the white below the black area.

Hopefully this helps. Don't hesitate to ask for more info if this doesn't help enough.

Chris

[MM]

Hi Chris,

 

Thanks again - you've educated me on Wraps, Inner and code in the right places 😉

Played with bg.png and pixels removed. That should be sufficient trickery for now.

1 error though...

The menus now only show 1 level of dropdown each time - couldn't find answers on this issue?

 

Thks, Mike

 

Also, for Eleven40 users, I changed the below margin-top from 50px to 85px to regain pre-edit spacing.

 

/* Inner
------------------------------------------------------------ */

/** added **/
#inner {
clear: both;
margin-top: 85px;
}

#inner .wrap {
border-bottom: double #ddd;
margin: 0 auto 30px;
overflow: hidden;
}

 

[csbeck]

Hi Mike,

Lookin' good.

To fix the menu issue (not showing all of your dropdowns) remove this line (or comment it out) from #header:

overflow: hidden;

That should do it.

I'm getting another funny / weird artifact (at least in FireFox). If you go to one of your posts and scroll your page up and down, the social buttons are floating over the header. Not sure what to do about that at this moment. I need to look at that more.

Your videos are doing the same thing.

Chris

[csbeck]

OK. I found where the CSS is making those buttons appear over your header.

There's a style being used by your social buttons called: a.sd-button > span

There's an attribute of opacity: 0.8;

When I turn that off, the buttons go behind the header div. Weird.

So you could do either of these things:

Overwrite that style by adding a new style in your style.css:

a.sd-button > span {

opacity: none !important;

}

or

Edit your #header style by adding:

z-index: 100;

 

Either one of these things should fix that.

Let me know how it goes. Chris

 

[MM]

Thanks Chris, menu's are sorted.  I see what you mean re firefox - no idea. If you find answers, I'm all ears 😉

 

 

[csbeck]

Looks like your videos are still overlapping. Do you have the ability to set your YouTube videos wmode to opaque or transparent. Not sure which one works right off. You'll have to add one of these to the end of your YouTube embed code.

&wmode=opaque

&wmode=transparent

Here's a sample:

<iframe width="425" height="349" src="http://www.youtube.com/embed/8tPnX7OPo0Q?wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>

Let me know if this works. Chris

[csbeck]

Please ignore this note...

[MM]

No worries. The z-index: 100; fix worked for both social icon overlap, and for the videos (except the arrow buttons!). So close to perfect - thanks!

[csbeck]

OK, I think your videos will work perfectly if you use that "wmode" adjustment.

Best of luck. Chris

[Author]

Posts