I have a mega menu with multiple categories and subcategory drop downs. When hovering over a subcategory, the drop down menu appears on the left and obstructs the view of the other categories. Can this alignment and spacing be changed? Can it be changed for just one subcategory drop down menu?

My URL is http://test.burn-blog.com/

Thanks for writing in! Please add the following code in your Customizer via Appearance > Customize > Custom > CSS:

.masthead-inline .x-navbar .desktop .sub-menu .sub-menu {
  top: -1.025em !important;
  right: 0 !important;
  left: 71% !important;
}

Let us know how this goes!

The spacing is same as it’s fixed space. As your menu texts are bit smaller for Stories, it seems a bit more space although they are same. However you can decrease the spacing a bit for that item –

#menu-item-8955 .sub-menu {
  left: 60% !important;
}

If you have other concern. please clarify a bit with a screenshot.

Hope this helps.

Cheers!

Appreciate the help thank you.

You can add this under Custom > CSS in the Customizer.

body .x-navbar .desktop .x-nav > li ul {
  top: 127px;
}

You may change 127px to achieve your desired result.

With regards to inspecting element with firefox, please refer to the link below.

https://developer.mozilla.org/en/docs/Tools/Web_Console

Thanks

Note how the sub menu “Reviews” is too wide when hovered over and partially covers the main menu items under “News” in black. The same thing occurs when hovering over “BBQ, Grilling & Smoking” and actually covers all of the menu items under “Stories”:

These sub menus are unnecessarily wide. How can I fix them?

Thanks for the other info.

Thanks for updating! For the submenu of dropdown you can change the below class –

.desktop .x-nav .x-megamenu > .sub-menu > li > .sub-menu {
  background: #f54;
  max-width: 150px;
}

Now, add your own CSS rule to set a maximum width to shrink it, set background color etc.

Hope this helps.

Cheers!

Let’s update the code for different class –

.masthead-inline .x-navbar .desktop .sub-menu .sub-menu .sub-menu {
  background: #f54;
  left: 50% !important;
  min-width: 150px;
}

You can change/remove the left value here. Change/Add other CSS rules with your own.

Also note that you have different positioning for the Stories submenu. Let’s also update that if you need –

#menu-item-8955 .sub-menu {
  left: 50% !important;
}

Let us know how it goes.

Cheers!