Sub Menu Items Style

Support
#1

When I have a sub menu the default style is very difficult and confusing. See image for what I mean.

Can you guess even where this dropped down from?
This is from BLOG where both selecting BLOG or Create New is valid. Is this a bad practice… Should the primary menu item be nothing and have the 2 choices in the sub menu?

#2

Hi there,

The problem is caused by a custom CSS code you added to the website. Here is the section which causes the submenu go up and over the main level menu:

You need to double check your customization. Thank you.

#3

This must be one of the plugins causing this since I have no customization with the exception of what I just added for background opacity. I will look into this further. Should I add some custom css to force the proper styling?

#4

Hi There,

That’s default style from the theme.

Please add this custom CSS under X > Theme Options > CSS to override it:

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

Hope it helps :slight_smile:

#5

I am not seeing this do anything. changed the do as high as 2000 to notice exactly what should be going on.
Also what is the CSS to change the height and width of the dropdown box What is defaulting is at least 2 times wider than it needs to be. What changes the background color of the box which is currently defaulted in white.

I placed this at the location… Customize… Additional CSS … This is where I placed the opacity code which works great.

.entry-wrap {
background-color: rgba(132, 128, 128, 0.4);
}

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

#6

Hi There,

All the custom CSS should be added under X > Theme Options > CSS.

If you want to put it under Additional CSS, please try with this code:

.x-navbar .desktop .x-nav > li ul {
    top: 60px !important;
}

Let us know how it goes!

#7

Yes that works thanks. Do you know the attribute names that change the width and background color of the dropdown?

I would like to compliment the entire X support team. I have worked in the IT industry (not doing HTML/CSS) for 30 years and your support is definitely in the top 1% of all the companies I have dealt with.

#8

Thank you for your kind words. :slight_smile:

Please try this:

.x-navbar .desktop .sub-menu {
    width: 220px;
    background-color: #ccc;
}

Hope this helps.

#9

background color works perfect (the more important item)
width did not function.

#10

Hi There,

Please try with this CSS instead:

.x-navbar .desktop .sub-menu {
    width: 220px !important;
    min-width: auto !important;
    background-color: #ccc;
}

Please note that all the custom CSS should be added under X > Theme Options > CSS.

Regards!

#11

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