[Support request] Mobile navigation

[Olga]

Hi! How do I add a logo into my mobile primary navigation so it displays in the centre of the screen, to the right of the burger?
Also, because my mobile menu is sticky, I would like to make it less transparent than desktop. How do I control the mobile menu transparency separately?

Thank you!

[David]

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.

[Olga]

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?

[Leo]

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 🙂

[Olga]

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

[Leo]

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 🙂

[Olga]

Done

[Leo]

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.

[Olga]

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

[Leo]

You can try this to change the mobile header color:

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

[Author]

Posts