Line around Menu Item when menu is shrunk

Support
#1

Hi:

When the menu is condensed (activated from Hamburger) there are white lines above and below each menu item. I can’t figure out how to remove them. Thanks

#2

Thanks, I figured it out —

.x-navbar .x-nav >li>a  {
    border: none !important; 
}
#3

Glad you have figured it out. Thank you for updating us Ravi.

I also want to share here our YOUTUBE CHANNEL. You may want to subscribe to see more video tutorials.

Cheers!

#4

Hi, I want to take the lines away from the submenus as well. I do not know how to do that. Thanks.

#5

Hello Ravi,

Thanks for updating in!

To include the line in your submenus on mobile, please have your code updated and use this code instead:

.x-navbar .x-nav li a  {
    border: none !important; 
}

Best Regards.

#6

Hi RueNel, I have done that already. It takes the border/lines away from around the first level menus. But the next lower level (sub-menus) menus still have the lines. How do I take them away? Thanks.

#7

Hello Ravi,

I do not see that you have applied the code in your site. Keep in mind that there is a big difference between your original code and the updated code.

Original code:

.x-navbar .x-nav >li>a  {
    border: none !important; 
}

Updated code:

.x-navbar .x-nav li a  {
    border: none !important; 
}

The original code will remove the borders of the parent menu items. The updated code will remove the borders of all of the menu and submenu items.

I hope this explains the difference in the code.

#8

I think I messed something up. I changed the code from >li>a to li a and now all the lines are back for the top level menus and submenus as well when you expand from the hamburger.

#9

Hi Ravi,

I suggest that you remove the code that you have added for the hamburger menu section as it has many issues including the border and the fact that it is not centered aligned. Then start from scratch with the original theme menu at hand.

To remove the borders for the hamburger menu items please add the CSS code below to X > theme Options > CSS:

.x-navbar .x-nav-wrap .x-nav > li > a {
    border: none;
}

Thank you.

#10

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