Menu design: 4 or 5 columns

Hi,
Sorry for the late reply, if I understand you would like to have columns in your sub-menu, but you don’t want to use the mega-menu.
This css will create two columns in a sub-menu:

#menu-item-3477 ul.sub-menu {
width: 320px !important; 
}
#menu-item-3477 ul.sub-menu li {
display: inline-block !important; 
float: left !important; 
width: 150px !important; 
}
#menu-item-3477 ul.sub-menu li:nth-child(odd) {
float: left !important; 
margin-right: 10px;
width: 150px !important; 
}
#menu-item-3477 ul.sub-menu li:nth-child(even) {
float: right !important; 
width: 150px !important; 
}

you will notice the “menu-item-3477” which you can change, this is a test for your “Obstbrand” sub-menu, just add the css to your Quick CSS and clear your browser cache.
Here’s the results:

Another idea I had was to create a lightbox popup “moral” for the content of the page you linked to.

Best regards,
Mike

Hi,
Glad to hear, to use it for the “Brennerei-Auswahl” menu, please replace “#menu-item-3477” with “#menu-item-19330” in the css.

Best regards,
Mike

Hi,
I took a look at your menu, but the text already seems to be aligned to the left in your sub-menu. To match the sub-menu font size with the main menu font size, please try this css:

.sub-menu > li > a > .avia-menu-text {
font-size: 16px !important;
}

Best regards,
Mike

Hi,
Ok, I think I understand now, you want the sub-menu items to fly out the opposite way that it is now, we can help but we are going to need to see the menu as in your first screenshot, when I look there is only one item in the menu.
I’m not sure what you are hoping to achieve with this, I thought we addressed your columned sub-menu with the sub-menu column css that is back a few posts? The only drawback was that it will only create two columns and your mockup is 4 columns, which the only way I see to achieve 4 columns was with a mega menu, but I know you don’t want to use a mega menu.
If you are having trouble getting the column css to work to create the 2 columns then I can assist with it, but I will need to see the menu with the many items as in your screenshot.

Best regards,
Mike

Hi,
Thanks for the feedback, this helps to make more sense. Is your testsite on your localhost? can you put it online so we can assist? It is very difficult to guess at the changes necessary from a screenshot. To make the menu fly out left we have to do a negative left position, here is an example on the menu I can see:

.av-main-nav #menu-item-19330 > ul.sub-menu {
    left: -50px !important; 
}

Please see the screenshot in Private Content area.

Best regards,
Mike

Hi,
Thanks for the token login, but I also getting another login, probably .htaccess auth.
please include this info.
Please see the screenshot in Private Content area.

Best regards,
Mike

Hi,
Sorry I was still not able to get past the first one.

Best regards,
Mike

Hi,
Thanks but I’m not sure what is wrong, I also tried using a VPN with a de IP, but still no go?
Please see the screenshot in Private Content area.

Best regards,
Mike

Hi,
There we go, that worked :)
Ok so you would like the sub-menu fly out to the left,
Please try this css:

.html_header_top #top .av_menu_left .main_menu .menu li ul ul {
    left: -670px !important; 
}

Please feel free to adjust to suit.

Best regards,
Mike

Hi,
Unfortunately I don’t have access to edit the css, I get this error message:
“Sie sind leider nicht berechtigt, auf diese Seite zuzugreifen.”
Please remove the css I posted earlier, but leave your column css, so I can test again.
I’m surprised that this occurred, because when I was testing yesterday my css didn’t seem to break your columns.

Best regards,
Mike

Hi,
Sorry, I’m having a hard time getting your css back to showing 3 columns, I assumed that just removing the css that I last recommended would have restored your 3 columns so I could try again, but it doesn’t.

.html_header_top #top .av_menu_left .main_menu .menu li ul ul {
    left: -670px !important; 
}

Was some other css removed when this was added? Can you restore it back to your 3 columns?
The original css I posted only creates 2 columns.

Best regards,
Mike