-
AuthorPosts
-
April 12, 2019 at 9:22 am #1089977
Hi Mike,
I only changed the width of your original block from 840 to 630 and the columns to 200 in order to force 3 columns, and it worked. You can see this in the quick css of enfold child. The 3 submenu items appear just like a mega menu in 1 row instead of default column. Which is wrong. The result in screenshots below.So I tried and left away this part of your code:
#menu-item-19330 ul.sub-menu {
width: 630px !important;
}
The result of this is what you saw yesterday: the sub level is default in 1 column – correct – but the sub-sub level flies out far left in 1 column. Which is wrong again.Expected for the sub-sub is:
– 1 block with 3 columns referring to the largest sub-sub level – as above
– and default column design referring to the other sub-subsWhen I started this I did not think of making a difference to the levels, because I thougth that the system would automatically adjust to the content, which is very uneven. But things seem to be more difficult.
So, the aim of all this trouble is to display the items of a certain sub-sub level – in this case “Deutschland” – in a readably compact manner in 1 block with columns – in this case 3 are good.Hope, I made it understandable.
Best regards, JörgApril 18, 2019 at 7:06 am #1092296Hi,
Sorry for the late reply, I took another look but your menu is still not back to the 3 columns as in your screenshot. I tried to follow your explanation and clear my browser cache with no luck.
So I commented out your css and tried again from scratch and was able to create the original 2 columns for the sub-menu.Best regards,
MikeApril 29, 2019 at 12:20 pm #1095229Hi Mike,
I come back to you only now, because I had other things to do. Sorry.
So, you added new code to the Quick CSS. What I want is not 2 but 3 columns. I changed your code respectivley, please see screenshot and code below. I then deleted your older version of code, which obviously referred to a wrong menu ID (below as well).
Fine so far.
The only challange left now is to force the sub-sub blocks for the menu “Brennerei Auswahl” fly out really to the left instead of right. As for now it makes no difference in appearence, if the instruction for – #menu-item-19831 ul.sub-menu li {
display: inline-block !important; – is “float: left” or “float: right”.
Any idea?
best regards, JoergMay 1, 2019 at 12:47 pm #1096166Hi,
Sorry for the late reply, thanks for resetting the css for the menu, so to move the sub-menu to the left on hover for your 3 column sub-menu, please try this css:.html_header_top #top .av_menu_left .main_menu .menu li#menu-item-19330 ul li#menu-item-19831 ul { left: -630px !important; }
The 630px is based on the width of your 3 column sub-menu, so to target the other two sub-menu items we will need to create a new rule, if you wish, but first please test this.
Please see the screenshot in Private Content area.Best regards,
MikeMay 2, 2019 at 2:59 pm #1096489Hi Mike,
great, that’s it!
And now it’s clear that the same fly out should be related to all sub menus of this menu item “Brennerei Auswahl”. Because it looks awful if 1 flyout is left and the others are right.
best regards, JoergMay 3, 2019 at 12:51 pm #1096888Hi,
Glad to hear it worked well, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field for the other two:.html_header_top #top .av_menu_left .main_menu .menu li#menu-item-19330 ul li#menu-item-19833 ul,.html_header_top #top .av_menu_left .main_menu .menu li#menu-item-19330 ul li#menu-item-19832 ul { left: -207px !important; }
Please clear your browser cache and check.
Best regards,
MikeMay 3, 2019 at 3:14 pm #1096924Hi,
perfect, thanks a lot!
The only problem now seems to be, that the menu-item-ID’s are different to the Live page. Can you tell me, please, how and where I could look up theese ID for the Live-Page?
best regardsMay 4, 2019 at 1:00 pm #1097183Hi brandgeist17,
Best regards,
VictoriaMay 5, 2019 at 6:45 pm #1097474Hi there,
great, thanks to all!
best reagrds, JoergMay 5, 2019 at 8:15 pm #1097485Hi,
Glad we could help, unless there is anything else we can help with on this issue, shall we close this then?Best regards,
MikeMay 5, 2019 at 8:40 pm #1097492Hi Mike,
unfortunatedly yes, there is. Please have a short look at the live page. I put in all the IDs and it worked fine. But then I decided to replace the page called “Brennerei Auswahl” by another one, because this one is more plausible with the new structure. Replaced the concerning menu item IDs as well, but … What am I doing wrong?
best regards, JoergMay 5, 2019 at 8:42 pm #1097493Oups, I found it! Sorry for disturbance. You may close the issue.
May 5, 2019 at 9:37 pm #1097510Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)Best regards,
Mike -
AuthorPosts
- The topic ‘Menu design: 4 or 5 columns’ is closed to new replies.