Mobile navigation

Hi there,

you can enable Mobile Header in Customizer > Layout > Header this provides a separate option to add a logo. Once added i can provide some CSS to center the logo and reduce its opacity.

Ok, that worked.

I don't need the search icon though - it appeared as I loaded the logo. The menu burger should be on the left, logo in the centre, and background less transparent than desktop, how do I do this please?

I don't see the mobile header option activated.

Did you upload a mobile header logo in the customizer as well?

Make sure to clear all caching you might be using including site ground.

Let me know :)

It's not because it is not finished. I would not like to leave a messy site online.

The site shouldn't be messy when the mobile header option is activated with a logo uploaded.

We will need to see it to provide the CSS.

Thanks :)

Done

Try this:

@media (max-width: 768px) {
    #mobile-header .mobile-bar-items {
        display: none;
    }
    #mobile-header .menu-toggle {
        position: absolute;
        left: 0;
    }
    .site-logo.mobile-header-logo {
        margin-left: auto;
    }
}

Make sure to clear all caching you might be using including site ground.

Thank you. It works. I made the mobile/tablet header sticky. How do I make it less transparent than on desktop please?

You can try this to change the mobile header color:

#mobile-header {
    background-color: #000;
}