[Resolved] Mobile menu style

Home Forums Support [Resolved] Mobile menu style

Home Forums Support Mobile menu style

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #972339
    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 πŸ™

    #972344
    David
    Staff
    Customer Support

    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.

    #972439
    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]

    #972481
    David
    Staff
    Customer Support

    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.

    #973194
    Juan

    Not work. Can I do it with css?

    #973246
    David
    Staff
    Customer Support

    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.

    #973254
    Juan

    ok, done

    #973257
    David
    Staff
    Customer Support

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

    #973258
    Juan

    I disabled Autoptimize and cache plugin

    #973290
    David
    Staff
    Customer Support

    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;
    }
    #973412
    Juan

    It seems deactivating cache worked, but now menu and search icons look too small πŸ™

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

    #973415
    David
    Staff
    Customer Support

    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.

    #973419
    Juan

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

    Thanks a lot David πŸ™‚

    #973425
    David
    Staff
    Customer Support

    Glad to be of help.

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.