[Resolved] Remove three bar icon & make sticky header

[Steig]

Hello,
I’m creating a very simple webpage and would like to only have the magnifying glass show up on the navigation bar. Desktop it looks fine. On mobile, it shows the three bar icon. How can I remove this?

On both desktop and mobile, I’d like the header and menu bar to be sticky. I see how to mark the navigation bar as sticky and followed these instructions to make the header sticky. It didn’t work and now when scrolling on mobile & desktop the navigation bar doubles up in size when scrolling and the header just scrolls away.

I appreciate your help!

[Anil]

add this css

.main-navigation.has-branding .menu-toggle{display:none}

[Steig]

didn’t seem to make any change. I made it the top line in the simple CSS window, if the order matters.

[David]

Hi there,

i am being country blocked from viewing your site if you can remove the block for the UK so i can see what nav setup you are using.

[Steig]

I’ve lifted the restriction for the UK. The whole GDPR thing seemed difficult to understand or deal with so I just blocked all non US locations.

[David]

Haha thats one way to avoid it 🙂

Try this CSS:

.main-navigation .menu-toggle {
    visibility: hidden;
}

[Steig]

I’ve added that CSS without any change to the site. Should I be removing any of the other CSS statements? I’ve just been adding to it with these two new suggestions.

[David]

You only need the CSS i provided. But – its working when i visit your site so maybe you need to clear your browser cache.

[Steig]

OK, i’ve deleted all CSS except that last statement you provided. I’ve left hook element as described in the link mentioned in my original post.

I’ve also cleared my browser cache. The header still doesn’t scroll. Ironically deleting the other CSS has also caused the primary navigation bar to become much taller. According to the customizer/layout controls, it’s still set to 32px, but visibly it clearly is taller.

What can we do?

[David]

So you have the Site Title hooked into the navigation – but currently its the same color as the navigation background ( its also whats causing the increase nav height ). Do you need this?

For the sticky navigation you also want the logo above the nav to be visible when scrolling?

[Steig]

My intent was to have the site title (which I thought was the only the logo) and the navigation bar be sticky. So end goal is the logo and nav bar would be sticky. I thought I needed the Hook element to achieve this. Should I remove it?

[David]

If you don’t want to display the site title then you can remove it.
How do you want the logo displayed on mobile? Inline with the search icon or above, like it is on desktop?

[Steig]

OK, I’ve removed the site title hook. For mobile, I’d like the logo to be centered and not scroll away.

[David]

In that case then disable the Sticky Navigation as this doesn’t apply to the Site Header ( Logo ). And use this CSS:

#masthead, .main-navigation {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 101;
}
.main-navigation {
    top: 84px;    
}

[Steig]

This does keep the logo and nav bar stuck at the top on mobile and desktop. But it introduced two other problems.

1) on mobile the 3 bar icon on the left of the nav bar is back. Since I only have the search icon on the right hand side, I would like that to go away.

2) On the desktop, when scrolling, the right sidebar scrolls right up behind the navigation and is visible in the white space above the navigation. I’d like it to disappear from view as it goes behind the navigation bar.

[Author]

Posts