Docs

[theoutdoorarmory]

Issue is in here: https://theoutdoorarmory.com/

As seen on the uploaded capture, my site hover link colors are set to red. But when I hover (try it from your side as well), the links are still black. How do I change that?

Thanks

[Rupok]

Hi there,

Thanks for writing in! It seems you have multiple conflicting CSS on your customizer for this :

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > li > a:hover span, .x-navbar .desktop .x-nav > li:hover > a, .x-navbar .desktop .x-nav > li:hover > a span, .x-navbar .desktop .x-nav > li:hover .sub-menu, .x-navbar .desktop .x-nav > li:hover .sub-menu a, .x-navbar .desktop .x-nav > li:hover .sub-menu a span {
  background: #ffffff none repeat scroll 0 0 !important;
  color: #000000 !important;
}

.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, .x-navbar .desktop .sub-menu a:hover, .x-navbar .desktop .sub-menu .x-active > a, .x-navbar .desktop .sub-menu .current-menu-item > a, .x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a, .x-navbar .mobile .x-nav li > a:hover, .x-navbar .mobile .x-nav .x-active > a, .x-navbar .mobile .x-nav .current-menu-item > a {
  color: #272727;
}

Kindly remove those to get expected result. When you add any custom code to your site, make sure you know what you are doing to avoid potential conflicts.

Hope this makes sense.

Cheers!

[theoutdoorarmory]

Hi,

I can’t find this code on my CSS:

.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, .x-navbar .desktop .sub-menu a:hover, .x-navbar .desktop .sub-menu .x-active > a, .x-navbar .desktop .sub-menu .current-menu-item > a, .x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a, .x-navbar .mobile .x-nav li > a:hover, .x-navbar .mobile .x-nav .x-active > a, .x-navbar .mobile .x-nav .current-menu-item > a {
color: #272727;
}

Is it OK if I give you my login credentials instead? Please.

Thanks

[theoutdoorarmory]

Oh no 🙁

When I erased this code:

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > li > a:hover span, .x-navbar .desktop .x-nav > li:hover > a, .x-navbar .desktop .x-nav > li:hover > a span, .x-navbar .desktop .x-nav > li:hover .sub-menu, .x-navbar .desktop .x-nav > li:hover .sub-menu a, .x-navbar .desktop .x-nav > li:hover .sub-menu a span {
background: #ffffff none repeat scroll 0 0 !important;
color: #000000 !important;
}

My sub menu hovers became black. I want it to be white whereas the font to be black.

Are we on the same page here?

What I want is basically my LINK hovers (ie when I hover over “Add your event for free” on the home page) should be RED. That’s it.

[Christopher]

Hi there,

Please remove that code and add this one to your customizer :

.x-navbar .desktop .sub-menu a:hover {
    background-color: #fff;
    color: red;
}
.x-navbar .desktop .sub-menu a {
    color: #fff;
}

Hope it helps.

[theoutdoorarmory]

Hi Christopher,

Let me clarify it again:

Menu
Background color: white
Font: black

Sub-Menus
Background color: white
Font: black

Sub-Menu Hovers
Font: red

Right now the sub-menu background is black while font is white. I want it the other way around.

Hope this is clear.

Thanks in advance.

Dave

[Joao]

Hi Dave,

use this code instead. When it comes to styling your colors you can either use hexidecimal codes like #ffffff or you can write the color name like I did below.

.x-navbar .desktop .sub-menu a:hover {
    background-color: white;
    color: black;
}
.x-navbar .desktop .sub-menu a {
    color: red;
}

Hope that helps,

Joao

[theoutdoorarmory]

Hi Joao,

Thanks for that. I’m now OK with the changes.

Last thing: How do I remove the black border on the .sub-menu hover?

You could check the screen cap for reference.

Thanks
Dave

[Rue Nel]

Hello There,

Thanks for the updates! To remove the black border in the sub menu, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site .masthead-inline .x-navbar .desktop .sub-menu {
    border: none;
    box-shadow: none;
}

Hope this helps.

[theoutdoorarmory]

Hi Rue Nel,

Thank you so much!

One last question:

How come in this link: https://theoutdoorarmory.com/ and towards the bottom part (seen on the screen shot), when I hover the links the text doesn’t turn into red.

Compare it when you hover over “Return and Exchange Policies” …

I also attached screen cap of how the text box of the left-most column is coded in Cornerstone

Please help.

Thanks

[Rue Nel]

Hello There,

It doesn’t turn red because you have added an inline css that make the color #666769. If you want that when you hover over it, it will turn red, please update your content and use this instead:

<span style="color: #666769;"><strong>SHOP</strong></span><br />
<span style="color: #666769;"><a href="https://theoutdoorarmory.com/payment-shipping-policies/">Payment and Shipping Policies</a></span><br />
<span style="color: #666769;"><a href="https://theoutdoorarmory.com/return-exchange-policies/">Return and Exchange Policies</a></span><br />
<span style="color: #666769;"><a href="http://www.fastrack.ph/track/" target="_blank">Track Your Package</a></span>

Hope this helps.

[theoutdoorarmory]

Hi Rue Nuel,

When I did that, the font-color of the text became black.

I want the font-color of the text to be: #666769 and then turns red when hover.

As you can see now at https://theoutdoorarmory.com/ the font text under “THE OUTDOOR ARMORY” and “SHOP” are different.

Please help.

Thanks

[Paul R]

Hi,

Kindly change the code to this.

<span style="color: #666769;"><strong>SHOP</strong></span><br />
<span><a class="my-link" href="https://theoutdoorarmory.com/payment-shipping-policies/">Payment and Shipping Policies</a></span><br />
<span><a class="my-link" href="https://theoutdoorarmory.com/return-exchange-policies/">Return and Exchange Policies</a></span><br />
<span><a class="my-link" href="http://www.fastrack.ph/track/" target="_blank">Track Your Package</a></span>

Then add this in custom css in the customizer

a.my-link {
   color:#666769 !important; 
}

a.my-link:hover {
   color:red !important; 
}

Hope that helps.

[theoutdoorarmory]

Wooohoo thank you so much!

Thanks to all X theme support!

I love you guys!

Much love from Manila, Philippines!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts