Debut Theme: change the font color of Mobile Site menus

Solved
Highlighted
Tourist
15 0 0

Hey All,

I'm having issues with the mobile site navigation bar. I used coding to only change the navigation text to white but for some reason, the 'shop' text wont change to white like the others. Does any one know the code to make it white like the other two? 

 

 mobile site not all white.png

0 Likes
Highlighted

Hello ,

Please share your site url.

So that i can check and let you know the exact solution here.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
15 0 0

My site is not live yet, so is there an alternative for you to check?

0 Likes

This is an accepted solution.

@WizTee_20,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

button.btn--link.js-toggle-submenu.mobile-nav__link.mobile-nav__link--active {
    color: #fff;
}

 

 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
15 0 0

@oscprofessional wrote:

@WizTee_20,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

button.btn--link.js-toggle-submenu.mobile-nav__link.mobile-nav__link--active {
    color: #fff;
}

 

Ifmy solution works then please like and accept the solution 


Perfect, Thankyou for your help!!:) 

0 Likes
Highlighted
Tourist
15 0 0

Sorry I have just realised there is also another problem with the mobile site version.

I have added a slideshow on the homepage, and I have this problem - will add a picture to show you. 

 

mobile slideshow.png

Behind the slideshow bar, there seems to be a white box that i cannot get rid off. I want to match it to my PC version website page so it looks like this:

website slideshow.png

Does that make sense?

0 Likes
Highlighted

@WizTee_20,

add below css

.slideshow__text-wrap--mobile .slideshow__arrows {
    background-color: rgba(0,0,0,0.5);
    padding: 0;
    height: 36px;
}
.slideshow__text-wrap--mobile .slideshow__arrows .slick-dots li button::before,.slideshow__text-wrap--mobile .slideshow__arrows .slick-dots li a::before {
    color: rgba(255,255,255,0.5);
}
.slideshow__text-wrap--mobile .slideshow__arrows .slick-dots li.slick-active-mobile button::before,.slideshow__text-wrap--mobile .slideshow__arrows .slick-dots li.slick-active-mobile a::before {
    color: #fff;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
15 0 0

Thanks for the codes but now its just a grey block as a background its not transparent like the main website and it looks too big which takes up some of the images?

0 Likes
Highlighted

This is an accepted solution.

@WizTee_20,

add below css also

.slideshow__text-wrap.slideshow__text-wrap--mobile {
    background-color: transparent;
    max-width: 200px;
    margin: 0 auto;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
15 0 0

Thankyou for providing the codes and for your help - it worked! :) 


@oscprofessional wrote:

@WizTee_20,

add below css also

.slideshow__text-wrap.slideshow__text-wrap--mobile {
    background-color: transparent;
    max-width: 200px;
    margin: 0 auto;
}

 

0 Likes