[Resolved] Help with primary menu styling

[Ashutosh]

Hello, I have a few questions regarding the primary menu on a site (linked below).

1. I added the CSS from this page to create a “mega menu”. The menu seems to support items till the “grandchildren” level. Is it possible to tweak the CSS so that “great grandchildren” items look OK? If you check the mega menu on the site, the great grandchildren items look out of place and the hover effect doesn’t work correctly on them.

2. I’d like to add some indentation to the sub menu items. For ex,

Parent menu
-Sub menu
--Sub sub menu

If this is possible in the mega menu, that would be great, otherwise I’d like this in the default menu layout.

3. Is it possible to show one of the menu items outside the mobile “hamburger” menu? For ex, if you see the site there is a “Login/Sign Up” menu item. Once logged in, users see another menu item with their username and sub menus to open a dashboard or logout. Is it possible to show either of these menu items, along with their sub items, outside the hamburger?

[Ying]

Hi there,

For question 1, can you try to replace this CSS:

    nav .main-nav .mega-menu ul .sub-menu {
        position: static;
        display: block;
        opacity: 1;
        visibility: visible;
        width: 100%;
        box-shadow: 0 0 0;
        left: 0;
        height: auto;
        pointer-events: auto;
        transform: scale(1);
    }

With this:

nav .main-nav .mega-menu ul .sub-menu {
        position: static;
        display: flex;
        flex-direction: column;
        opacity: 1;
        visibility: visible;
        width: 100%;
        box-shadow: 0 0 0;
        left: 0;
        height: auto;
        pointer-events: auto;
        transform: scale(1);
    }

For question 2, add this CSS:

nav .main-nav .mega-menu ul .sub-menu li {
    padding-left: 10px;
}

For question 3, if there’s a submenu in that login item, it’s better to create a secondary navigation only for that menu item, hide the secondary navigation on the desktop, so it only shows on mobile.

[Ashutosh]

Thank you Ying! Everything worked perfectly! I will look into the secondary menu option.

[Ying]

You are welcome 🙂

You can open a new topic if there are any questions regarding creating the secondary navigation.

[Author]

Posts