Archived topic
Secondary menu: sub menu item position
7 replies · Started by cjenti on April 20, 2020
Hi all,
I've positionned the secondary menu at the bottom of the page (fixed) with CSS (only 3 icons for main items). I need to center the laptop/ MOBILE sub menu on the page, cause now, it's displayed out of the screen on mobile (only left or right possible initial position)...
I've found this but I'm not satisfied with it:
.secondary-navigation .main-nav ul .menu-item-has-children ul{
position: fixed;
right: 30%;
}
How can I center the 3 sub menus on the page (each one at the same position) and add a dark overlay (like off canva) on the whole page remaining?
thanks in advance!
Hi there,
I'm having trouble picturing the end result you're looking for. Do you have any examples?
Your site doesn't seem to be loading at the moment, so I can't see what you've done so far.
this site is a dev one for testing but it's online and publicly accessible. I've verified and everything seems ok. Hard for you to guess the need if you can't see stuffs... indeed :-)
I haven't got any example for you to see
With words, here's the situation: I've sticked the secondary menu at the bottom of the page.
There are 3 icons as main items. When you hover or click them, the sub menus appear above. My need is to center horizontaly on the page the 3 sub menus. If possible, I 'd like it to react like the off canva panel with a dark overlay on the page when sub menus are displayed.
Let me know if you still can't see the page...
Does this do the trick?:
.secondary-navigation .main-nav ul .menu-item-has-children ul {
left: 50% !important;
transform: translateX(-50%);
right: unset;
}The dark overlay would likely require some custom javascript, as there isn't a class added to the body/html on menu item hover.
Thanks Tom! exactly what I needed for the position.
Concerning the overlay, can you give me an example of how to add a class to the body/html on menu item hover. I think I understand the mechanic, but I don't know how to make it work...
I know you're quite busy with generateblocks for the moment, great plugin by the way, so when you'll have a moment, it would be much appreciated!
Since you're already using jQuery on the site, you could do this: https://css-tricks.com/snippets/jquery/addingremoving-class-on-hover/
You would target #secondary-navigation li for the hover, then add a class to the body element. That way you should be able to add an overlay.
Nice! I'll do this way!
Thanks
No problem :)
