[Resolved] Mobile menu style

[Juan]

Hi!

My mobile menu looks like that:

[img]https://i.imgur.com/xoZ1n0K.jpg[/img]

And I want it to look like that:

[img]https://i.imgur.com/MsjPdWI.jpg[/img]

How can I do it? I Don’t find the options 🙁

[David]

Hi there,

in Customizer > Layout > Header – Activate the Mobile Header and then you will have the Branding Type option you can set to Site Title.

[Juan]

Thanks David, but the title is still above the menu, I want it to appear to the left of the search engine icon.
[img]https://i.imgur.com/VyeAfYU.jpg[/img]

I want it like that:
[img]https://i.imgur.com/07rpZqN.jpg[/img]

[David]

Try:

1. Reducing the Customizer > Typography > Header – Site Title mobile font size.
2. Reducing the Customizer > Typography > Primary Navigation – Menu Item Width for mobile.

Mobile sizes can be adjusted by clicking the mobile icon first.

[Juan]

Not work. Can I do it with css?

[David]

Can you enable the mobile header, then in the Customizer > Layout > Primary Navigation remove the Mobile Menu label ( just delete the word Menu ). Let us know then ill provide some CSS.

[Juan]

ok, done

[David]

Could you flush and disable your cache? Currently i am not sure that the CSS effecting the layout is correct.

[Juan]

I disabled Autoptimize and cache plugin

[David]

You should be able to change the site title font size and the menu spacing in the customizer for mobile views – possibility that the cached CSS was overriding those changes. If not you can try this CSS:

.main-navigation .mobile-bar-items a, .main-navigation.has-branding .menu-toggle {
    padding-left: 10px;
    padding-right: 10px;
}
#mobile-header .navigation-branding .main-title a {
    font-size: 17px !important;
}

[Juan]

It seems deactivating cache worked, but now menu and search icons look too small 🙁

[img]https://i.imgur.com/41s3GXU.png[/img]

[David]

Looks like you have adjusted the Customizer > Typography > Primary Navigation – put that back to a normal size.
Then go to Customizer > Layout > Primary Navigation and adjust the Menu Item Width – reduce it down to as small as possible, this will reduce the spacing between the menu toggle and search icon.

[Juan]

yeah! it worked!! Now it looks perfect ^^

Thanks a lot David 🙂

[David]

Glad to be of help.

[Author]

Posts