How to Remove Underline in Main Menu

Hi there,

I wanted to remove the underline from my Main Menu and I entered this code in Custom CSS, which worked:

.x-navbar .desktop .x-nav > li > a:hover > span, .x-navbar .desktop .x-nav > li.x-active > a > span, .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
box-shadow: none;

However because I use a reference # for Portfolio Menu Option and Contact Menu Option, they are already in their Hover color. Is there a way to keep them in the Blue/Green color until a mouse actually hovers over the menu option?

Thank you as always.

Hello There,

Thanks for writing in! This issue happened because you have used a custom link in the homepage. Please go to Appearance > menus and duplicate “Museum Landing Page Menu”. The href of the “Portfolio” and “Contact” should only be “#portfolio” and “#contact”. After that, please edit your homepage and assign the newly created menu as your one page navigation menu. To know more about one page navigation, please check this out:

Once the one page navigation is properly set up, the hover color of your menu should be resolve.

Please let us know how it goes.

Hi RueNel

Thank you for your reply.

I made a new menu with the changes to the HREF and placed it as a One Page Navigation on the home page. I placed the original menu with the full HREF on all other pages. And it worked AOK for all other pages, except on my blog page, which I refer to as the Resource Center.

Can you please see if I did something wrong?

Thank you so much in advance again for your help as always.

Hello There,

The Resource Center active/hover color is not included in the settings. To resolve this, please add the following CSS code in the X > Theme Options > Global CSS (

.x-navbar .desktop .x-nav > .current_page_parent > a, 
.x-navbar .desktop .sub-menu li.current_page_parent > a, 
.x-navbar .mobile .x-nav li.current_page_parent > a {
    color: #e6dec9;

We would loved to know if this has work for you. Thank you.

Hi RueNel

Thank you for your reply.

I realize I was not clear in my reply. The color change works fine on the Resource Center page but the actual link navigation to the # pages does not.

Here’s what happens: If you to to Resource Center (blog) and then click on Portfolio or Contact, an extra word “blog” is inserted in the URL before the HREF. For #portfolio (it translates the link to and so it never finds that page. The same behavior occurs on Resource Center when you click on Contact. It attempts to navigate to, which doesn’t exist.

What’s strange is that I am using this menu: Museum Not Landing Page Menu 3 for all pages except the Home page. So, the menu Museum Not Landing Page Menu 3 works for all those pages except for the blog page (Resource Center).when I need to go to a Portfolio or Contact.

Thank you again for your help in advance.

Hi @WestsideVirtual

The main problem here is that “One Page Navigation” will not work on the blog page, because WordPress will take over this page and none of the custom settings will work on that page, WordPress will show the “Primary Menu” even if you chose any other option in the theme page settings.

The workaround to this issue is to do the opposite of what you are doing right now, I mean, “museum-landing-page-menu” will always be displayed on the “blog” page, so modify the links to work fine on that menu for the “blog” page. Then set “museum-not-landing-page-menu-3” menu for all other pages and modify the links to work fine on them.

This should work fine.


Thank you, that worked - I got the correct colors in the Menu for the Home Page and got the Blog page to correctly reference the HREFs on the Home Page. So far, the other pages seems to be working correctly. Thank you Alaa and RueNel for your help, I appreciate it!

1 Like

You are most welcome. :slight_smile:

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