Mobile menu style

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.

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]

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.

Not work. Can I do it with css?

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.

ok, done

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

I disabled Autoptimize and cache plugin

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

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

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

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.

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

Thanks a lot David :)

Glad to be of help.