Navigation Text Colour

Solved
mb2021
Tourist
17 0 5

Hi,

I would like my website to have black text, however, when I change to black through 'Theme Settings' it changes the whole website including my Navigation bar.

I would like to keep my Navigation bar text all white so it shows against the black background whilst having the rest of the website text in black.

How do I do this?

Many thanks. 

Screenshot 2021-04-15 at 13.04.37.png

0 Likes

Hello,
Please share your store URL with password (If Needed), So that I will give you proper solution here !

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
24by7themes
Navigator
354 54 61

Hello @mb2021 ,

Best way is to provide separate color options for header in "Theme settings". It require knowledge of css and liquid knowledge.

Let me know if you want me to do for you.

Expert Shopify Developer hire me
Still not satisfied!!! / are you required any custom development? contact me
Is it good solution? Yes, please Like.
0 Likes
mb2021
Tourist
17 0 5

Hi,

Thank you for your replies.

Our website is www.hurtliqueur.co.uk

 

 

0 Likes

This is an accepted solution.

To change only Navigation bar text colour.
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.css

a.site-nav__link.site-nav__link--main {
    color: pink !important;
}
button.site-nav__link.site-nav__link--main.site-nav__link--button {
    color: pink !important;
}


Change the color as per your choice.
Hope this will work for you.
Thanks....

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
mb2021
Tourist
17 0 5

Hi,

 

That's perfect - that has fixed it. Thank you!

I have another question if you wouldn't mind helping...

Now when I change the whole website to have black text in the 'Theme Settings' I lose the text against these two sections on my homepage. How can I change the background colour and the text colour on these sections please?

 

Screenshot 2021-04-15 at 14.05.22.pngScreenshot 2021-04-15 at 14.05.28.png

 

0 Likes

This is an accepted solution.

Add this css

#shopify-section-feature-columns {
    background-color: #ccc !important;
}
#shopify-section-feature-columns h2 {
    color: blue !important;
}
#shopify-section-feature-columns h3.h4 {
    color: blue !important;
}
#shopify-section-feature-columns p {
    color: blue !important;
}
#shopify-section-feature-columns a.btn.btn--secondary.btn--small {
    color: blue !important;
    border-color: blue !important;
}
#shopify-section-quotes {
    background-color: #ccc !important;
    color: pink !important;
}
#shopify-section-quotes .rte-setting.rte p {
    color: pink !important;
}
If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
mb2021
Tourist
17 0 5

Hi,

Thank you again - I've spent 2 days trying to work this out and you've fixed it for me. Thank you! 

I've just changed the colours and now can't see the dots to scroll through 'Testimonials'. Is there a way to change this so they can be a lighter colour?

 

Screenshot 2021-04-15 at 14.55.45.png

0 Likes
mb2021
Tourist
17 0 5

Hi,

 

I've also lost the 'Search' 'Cart' and 'Navigation drop down' on the Mobile website. How do I make this text white like it is on my Desktop website please?

IMG_8898.jpg

0 Likes

This is an accepted solution.

Add this css

.quotes-wrapper .slick-dots li button::before {
    color: #fff !important;
}
@media only screen and (max-width: 749px){
button.btn--link.site-header__icon.site-header__search-toggle.js-drawer-open-top {
    color: #fff !important;
}
a.site-header__icon.site-header__cart {
    color: #fff;
}
button.btn--link.site-header__icon.site-header__menu.js-mobile-nav-toggle.mobile-nav--open {
    color: #fff;
}
}


If helpful then please like and accept solution

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87