[Resolved] Secondary menu: sub menu item position

Home Forums Support Secondary menu: sub menu item position

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1247274
    cjenti

    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!

    #1248222
    Tom
    Lead Developer
    Lead Developer

    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.

    #1248264
    cjenti

    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…

    https://shop.refletdeplumes.fr/boutique/

    #1248576
    Tom
    Lead Developer
    Lead Developer

    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.

    #1248613
    cjenti

    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!

    #1249519
    Tom
    Lead Developer
    Lead Developer

    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.

    #1249569
    cjenti

    Nice! I’ll do this way!
    Thanks

    #1250044
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.