Sticky Menu Bar

[David]

Hi, I’m trying to “stick” my menu bar to the top of the screen, and found this code in another response (modified a bit, however)

/* keep menu bar fixed to top of screen*/
.main-navigation {
position: fixed;
top: 0;
}

This works, but I have two issues now:
1.) I’d like to still have the WordPress Nav bar (visible only to admins on my site) still across the top of the screen, full-width. I had to switch to the “float right” version and it just feels wrong – kinda like driving on the wrong side of the road.
2) I’d like the menu bar centered on the screen and full-width rather than pinned to the left. thanks for your help.

[David]

A Third issue now: I’m also seeing that this “sticky” menu bar sits over the upper part of the content, which is a real problem on smaller screens. Some of the text at the top of the page now sits “under” the menu bar and is not visible. What can I do to fix this?

[Alyssa]

@davesharpe this is custom development but perhaps I can point you in the right direction
Keep to menu fixed to the top for regular users since it looks fine, but for admin instead of floating the adminbar keep it fixed. Then change the CSS for the regular menu to be top: 28px instead of 0. Possibly using .admin-bar to determine if the adminbar is displayed to the user.

Hope this helps.

[David]

TJ – thanks for the tips. I’ve almost got it! Here’s a screenshot of what I’ve got now: http://awesomescreenshot.com/04f4cto2ec
As you can see, I have the menu bar fixed to the top of the screen, but on larger screens it is too far to the left. I’d like to have it centered on the screen, with the blue bar extending full-width. Can you help me with this adjustment?

I did solve the problem of the menu bar covering part of the content by putting the header back in (I’d removed it) and adjusting the height and color to match the menu bar. This worked pretty nicely for me. (In the screenshot I’ve scrolled down a bit just so the header didn’t confuse the appearance for the screenshot)

Thanks for your help! I’m getting much closer!

[Alyssa]

@davesharpe Here is a trick
Give a defined width to your menu, lets use 700px for this example
Then use left:50%
Then add a negative margin-left:-350px
This will center the menu for ALL size screens

[David]

@tjchester, Thanks for that trick, but I’m having trouble figuring out how to phrase it. (I’m not a coder and I’ve gotten this far with a lot of cut-and-paste. i feel like a foreign visitor who doesn’t speak the local language and has only a limited vocabulary, but still needs to communicate.) I’ve tried entering “left: 50%” in several places, and I am able to move the menu bar over, but that breaks the “fixed to top” requirement. It seems like I can accomplish one or the other, but not both.

Here’s what I’ve done so far:
/* Changing main navigation appearance. */
.main-navigation li a {
font-size: 18px;
font-weight: 400;
}

/* keep menu bar fixed to top of screen*/
.main-navigation {
position: fixed;
top: 0;
}

/*change site header size*/
.site-header {
height: 46px;
}

Would you please help me understand where to place the changes in your prior reply? Thanks for your patience with me.

[Alyssa]

@davesharpe try this:

.main-navigation {
position: fixed;
top: 0px;
width: 700px;
left: 50%;
margin-left: -350px;
}

[David]

@tjchester – that didn’t work. My menu bar wrapped around to create a second line, as there wasn’t enough room for all menu items on one line. I increased the width to 1000 pixels and the left margin to -500, which looked better on my laptop, but on an Ipad mini the left edge of the menu bar wasn’t visible.

[Alyssa]

@davesharpe that’s the best I can do without getting into custom development. Sounds like you need a developer from here on out. Sorry I can’t help you more.