Admin Bar covers up nav menu

iheartliterati · Member · Dec 12, 2014 at 5:46 am
Copy link

Add topic to favorites
I would like to move the navigation menu to the top of the screen and anchor it there. Setting “position: fixed; top: 0px;” accomplishes this both in the Customize viewer and when I’m not logged in. But when I am logged in, the admin bar covers up the nav menu. Is there a trick to pin the nav menu to the top, without it being obscured by the admin bar?

The blog I need help with is: (visible only to logged in users)
staff-happychia · Staff · Dec 12, 2014 at 8:56 am
Copy link
I see what you mean. But it is not possible to remove the admin bar as long as you are logged in so perhaps we should live with it.

Personally, I don’t think it is a big deal.
thesacredpath · Member · Dec 12, 2014 at 4:15 pm
Copy link
Actually, there is a “logged-in” CSS body class we can use to space the menu down from the top. Give the following a try and see how it works when logged in and when logged out.
```
.main-navigation {
    position: fixed;
    top: 0;
}
.site-header-image {
    margin-top: 45px;
}
.logged-in .main-navigation {
    top: 32px;
}
```
staff-happychia · Staff · Dec 12, 2014 at 10:48 pm
Copy link
Works perfect, thesacredpath :-)

Thank you very much.
thesacredpath · Member · Dec 12, 2014 at 11:32 pm
Copy link
You are welcome. I had not noticed the logged-in CSS body class before this. It could come in very useful.
iheartliterati · Member · Dec 13, 2014 at 2:24 am
Copy link
Yep, that works. Thanks a lot for the help!
thesacredpath · Member · Dec 13, 2014 at 6:29 pm
Copy link
You are welcome.

No items found.