Menu drop down overlapping

Hey,

any idea why the drop down item overlaps with the menu item?
and how can I force the text in menu to be in one line?

thanks

Hello @conte,

Thanks for asking. :slight_smile:

There are multiple licences on your website along with X Theme and Pro Theme. I tried looking at the websites but bunch of them are password protected.

You can try adding following CSS under X > Theme Options > CSS:

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

In case problem is still there then please share website URL for us to take a closer look.

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.

thanks but its sill there. send you a pm with credentials

Hello Conte,

Please post the admin access to your site in a Secure Note instead of sending it directly as a message to a staff:

done.

and maybe you also get my footer to always stay on bottom. thanks

Hi Conte,

The sub indicator overlap the menu text because there is not enough room for the menu items in the header area to be contained in one line as the screen size get smaller.

An option would be to make the menu item text size smaller or to have the menu items break into two lines. You can do that be adding this code to the Element CSS of the navigation inline element:

$el .x-anchor-text-primary {
  font-size: 10px !important;
  word-break: break-all;
}

Feel free to adjust the code above.

thanks. I think the arrow for the drop down shouldnt be able to move under the menu points, right. and it also moves there when there would be enough space left to not too. any other solution?

Hi,

The problem is your menu doesn’t fit on smaller screen width.
It is the same principle applied to filling up a room with furniture – there is only so much that can fit into a given space.
To resolve this, you can reduce spacing on smaller screens to make it fit.

Try adding the code below in Header > CSS

@media(max-width:1450px) {
.my-menu > li > .x-anchor .x-anchor-text-primary {
    letter-spacing: 2px;
}

.my-menu > li > .x-anchor .x-anchor-content {
    padding-left:5px;
    padding-right:5px;
}
}

Hope that helps

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