Mobile menu adaptations, and menu-primary-container behavior on desktop view

  • Resolved leiti373

    (@leiti373)


    1 year ago

    Hi Ben,

    may I ask you for help on two things:

    First, adaptions for the desktop view:

    I “removed” the primary menu container by

    menu-primary-container {
    display: none;
    }

    Now the search box is gone, too ?? How do I get it back on the desktop view (just the search).

    Second, the menu on mobile view:

    Question 1: the burger menu item, is there a chance to keep it on top when expanding the menu, or even show it on top and on bottom of the list?

    Question 2: we have certain pages, subpages, subsubpages, etc. Is it possible to style the list with indenting, different font weights etc. to get a more structured view?

    Thanks a lot for your help!

    Cheers,
    Markus

    • This topic was modified 1 year ago by leiti373.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Hi Markus,

    Thanks for getting in touch about this.

    First, I’d recommend switching to this snippet instead to hide only the menu on desktops:

    @media all and (min-width: 800px) {

  .menu-primary {
    display: none;
  }
}

    It is possible to reorder the elements using flexbox. Here’s a code snippet that will place the menu toggle above the menu rather than after.

    @media all and (max-width: 799px) {
  .site-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .menu-primary-container {
    order: 2;
    width: 100%;
  }
  .toggle-navigation {
    order: 1;
    margin-bottom: 0;
  }
  .title-container {
    order: 3;
  }
}

    And lastly, this CSS will left-align the menu and indent the submenus:

    .menu-primary {
  text-align: left;
}
.menu-primary .sub-menu {
  margin-left: 24px
}

    Since the site title and menu icon are still centered, you may want to either limit the max-width menu to keep it relatively centered, or you could try left-aligning all of those elements too, but this will get you off to a good start.

    Thread Starter leiti373

    (@leiti373)

    Hi Ben,

    awesome! THANKS A LOT ????

    Only thing I was not yet successful is the indenting thing. It still looks like this on mobile view.

    Any advice how to solve this?

    It is a) the indenting and b) the sorting of the entries. It should reflect the page structure and indent on sub(subsub/…-pages.

    Thanks & cheers,
    Markus

    Theme Author Ben Sibley

    (@bensibley)

    You can get this working by creating a custom menu from the Appearance > Menus page (or the Menus section in the Customizer). That will let you re-sort the menu items and create sub-menus, which will be indented.

    Right now, WP is auto-generating the menu using all Pages and sorting them alphabetically.

    Thread Starter leiti373

    (@leiti373)

    Hi Ben,

    percet hint – it works now ??

    Cheers,
    Markus

    Theme Author Ben Sibley

    (@bensibley)

    You’re welcome! Stay in touch if you need anything else, and I’ll be happy to help.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Mobile menu adaptations, and menu-primary-container behavior on desktop view’ is closed to new replies.