Text on last Sub-menu overflows out of the screen

Support
#1

Hi,

On my menu bar, the text of last sub-menu overflows out of the screen. Please see attached.

Thank you

#2

Hi There,

Please try adding this custom CSS under X > Theme Options > CSS:

li#menu-item-2180 .sub-menu {
    left: 50%;
    right: auto;
    margin-left: -100px;
}

Let us know how it goes!

#3

Thank you Thai.

I tried the below CSS for the Stores sub-menu. The css seems to work partially, it is dependent on margin-left: -100px. So if I do -100px if shows a certain number of characters per store and if I decrease it further like -200 then it shows more characters. Is there a way to show the entire store name irrespective of the characters in the store name.

.masthead-stacked .x-navbar .desktop .sub-menu {
left: 50%;
right: auto;
margin-left: -100px;
}

#4

Hi there,

Please add a class to the Stores menu item. You can do this by enabling the CSS option for the menu items when you click on the Screen Options then enable CSS Classes then you should see the CSS Classes option in the menu item.

Assuming that the class you have added for the stores menu item is stores then add this CSS to the Global CSS:

.desktop .stores .sub-menu {
    left: auto;
    right: -80%;
}

Hope this helps.

#5

This sub-menu was added through a code in functions.php.

#6

Hi,

Please replace this code

.masthead-stacked .x-navbar .desktop .sub-menu {
    left: 50%;
    right: auto;
    margin-left: -250px;
}

with this

.masthead-stacked .x-navbar .desktop .sub-menu {
    left: 0;
    right: auto;
}

.masthead-stacked .x-navbar  li#menu-item-2180>.sub-menu {
    left: auto;
    right: 0; 
}

Hope that helps.

#7

Hi Paul,

Sorry, this code did not work. I don’t think it is the sub-menu - 2180. The sub-menu 2180 pertains to Services menu. I am talking about the Stores menu and its drop down sub-menu.

Thank you

#8

Hi again,

Please add the following code instead:

.x-navbar .desktop .x-nav > li:last-child > ul.sub-menu {
    left: auto;
    right: 0;
}

Let us know how this goes!

#9

Thank you Nabeel, that worked.

1 Like
#10