[Resolved] Mega Menu Mobile Removing Arrows on Child

[Gerik]

I followed this: https://docs.generatepress.com/article/building-simple-mega-menu/

Looks great on Desktop.

I would like

For Child Item NOT to have a pulldown just list everything out.

Right now it’s
Home
Sample Page
Parent Item ˅

when you click on Parent Item then it becomes

Parent Item ˅
Child Item ˄
Child Item ˄
Shop ˄
About ˄

I would like it to be
Parent Item ˅
Child Item
Grandchild Item
Grandchild Item
Child Item
Grandchild Item
Grandchild Item
Shop
About
Test
About
Test
Test

with the bold just like the desktop version

[Tom]

Hi there,

So just to confirm, you want to show the sub-menu items on mobile by default with no arrows?

Let me know 🙂

[Gerik]

Yes, and bold 2nd tier.

[Tom]

Give this a shot:

.main-navigation ul .mega-menu > ul > li > ul {
    position: relative;
    top: 0;
    left: auto!important;
    right: auto!important;
    width: 100%;
    pointer-events: auto;
    height: auto;
    opacity: 1;
    display: block;
    visibility: visible;
    box-shadow: 0 0 0;
}

.main-navigation ul .mega-menu > ul > li > a > .dropdown-menu-toggle {
    display: none;
}

.main-navigation ul .mega-menu > ul > li > a {
    font-weight: bold;
}

[Gerik]

Works, thank you!

[Tom]

You’re welcome 🙂

[Author]

Posts