Navigation menu child elements too long.

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.

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, 9 months ago by seboaus.

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!

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.

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!

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.

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!

Hi @babylon1999,

Perfect. Thank you everyone for your help!

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!