Adjust width of mobile menu

how do i adjust the width of my mobile menu so that the dropdown arrows for the sub links don’t overlap with the navigation labels. see pic below.

Hello Carlos,

Thanks for writing in!

You are having this issue because you have added this custom CSS.

.x-navbar .mobile .x-nav {
    float: right;
}

Kindly go to X > Theme Options > Custom CSS and remove the CSS code above to get your issue resolved.

If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

that worked! but i was using that code to try to “right align” the menu items.

is there any way to right align the navigation labels so they are right next to the dropdown arrows? right now they are too far away. see pic below:

Hello Carlos,

Do you mean you like to position the menu item texts to the right?

You will have to modify the text alignment of the menu item and set enough right padding. By default, the menu item is using this built-in CSS in the stack styles.

.x-navbar .x-nav-wrap.mobile .x-nav li a {
    text-align: left;
    padding-right: 0;
}

Setting the alignment to the left and enough right padding will allow you to accomplish what you need. Therefore, the code can be this:

.x-navbar .x-nav-wrap.mobile .x-nav li a {
    text-align: right;
    padding-right: 35px;
}

Feel free to make adjustment as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

yes, that’s exactly what i was looking for! thank you so much!

You are most welcome!

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