Floating header/menu bar

bronwynandadam · Member · Nov 1, 2014 at 3:38 pm
Copy link

Add topic to favorites
Hi! Had a search on this but can’t find the answer. Is there any way to use a Custom Design Upgrade to make the top menu bar into a floating menu bar (that stays at the top as you scroll down)? I’m using the Triton Lite theme.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Nov 1, 2014 at 8:07 pm
Copy link
Hi there, go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.
```
#masthead {
    position: fixed;
    z-index: 1;
}
#header-image {
    margin-top: 45px;
}
```
The second rule above spaces the header image down so that it is completely visible. When you set the menu to position: fixed; it loses its relationship to the other elements on the web page and floats independently, so the header image will slide up behind it by the height of the header image.
bronwynandadam · Member · Nov 3, 2014 at 12:43 pm
Copy link
Magic! That is awesome. Thankyou so much!
thesacredpath · Member · Nov 3, 2014 at 3:21 pm
Copy link
You are welcome.
colinbrianday · Member · Nov 17, 2014 at 10:53 am
Copy link
This is almost magic for me … the element becomes floating and works great, but my page content that comes after the masthead menu is no longer centered. Any idea how to fix the rest of my page content by some forced centering somehow?
hallluke · Member · Nov 17, 2014 at 12:33 pm
Copy link
@colinbrianday the site linked to your forum profile is using a different theme to one the original CSS was written for. Almost all CSS is theme dependent (meaning it’s written for one theme in particular and is unlikely to work for any others without making modifications).

This should achieve the same thing for the Expound theme:
```
#site-navigation {
  position:fixed;
  top:0;
  left:0;
}

.logged-in #site-navigation {
  top:32px;
}

#masthead {
  padding-top:20px;
}
```
You need to remove your existing CSS modification as hiding the attribution links in the footer is against the TOS and will get your site suspended. You can modify the appearance to make it more subtle though. If you have any ideas I can help you with that too, although it might be best to start a new post for that here in the CSS customisation forum.

No items found.