Help needed with the menu CSS

Hi,
I have a problem on two different websites.

  1. On the first website, I’m using GYM demo for a “onepage” website. The menu has 4 elements that are linked to 4 anchors on the same page. The menu shows one of them always with an orange line below. How can I remove this effect?

  2. On the second website, I’m using RENEW demo. In this case the menu has 5 elements: 3 of them are anchor links inside the homepage, and the other two are the blog and the portfolio.
    I have been able to remove all the lines below by the following CSS setting:
    .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 !important;
    }
    The problem is that the texts linked to the anchors are always black when I am on the homepage, and the two texts “Portfolio” and “Blog” are grey and become black only during the mouse hover or when I go on these two pages. How can I show the menu elements always black and with no lines below?

Thanks!

Hello Eliana,

Thanks for asking. :slight_smile:

  1. If you would like to remove the effect on current menu item, please add following CSS under X > Theme Options > CSS:
.x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: none;
}
  1. Please add following CSS under X > Theme Options > CSS:
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    color: #000;
}

.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 !important;
}

Let us know how it goes.

Thanks.

Thanks Prasant!
The first website is okay now, but there is still something wrong on the mobile version because I see some links in grey.

I also still need help with the second website. Now the effect related to the color change has gone, but it keeps showing a line below the links (please see the attached screenshot), and I would like to remove it. Can you help me with this? Thanks!

Hey Eliana,

It looks like you’re using full or absolute URLs like http://example.com/#contact for your One Page Navigation, you will need to use the fragment only like #contact.

I understand that will not work globally so you’ll actually need to setup 2 menus. You’ve already setup the full URL menu which should be your Primary Menu. The other one that you’ll create is the one with fragments or hash only and use that for the specific page that will use it by selecting that menu in the One Page Navigation option of the page.

Once you’ve set that up and the issue persists, please give us WordPress Admin access in a Secure Note so we could check your setup.

Thanks.

Not sure on what I have to do, sorry :frowning:
The 2 menus refer to two different website, probably I was not clear enough sorry :pray:

Hi,

You need to change all your menu urls to just ids.

For example

Then to fix the mobile color issue, you can add this in Theme Options > CSS

.x-navbar .mobile .x-nav li a {
    color: #444444;
}

Hope that helps

I have fixed the first website. But the second doesn’t work in that way, because not all the elements of the menu are on the same page! If I change the anchor as you said, the links don’t work anymore if I am not on the homepage.
These are the links:

HOME
SERVIZI (this is an anchor link inside the home page)
BLOG (this is another page)
PORTFOLIO (this is another page)
CONTATTI (this is an anchor link inside the home page).

I show you the screenshot about the mobile view. You can see that “Blog” and “Portfolio” are different from the other three elements…and I want to make them all black.

Hi,

The css code that I provided was meant to make it black. Please add it in Theme Options > CSS

With regards to the links, you need to create two menus. One for onepage and another one as default.

For One page add only ids.

HOME - https://otbwritinglab.com/
SERVIZI - #servizi-writing
BLOG - https://otbwritinglab.com/blog/
PORTFOLIO - https://otbwritinglab.com/portfolio/
CONTATTI - #contatti

Set this menu as your one page menu

For the default one, add absolute urls

HOME - https://otbwritinglab.com/
SERVIZI - https://otbwritinglab.com/#servizi-writing
BLOG - https://otbwritinglab.com/blog/
PORTFOLIO - https://otbwritinglab.com/portfolio/
CONTATTI - https://otbwritinglab.com/#contatti

Set this menu as primary menu

Hope that helps

Thank you!!!

You’re welcome!

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