Header menu customization

  • Resolved sheldon88

    (@sheldon88)


    5 years, 7 months ago

    Hi everyone,

    I’m struggling with a header menu with child items. I didn’t create a custom menu, so my pages are listed. For the moment, my hierarchy has got 3 levels:
    Page (Level 1)
    – Child page (Level 2)
    — Sub-child page (Level 3)

    What I’m trying to avoid is the dropdown to go out of the screen, that is:
    1) the dropdown menus should be limited to the tagline width: when I hover over an element, the dropdown should never widen the page and let the horizontal navigation bar appear on the browser, but its right border should correspond to the right border of the site itself. I want a “lateral cap”.
    2) The up arrow of the Level-2 dropdown menu should always be placed under the corresponding Level-1 item.
    3) Of course, the second dropdown (corresponding to the 3rd level of the hierarchy) should appear in a coherent way: for example, at the left of the first one if there is not enough space on the right, without overlapping it.
    4) The second dropdown should not change the first dropdown padding on appearing.

    Thanks in advance.

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

  • Personally in this case I’d recommend creating your custom menu to keep it simpler. Then you can add sub-menus as needed on your child pages, using widgets or blocks.

    Otherwise, you’re welcome to add CSS to adjust how your menu displays. Just note that sub menus that drop below can get long enough that they go off the screen vertically, too, so you’ll want to take care to use CSS that fits your site content well.

    Thread Starter sheldon88

    (@sheldon88)

    In the end I approached the issue in a different way. I limited the depth of the dropdown menus to the 2nd level, so just 1 dropdown appears now.
    I edited navigation-top.php adding the “depht” argument to wp_nav_menu:
    wp_nav_menu(array('depth' => 2));

    Anyway, I think that the behaviour of the top menu should be analyzed in the next versions of the theme.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Header menu customization’ is closed to new replies.