CSS to make second level menu horizontal

  • I am making a site with sections, and each section has pages, etc. Pretty typical.

    The “level 1” menu is the top level of the menu that is always visible. I would like the “level 2” menu to also be always visible beneath the top level, and for it to be horizontal.

    In this screenshot below, these items would ideally be in a new horizontal row beneath the top menu: “Other subsite menu”, “a link”, “another”, “one more”. Then the “subpage” would drop down on hover over “one more”.

    https://i.postimg.cc/3wf7Fq8T/Untitled.png

    Ideally I could simply do this with CSS in my child theme. I understand CSS at an intermediate level. How, if at all, could I accomplish this?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter daughtkom

    (@daughtkom)

    Replying to my own question in hopes that someone can provide guidance. ??

    @daughtkom

    Setting the submenu items that way might make so that some submenu items will not be seen on the screen, depending on its size.

    However you can add this extra CSS code in Customizer -> General Settings -> Additional CSS :
    .onepress-menu {
    position: relative;
    }

    .onepress-menu .menu-item-has-children {
    position: initial;
    }

    .onepress-menu .sub-menu {
    display:flex!important;
    justify-content: center;
    }

    .onepress-menu ul li {
    line-height: 26px;
    width: fit-content;
    min-width: 300px;
    flex: 1;
    }

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