Scrolling Menu Bar

glamsalad · Member · Feb 6, 2017 at 9:28 pm
Copy link

Add topic to favorites
If you check out my site on a mobile browser, there’s a bar which says ‘Glam Salad’ in the middle and the menu option to the left & the search option to the right. How do I make that when you scroll through the posts, this stays? My readers have complained that it’s not so easy for them to access the menu and I noticed on many blogs and sites, the menu option stays as you scroll.

The blog I need help with is: (visible only to logged in users)
staff-loquaciousloon · Staff · Feb 7, 2017 at 6:19 pm
Copy link
Hm – there are a few different factors that come into play with fixed headers, like accounting for the the WordPress.com bar at the top (which is sometimes fixed and sometimes not, and has different heights on different screen sizes.

Give this CSS a try and let me know how it looks. Keep in mind that you have a tall header with that logo, so you’re giving up a fair amount of screen space by going this route:
```
@media screen and (max-width: 600px) {
    #masthead {
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 999;
        background: #fafafa;
    }
    .admin-bar #masthead {
        top: 32px
    }
    .site-content {
        margin: 153px 0 auto;
        padding-top: 0;
    }
}

@media screen and (max-width: 480px) {
    .admin-bar #masthead {
        top: 0;
        padding-top: 46px
    }
    .site-content {
        margin: 156px 0 auto;
        padding-top: 0;
    }
}
```
Unfortunately, there isn’t a way to have the logo scroll off the page and then have the menu stick when it reaches the top. We’d have to hide the logo entirely or try to flip the logo below the other items which a) might not work well and b) probably wouldn’t look wonderful.
glamsalad · Member · Feb 7, 2017 at 8:25 pm
Copy link
Hi Chad,

Thanks for your help! If it has to include the logo, that wouldn’t look very good. There’s no way I can make a fixed menu bar?

If that’s not possible for now, is there any other way to make my content more easily available?
staff-loquaciousloon · Staff · Feb 7, 2017 at 9:15 pm
Copy link
Outside of hiding the logo on mobile, I’m afraid your visitors might have to scroll a bit to get back to the top of the page :)

No items found.