Full Length Menu

[Chitika]

I have changed my layout to nosidebars. Primary content is 724px.
But menu is also fixed to this layout.
Logo and menu are in two different lines.

I want the logo and menu in full width or in one line.

[David]

Hi there,

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chitika]

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.

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chitika]

I have resized the mobile logo to 120×14.
But still I don’t see the changes.
I published them.

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chitika]

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.

[Leo]

Try this:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chitika]

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.

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Chitika]

Thanks David and Leo.
Your support was excellent.

[David]

Glad we could be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts