Submenu distance issue

Support
#1

I have placed some submenus in my dropdown menu items but they end up being about 500px off to the right which means some of the go off the screen. How can I fix this?

Website is dallascameraclub.org
see menu Competition > End of year results archive

#2

Hello @Houston,

Thanks for asking. :slight_smile:

Looks like Mega Menu is being used on the website and it seems to be working fine on my end. However, if you would like to adjust the width, please add following CSS under X > Theme Options > CSS:

.sub-menu { width: 75%; left: 15% !important; }

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#3

So you are not seeing the screen shot attached?

#4

Hi Houston,

To fix it, please add the code below in Theme Options > CSS

.desktop .x-nav .x-megamenu>.sub-menu>li>.sub-menu {
   width:auto;
}

.desktop .sub-menu {
   min-width:250px;
}

Hope that helps

#5

Works great when I put it into the Theme options but no effect when I put it in the child theme. is the a reason why it would not work in the child theme?

#6

Hello Houston,

Thanks for updating the thread.

If Child theme was installed and setup properly then there is reason why CSS code added into Child theme CSS file under Appearance > Editor > style.css. Please also try adding following CSS and see how it goes:

.desktop .x-nav .x-megamenu>.sub-menu>li>.sub-menu {
   width:auto !important;
}

.desktop .sub-menu {
   min-width:250px !important;
}

Please make sure to clear cache and load the website again.

Thanks.

#7

Can you please read your comment again. I do not understand the paragraph. It is not making much sense. You say that there IS REASON why code added to Child CSS but you don’t say why it does not work. Sorry, confused.

#8

Hi Houston,

Sorry for the confusion.

That’s because Theme Options has higher priority than your child theme’s style.css

Adding the code in style.css will not always work as there could be other css code that override it but adding it in Theme Options will assure you that it has priority than all other.

If you have notice, my colleague have added !important to the code which means that ‘the code is important, ignore subsequent rules, and any usual specificity issues, apply this rule!’

Hope that makes sense

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.