[hwressniggParticipant]

Hi,

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/

[Nabeel AModerator]

Hi there,

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!

[hwressniggParticipant]

Thank you, the code works, however the padding in the drop downs under “Recipes” doesn’t match the padding on the drop down under “Stories.” There is more space in the Stories > Reviews dropdown. Weird. Can you help?

[RupokMember]

Hi There,

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!

[hwressniggParticipant]

Thank you this works! One more question. How can I manipulate the size of the sub- drop down menus so that the black doesn’t cover the main menu items when hovered over? Better yet, in what code line can I just turn off the hover while inspecting the element with FireFox so that I can easily figure out what CSS I’d like to manipulate myself?

Appreciate the help thank you.

[Paul RModerator]

Hi,

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

[hwressniggParticipant]

Sorry if I wasn’t clear, the issue I’m having can be seen in the following screenshot:

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.

[RupokMember]

Hi There,

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!

[hwressniggParticipant]

The sub menu still obstructs the view of the items under Stories when hovered over…

[RupokMember]

Hi There,

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!

[hwressniggParticipant]

Thank you, this is starting to work! A few more questions: How can I center the text in the sub menu rather than it being left aligned? Also, gray lines have all of a sudden appeared above the main menu items. I’d like to get rid of these.

[RupokMember]

Hi There,

1. To center the text, you can try –

.masthead-inline .x-navbar .desktop .sub-menu .sub-menu .sub-menu a {
  text-align: center;
}

2. I think grey lines (border top) was always there. However to get rid of that, add –

.desktop .x-nav .x-megamenu > .sub-menu > li > a {
  border-top: none;
}

Hope this helps.

Cheers!

[hwressniggParticipant]

Oops! I meant to request that the text remain left aligned but centered in the sub menu. How do I do that? You have been a lot of help thank you so much!

[FriechModerator]

Hi There,

The sub-menus are already centered on my end, please clarify and clear your browser’s cache before previewing the page.

Thanks!

[hwressniggParticipant]

Yes, you’re absolutely right, the text is centered. However, I completely misspoke when I asked you the original question (which is totally my fault). What I meant to ask is, how can I center the left-aligned text within the sub menu? NOT how can I center the text in the sub menu? In other words, I don’t want centered aligned-text, I want left-aligned text to be centered in the menu. Sorry for the confusion and I hope this helps.

[Author]

Posts