Archived topic

Mega Menu Mobile Removing Arrows on Child

5 replies · Started by Gerik on May 30, 2020

Viewing posts 1–6 of 6

May 30, 2020 at 1:57 pm #1308091

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

May 30, 2020 at 4:24 pm #1308169

Hi there,

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

Let me know :)

May 30, 2020 at 4:48 pm #1308184

Yes, and bold 2nd tier.

May 31, 2020 at 11:29 am #1309012

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;
}

May 31, 2020 at 11:37 am #1309025

Works, thank you!

May 31, 2020 at 2:30 pm #1309143

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.