Full Length Menu

Hi there,

in Customizer > Layout > Primary Navigation set the Inner Navigation Width to Full

Hello David.

Thanks . That worked in desktop mode.

But I have another problem.

The same does not work on mobile.

Logo - Menu - Search icon in one line on Mobile and Tablets.

Your logo is too wide for those smaller devices.
We recommend enabling the Mobile Header in Customizer > Layout > Header and adding a more mobile friendly sized logo.

I have resized the mobile logo to 120x14.
But still I don't see the changes.
I published them.

What i meant was use a different logo - one that isn't as wide as the other - maybe just your icons without the text?

Otherwise you will have to significantly reduce its size to make it fit - which you can do with this CSS:

.navigation-branding img, .site-logo.mobile-header-logo img {
    height: 15px;
    padding: 0;
}

Your thought is excellent.
I just made my favicon as logo for mobile. That fits good.
Thanks very much.

If not bothering you too much, can I make the
Logo (favicon icon) - left
Menu label - center
Search icon - right.

Try this:

.main-navigation.has-branding .menu-toggle {
    order: 1;
    margin-left: auto;
    margin-right: auto;
}
.site-logo.mobile-header-logo {
    margin-right: 0;
}

Thanks Leo. This code worked.

One last question and I will make this resolved.
The Mobile Menu Breakpoint is set to default at 768px.

In tablet mode, I still see logo and menu on two different lines.
How to make it like Mobile, keeping the mobile menu breakpoint as default.

Increase the Mobile Menu Breakpoint in Customizer > Layout > Primary Navigation

Thanks David and Leo.
Your support was excellent.

Glad we could be of help