Navigation menu child elements too long.

  • Resolved seboaus

    (@seboaus)


    1 year, 2 months ago

    Hi,

    If you take a look at my site, hover over products > cleaning products and you’ll notice that the list of child elements are off the screen without scrolling. Is it possible to set the child element list at the top of the dropdown menu? For example if you hover over products > residential, the child element list is at the top but that’s just because “residential” is at the top. Additionally, I’d only like to do this for particular parents because if it was to be done hovering over products > pacvac, the user would not be able to click on the child elements because the menu would disappear when moving the mouse into the background.

    Thank you!

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Igor H

    (@ihereira)

    1 year, 2 months ago

    Hi,

    I was checking the cleaning products section, I can see the section is too long because there is a video at the top.

    This is how it looks on my end:

    https://gifyu.com/image/SqWP6

    If this is not what you are referring to, please provide us with more details.

    Thanks.

    Thread Starter seboaus

    (@seboaus)

    1 year, 2 months ago

    Hi @ihereira,

    My apologies for not being clear in my last post. I am speaking about the navigation menu only.

    Please see screenshot of me “hovering over products > cleaning products” and you’ll notice that it’s child menu items are hanging off the page:

    https://gifyu.com/image/SqV2h

    I’d like to be able to move those child menu items to the top to align with the parent navigation menu when hovering over some parent menu items.

    For further clarification, at the moment the top of the child menu items are aligned with whatever the user hovers over (red) but I want it to be aligned with “Sebo residential vacuum cleaners” (green) as you can see in my screenshot:

    https://gifyu.com/image/SqV2l

    Basically I want to move the red box up to where the green box is when hovering over a parent item with many child items.

    Thanks

    • This reply was modified 1 year, 2 months ago by seboaus.
    Saif

    (@babylon1999)

    1 year, 2 months ago

    Hello @seboaus,

    I understand what you mean here, you want the first submenu to be aligned with the parent menu.

    This is a bit tricky as targeting the whole menu will make future menu elements distorted, I tried applying the CSS below to the “Products” menu item only.

    /*  Make child menu align with parent  */

#menu-item-428 > .sub-menu > .menu-item:hover{
  position: initial !important;
  bottom: 100% !important;
  top: 0 !important;
}

    End result: https://d.pr/v/SIdJmb

    If you need help adding the snippet above to your theme, you can check this guide: https://wordpress.com/support/editing-css/

    Hope this helps!

    Thread Starter seboaus

    (@seboaus)

    1 year, 2 months ago

    Hi @babylon1999

    Thank you, this is exactly what I wanted.

    However, there is a small problem with this. When hovering over the parent menu item “Pacvac Vacuum Cleaners”, there are only two items in its submenu making it too small to access. Upon moving the mouse off the parent menu, to get to the submenu, the whole menu rightfully disappears. SS attached:

    https://gifyu.com/image/S7bOn

    Is there any way to exclude this particular submenu from moving to the top?

    Thanks.

    Amir A. (woo-hc)

    (@amiralifarooq)

    1 year, 2 months ago

    Hi @seboaus

    I have checked the submenu, and it’s showing down on my side.

    You can take a look at this screenshot: https://screencast-o-matic.com/i/c0nZoMVyzpX

    Let me know if I am missing something important!

    Thread Starter seboaus

    (@seboaus)

    1 year, 1 month ago

    Hi @amiralifarooq,

    If you look at the screenshot I sent in my post above, you can see me hovering over “Products” > “Pacvac Vacuum Cleaners”. If you can see, the submenu of “Pacvac vacuum cleaners” is at the top making it impossible to click on. That is what I’ve been asking for since the beginning of the post, however, it’s just on that one submenu that it breaks. The rest of the menu works perfectly. I have temporarily taken the CSS off the menu so that customers are able to use it to click through the Pacvac submenu. Is there any way that I can use the same CSS but exclude the “Pacvac Vacuum Cleaners” submenu from moving to the top?

    Thanks.

    Saif

    (@babylon1999)

    1 year, 1 month ago

    Hello @seboaus,

    Here’s a modified version to exclude that menu item. 

    /*  Make child menu align with parent  */

#menu-item-428 > .sub-menu > .menu-item:not(.menu-item-430):hover{
  position: initial !important;
  bottom: 100% !important;
  top: 0 !important;
}

    Hope it helps!

    Thread Starter seboaus

    (@seboaus)

    1 year, 1 month ago

    Hi @babylon1999,

    Perfect. Thank you everyone for your help!

    Roxy

    (@roxannestoltz)

    1 year, 1 month ago

    Hi @seboaus ,

    After checking your site, I can see that the submenu is now displaying as you intended, here is what I see:

    Glad to hear that you have managed to achieve your desired results!

    Since this has been resolved, feel free to create a new topic should you need any further help.

    Cheers!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Navigation menu child elements too long.’ is closed to new replies.