Mobile Navigation on desktop issues

  • Resolved rod

    (@nomadarod)


    3 years, 10 months ago

    Hi Oliver,

    When selecting the Mobile Nav on desktop option, the menu opens and fills up almost the whole page, leaving a large empty space between the menu items and the button.

    The .menu-button-container has a width of 100% and covers some of the menu items. I removed my added css and it still does, so I am guessing it is an issue with the theme’s css.

    Could you give me some clues on how to make the opening menu container smaller, similar to the sub-menu container? And which css classes to use to “decorate” it a bit?

    Thanks

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi Rod,

    Yes, this is basically what the mobile menu does!

    Although we are not seeing the close button overlapping the menu items, this will reduce its width …

    .primary-navigation-open .menu-button-container {
width: auto;
}

    … does that help?

    To bring the menu items in further, how about adding some padding on larger screens …

    @media only screen and (min-width: 482px) {
.primary-navigation .primary-menu-container {
padding-left: 20vw;
padding-right: 20vw;
}
}

    Can you please elaborate how you’d like to decorate it and I’ll see what I can do.

    Thanks,

    Oliver

    Thread Starter rod

    (@nomadarod)

    Hi Oliver,

    That helped to reduce the button width. thanks.

    The padding does its thing, but I need to know exactly what I want before coming back to it, and the same for the decoration.

    Something in mind would be a menu container that takes only a percentage of the screen, maybe with some border, background-color on hovering the

    • and maybe some transparency.
    Thread Starter rod

    (@nomadarod)

    Further to my last message, we’ve just pushed an update to the Options for Twenty Twenty-One plugin to fix a couple of the issues you’ve noticed in this option.

    thanks!

    Please note that you have left this message on the forum for the main theme rather than the support forum for the plugin.

    oops. sorry for that.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Mobile Navigation on desktop issues’ is closed to new replies.