Topic: Replicate 3rd level off canvas menu presentation on desktop

jhkoning
April 17, 2024 at 3:33 pm

hey there,
my client wants the new 3rd level nav items, displayed underneath the 2nd level (on desktop)
screenshot
somewhat like it is on the off canvas menu
screenshot
can you provide some guidance on how to achieve this please?
thanks heaps 🙂
Jason
Ying
April 17, 2024 at 4:08 pm

Hi there,

Go to cusotmizer > layout > primary navigation, set Navigation Dropdown to click - menu item or click - arrow.

Let me know if this helps!
jhkoning
April 17, 2024 at 5:11 pm

hey Ying,
well, that was pretty obvious (sorry about that).
click menu works, how would you recommend replicating the arrow (from the off canvas menu)?
Alvind
April 17, 2024 at 8:22 pm

Hi there,

What did you choose for the Navigation Dropdown setting? By default, the arrow should appear whenever a menu has a submenu.
jhkoning
April 17, 2024 at 8:29 pm

hey Alvind,
i did wonder about that, i chose click – menu item
when i chose click – arrow the sub menu didn’t even appear…

ahhh, i know why, some custom css was hiding the arrow from the top level.

.menu-item-has-children .dropdown-menu-toggle {display:none;}
i need to keep it hidden on the top level, but displayed on the sub menus.
any advice on that?
David
April 18, 2024 at 4:23 am
Hi there,

you can hide just the top level items dropdown toggles with this CSS:
```
.main-navigation .main-nav>ul>li>a>.dropdown-menu-toggle {
    display: none;
}
```
If you want it to only affect the off canvas then change the CSS to:
```
.slideout-navigation .main-nav>ul>li>a>.dropdown-menu-toggle {
    display: none;
}
```

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Replicate 3rd level off canvas menu presentation on desktop