Simple Mega Menu Page Navigation

Posted in: Newspaper
Post count: 2
zaluckyb
#234659
May 21, 2018 at 11:45 pm

Hi there, I am hoping that someone can assist me.

I have a top menu and want to create one of the menu items as a Mega Menu, I don’t have categories for the menu, and chose to create a custom page for the mega menu.

This works fine, however if I type the list in the page it gets displayed vertically, instead of horizontal.

Is there build in styles that would allow me to create a vertical list eg

<div class=”column-01″>

  • Menu Item 1
  • Menu Item 2
  • Menu Item 3

</div>
<div class=”column-02″>

  • Menu Item 4
  • Menu Item 5
  • Menu Item 6

</div>
<div class=”column-03″>

  • Menu Item 7
  • Menu Item 8
  • Menu Item 9

</div>
<div class=”column-04″>

  • Menu Item 10
  • Menu Item 11
  • Menu Item 12

</div>

So that the menu looks something like

Menu Item 1 Menu Item 2 Menu Item 3
Menu Item 4 Menu Item 5 Menu Item 6
Menu Item 7 Menu Item 8 Menu Item 9

Instead of: a vertical list like:
Menu Item 1
Menu Item 2
Menu Item 3
Menu Item 4
Menu Item 5
Menu Item 6
Menu Item 7
Menu Item 8
Menu Item 9

Post count: 20688
Simion C.
#234737
May 22, 2018 at 11:17 am

Hi,

The top menu cannot display a mega-menu, it is limited to simple drop down menus. The header main menu can display mega-menus
– https://forum.tagdiv.com/mega-menu/
What you want is to display the menu items in multiple columns instead of all of them vertically. You could try with CSS, make tests and see if it works properly. A similar topic here
– https://forum.tagdiv.com/topic/menu-items-split-in-2-columns/

Thanks

Post count: 2
zaluckyb
#234951
May 23, 2018 at 4:05 pm

Thank you for the solution it worked perfectly!

.menu-item-122217 .sub-menu{
padding: 14px;
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
.menu-item-196 .td-menu-item > a{
padding: 4px 10px!important;
}

Viewing 3 posts - 1 through 3 (of 3 total)
The forum ‘Newspaper’ is closed to new topics and replies.