Centre Logo

I have changed the structure to Flexbox. The menus are spread out across a wider portion of the page but the logo is still lost amongst all the menus.

Based on your screenshot, you'll need to change the number of nth-child() .

But there just not enough space for all your menu items and the big logo not to overlap each other.

You can try to make the header gofull width instead of contained width at customizer > layout > header > Inner Header Width.

I have deleted some menu items and changed the inner header width but it has made no difference. I don't understand what you mean by my logo being too big- the theme only allows for one size of logo.

Also I have another site where the layout is exactly how I want it- the logo in the middle and menu items surrounding it. You can view it in the private information.

And the image size of the logo is the same for both sites (350 x 70.)

I have altered the logo so that it only says "QualityDogResources"

I have tried to copy the settings from one site to another but some of the options in the customiser menu are completely different.

For instance, the header settings in the successful site enables you to turn mobile header on or off. My dog site doesn't have these settings.

And I don't know what to do next....

Your dog site is still set to float not flexbox when I inspect. It looks like this now:
https://www.screencast.com/t/0tafwgmG0z

Can you keep it as Flexbox and enter the entire CSS from the documentation so we can see what's the cause of that ?

And in order to use mobile header, you'll need to activate the menu plus module at appearance > GeneratePress.

OK. I have set it to flex box and added the CSS. The menu bar now stretches acroos the full width but the logo remains "buried".

Thanks

Do I need to create or add in a menu item separator?

Hi there,

did you resolve this ?

No. If you take a look at my homepage (see below) the logo is still buried...

Is anyone still looking into this? Thanks

Sorry for the delay, your previous reply slipped through our system.
One thing that is going to cause an issue is the Ezoic advert placeholder that is being inserted inside the Header. Can that be removed ?

Removed. What should I be doing next?

Can you try add this CSS as well:

@media (min-width: 769px) {
    .main-navigation .inside-navigation.grid-container {
        max-width: unset !important;
    }
}

Let me know :)

Added it and there has been no change.

What should I try next?

I don't see the CSS has been added to your site yet, can you try clear your cache?

Or forget about this CSS, let's do this:

1. Go to customizer > layout > primary navigation, set Navigation Location to below header.

2 Then you will see the Inner Navigation Width option, set it to full.

3. Set Navigation Location back to float right.

Then the issue should be fixed.

Still not fixed.

when the option was on "below header" the logo sat neatly above the menu but in the current settings the logo just disappears...