I want logo in the middle

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. :)

Thanks Fernando. I have completed these steps.

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. :)

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

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. :)