[Support request] I want logo in the middle

[Heath]

Hi there. I want to get my logo in the middle with the menu icon on the right side and search on the left stuffed on mobile and tablet devices.

On desktop I want the logo on the middle but on top of each of the menu words listed out of that makes sense. Please advise on how to do this.

[Fernando]

Hi Heath,

Let’s try to tackle this one by one.

First, to put the Logo on top of the menu on Desktop, go to Appearance > Customize > Layout > Primary Navigation > Navigation Location, and set this to Below Header.

Then Appearance > Customize > Layout > Primary Navigation set the Mobile Menu Breakpoint to 1024px which is the max for Tablet.

Kindly let us know once you’ve done so and we’ll go on from there.

Hope to hear from you soon. 🙂

[Heath]

Thanks Fernando. I have completed these steps.

[Fernando]

Alright, now, you can try adding this CSS in Appearance > Customize > Additional CSS:

@media (max-width: 1024px) {
    header#masthead .inside-header {
        padding:0;
    }

    header#masthead .inside-header .site-logo a {
        position: absolute;
        left: 50%;
        top: 4px;
        transform: translateX(-50%);
    }
}

Kindly let us know how it goes. 🙂

[Heath]

That worked but can I get the menu on the right and search icon on the left?

[Fernando]

If you want it for Tablet and Mobile only, replace the previous code with this:

@media (max-width: 1024px) {
    header#masthead .inside-header {
        padding:0;
    }

    header#masthead .inside-header .site-logo a {
        position: absolute;
        left: 50%;
        top: 4px;
        transform: translateX(-50%);
    }

    nav#site-navigation .inside-navigation {
        flex-direction: row-reverse;
    }
}

Otherwise, replace it with this instead:

@media (max-width: 1024px) {
    header#masthead .inside-header {
        padding:0;
    }

    header#masthead .inside-header .site-logo a {
        position: absolute;
        left: 50%;
        top: 4px;
        transform: translateX(-50%);
    }
}

nav#site-navigation .inside-navigation {
    flex-direction: row-reverse;
}

Kindly let us know how it goes. 🙂

[Author]

Posts