Docs

[Ann]

Hi Guys,

How can I change the hover color of category pages that I have added to my top navigation bar? If you got to moveu.com and hover over the different menu items at top you’ll see that they have different color, i’d like them all to be them same 🙂

Thanks!!

Ann

[Friech]

Hi Ann,

Thanks for writing in! Look for this blocks on your custom CSS and remove it.

.x-navbar .desktop .x-nav > li.tax-item-53 > a:hover, .x-navbar .desktop .x-nav > li.tax-item-53.x-active > a {
    box-shadow: 0 2px 0 0 #ffffff;
}

.x-navbar .desktop .x-nav > li.tax-item-45 > a:hover, .x-navbar .desktop .x-nav > li.tax-item-45.x-active > a {
    box-shadow: 0 2px 0 0 #ffffff;
}

The first one is for the Blog item and second one is for Exercise library, the red underline is native on x.

Hope it helps, Cheers!

[Ann]

Hmmm… I can’t find that anywhere… This is all I have:

/*Header */
.home .masthead {
position: absolute;
width: 100%;
}
.home .x-navbar {
background-color: transparent;
border: none;
}

.x-navbar .desktop .x-nav>li:first-child>a {
border-left: none !important;
border-right: none !important;
}

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

body .x-navbar {
background-color: #1D212A;
border: none;
}

/*CTA buttons */
.x-btn.cta-btn {
margin: 11.5px 0 0 25px;
display: block;
float: right;
background-color: #4193A6;
color: #ffffff;
border-color: rgba(173, 0, 0, 0.48);
}
.x-btn.cta-btn:hover {
color: #ffffff;
border-color: rgba(173, 0, 0, 0.48);
background-color: rgba(173, 0, 0, 0.48);
}
.x-btn.x-btn {
background-color: #ad0000;
color: #ffffff;
border-color: #ad0000;
}
.x-btn.x-btn:hover {
color: #ffffff;
border-color: rgba(173, 0, 0, 0.48);
background-color: rgba(173, 0, 0, 0.48);
}

.my-video {
background-color: #706F6F !important;
border-color: #706F6F !important;
width: 200px;
opacity: 0.8;
}
.my-video:hover {
background-color: #b7b7b7 !important;
border-color: #b7b7b7 !important;
width: 200px;
}

/* Video Library */
.category-video-library .p-meta {
display: none !important;
}
.single-post .entry-featured {
display: none;
}
.archive .x-post-slider-entry .featured-meta {
display: none;
}
.vimeography-paging img.emoji{
display:none !important;
}
p.comment-form-url {
display: none;
}

/* Footer */
.x-colophon.bottom {
background: #050505;
}
.x-colophon.bottom .x-nav {
display: none;
}

/* Posts */

.single-post .h1, .single-post h1 {
font-size: 180%;
line-height: 35px;
}
.single-post .h2, .single-post h2 {
font-size: 140% !important;
font-weight: 500;
}
.single-post .h3, .single-post h3 {
font-size: 120% !important;
font-weight: 500;
}
.entry-content p {
margin-bottom: 1em;
}
.x-audio.embed > iframe {
background-color: #333333;
padding-top: 1px;
}

/* BBPress */
.bbp-reply-form #bbp_anonymous_website,
.bbp-topic-form #bbp_anonymous_website,
label[for=”bbp_anonymous_website”] {
display: none !important;
}
.avatar-80 {
display: none !important;
}
.option-set .x-index-filters-menu,
.option-set .x-portfolio-filters-menu {
display: block !important;
}

/* Contact Form 7 */
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
opacity: 0.7;
text-shadow: none !important;
}

.x-accordion-toggle {
background-color: #1D212A !important;
}

.x-subscribe-form input[type=”submit”] {
text-shadow: none;
}

[Friech]

Hi There,

We can address the issue with this:

.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: 0 2px 0 0 hsl(0,100%,34%) !important;
}

But this is weird, can we take a look on your Customizer settings?

Thanks.

[Ann]

This reply has been marked as private.

[Christopher]

Hi there,

I couldn’t find the code customizer,cornerstone or child theme. have you ever edited Ethos CSS file? if so, please remove changes.

If you need further assist, provide us with FTP credentials.

Thanks.

[Ann]

This reply has been marked as private.

[Rue Nel]

Hello Ann,

Thanks for updating us in! I am another staff checking on this thread! I carefully investigated this issue and it turns out that the border line colors when you hover a menu item can be set in the categories/tags section. You’ll need to edit a category or tag and change the accent color. Please check out this following screenshots:
http://prntscr.com/df1tci
http://prntscr.com/df1sw8
http://prntscr.com/df1t4b

The screenshots suggests that your site wide links and menu items will have a red color or semi transparent red color when you hover it. And because you have an accent color for each categories, in the your menu will have a white accent color when you hover it.

Hope this explains it.

[Ann]

Oh my god! So had but so easy! I feel bad for taking up your time with this! Thank you so much. It’s all fixed now 🙂

Ann

[Prasant Rai]

We are glad the issue has been resolve. Let us know if you have any other questions. 🙂

[Author]

Posts