Docs

[blazeys]

Hello.

Eventhough I cleared cache and tried different solutions from forum, it seems like my navbar is fixed on all menu links and no hover effect and site link hover color is making a change. It is same for the navbar links that hover color is not making a change but it is always black. As if site links bar and navbar links are acting like one common link.

Although no problem for the new added pages but not for the home page. (No css edited.)

Thanks.

[Nabeel A]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[blazeys]

This reply has been marked as private.

[Joao]

Hi There,

This is happening because all the pages you have on the navbar are the home page, so technically you are on the four pages at the same time. Once you have the real 4 pages or a One page navigation activated with the IDS on the Menu Custom Links that Wont happen.

You can create the other pages and add to the menu and the problem will stop.

Hope that helps,

Joao

[blazeys]

Thanks for the reply. I have fixed the issue.

Just a quick question about navbar;

How can I have the hover effect that is on https://www.themepunch.com/ navbar?

Thanks.

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.x-navbar .desktop .x-nav > li > a:after {
    position: absolute;
    left: 20px;
    bottom: 0px;
    width: 0;
    height: 3px;
    background: #000;
    content: "";
    -webkit-transition: width 0.2s ease-out;
    -moz-transition: width 0.2s ease-out;
    -o-transition: width 0.2s ease-out;
    -ms-transition: width 0.2s ease-out;
}
.x-navbar .desktop .x-nav > li:hover > a:after{
    width: calc(100% - 40px);
}

Hope it helps 🙂

[blazeys]

Thanks for the help really.

I am also using;

.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none !important;
}

Can this cause a conflict with the code you have given?

Because when I use this code in child theme’s css, it works for chrome but for firefox I have to add it to Global CSS otherwise firefox is still showing the top red navbar.

What is the best thing to do to get rid of the top navbar while having the code you have given?

Thanks.

[John Ezra]

Hi there,

Thanks for updating the thread! In most cases, we would recommend the having your final CSS in your Child Theme’s style.css file. However, in cases like yours, it may be best to put it in the global CSS within the customizer if it works for more browsers there. You will just need to always have a backup of you customizer settings in case something goes wrong during an update.

It won’t hurt to have them in both settings, it won’t really be that much bloat and the difference in performance is not visible unless you have tons (like pages and pages of repeated CSS). If you have a conflict with one browser and you need to repeat a few snippets, it shouldn’t be an issue. You can always keep that part of the CSS in the customizer only as an option as well.

Hope this helps clarify – thanks!

[Author]

Posts