Tagged: navigation
Hi,
I’m trying to have my navigation in two rows on the left and the logo on the right in addition to a mega menu.
I’ve tried to follow this guide https://kriesi.at/support/topic/menu-on-2-lines/ – no success.
The links of menu items end up overlapping and there’s a weird line shift.
I’m working with a child them.
Please help.
– Markus
Hey tebitron gmbh,
Thank you for the inquiry.
The following css code should push a specific menu item below a previous floating item, effectively creating a a second line. Just replace the menu item ID “34” with the actual ID of the fourth item in the menu.
#header #menu-item-34 {
clear: left;
}
#header #header_main .container, #header .main_menu ul:first-child > li a {
height: 30px;
line-height: 30px;
}
Best regards,
Ismael
are you trying to have a menu floating into two lines? – Or do you only want to have a break in menu label ( see here: https://consulting.webers-testseite.de/ )
the first is possible too – with flex box layout. But that will be difficult to style if you have a shrinking header – and if the first level menu-items got a lot of drop-down sublevel menu-items ( or mega-menu option ) see: https://pureinstall.webers-testseite.de/impressum/
You will run into conflict with area to click – The click areas are too close together
see docu: https://kriesi.at/documentation/enfold/menu/#multiline-menu
( but that will work with menu left and logo right too – just change some flex settings to have it )
Hi,
unfortunately the code didn’t really solve the problem of click area since it seems to use the same as the logo height.
But I managed for now with your link to the Multiline Menu in the Documentation.
Thanks.
Hi,
Glad Guenni007 could help, thank you Guenni007, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.
Best regards,
Mike