The site is http://www.healthbenefitsofwater.com and I’m using Ethos with a child.

My problem:

I was able to change the color for the top main navigation, so I made the background blue and the links white. Unfortunately this cause the change in the color for the breadcrumbs links as well – they appear white, so invisible 🙂

I tried different css settings shown below and none worked 🙁

# breadcrumbs a {
color: #0263AA;
}
.v:Breadcrumb a {
color: #0263AA;
}

.x-breadcrumbs .current a {
color: #0263AA;
}

Please help.

Thanks,

Tatiana

Thank you for writing in!

Glad to hear you are making changes by yourself 🙂

The above issue can easily be solved by using the following CSS code instead:

.x-breadcrumb-wrap a, .x-breadcrumbs .delimiter {
   color: #bababa;
}

Hope this helps. 🙂

Thank you.

Unfortunately it doesn’t work 🙁

Take a look at this for example: http://www.healthbenefitsofwater.com/category/drinking-water/why-we-should-be-drinking-water/

Try the following:

#breadcrumbs a, #breadcrumbs .breadcrumb_last {
    color: #0263aa !important;
}

Hope this helps, Cheers!

Thank you 🙂

Now I have another small problem related to the changes I made to the top navigation.

If you go the the same link above and make the window very narrow like for a cellphone, you will see that on rollover, the drop-down menu background becomes white and again the text cannot be seen. Also it looks like the links are changes position somehow… (yes I did change their position for the normal desktop view, but I don’t know how to do this for the phones).

Can you help with this one here, or should I make another post?

Thanks,

Tatiana

Thank you for writing in!

It seems that you have made some CSS changes, that was causing this issue. However it can be fixed by adding the following CSS code in under Custom > CSS in the Customizer:

.x-navbar .x-navbar-inner .x-nav-collapse .sub-menu a:hover {
   color: #1fa1de !important;
}

Hope this helps. 🙂

Thank you.

Sorry for the delay.

It works for the colors, but when the browser window is narrow, the menu looks weird…

It was caused by other css.

Change this

.x-navbar .sub-menu {
font-size: 98%;
position: absolute;
display: none;
float: left;
min-width: 200px;
margin: 0;
padding: 0;
}

Into this :

@media (min-width: 980px) {
.x-navbar .sub-menu {
font-size: 98%;
position: absolute;
display: none;
float: left;
min-width: 200px;
margin: 0;
padding: 0;
}
}

Cheers!

There was no way I could have guessed this… 🙂

Fantastic! Thank you so much!

Now, how can I get rid of that thin white line between the menu and the top banner, please?

About the line, just add this.

.x-logobar, .x-logobar-inner { 
border-bottom : 0 !important;
padding-bottom: 0 !important;
}

Thanks.