Help changing nav bar size & colour in Shopify Debut theme

OakN4wines
New Member
4 0 0

Hi there,

I am setting up my shop https://oakn4wines.myshopify.com/ and would like to change the colour of the nav bar to be a dark grey, and would like to change the border size so the drop down menu doesn't break over 2 lines. I think this has to be done in the CSS rather than the theme settings, but I've looked for both! Can anyone advise please? I'd be super grateful! Thanks

0 Likes
24by7themes
Navigator
320 48 50

@OakN4wines 
Please below line of code in theme.scss

ul#SiteNav, ul#SiteNav button, ul#SiteNav a {
    color: #666;
}

.site-nav__link--active .site-nav__label {
    border-bottom-color: #333;
}

.site-nav__link:focus .site-nav__label, .site-nav__link:not([disabled]):hover .site-nav__label {
    border-bottom-color: #333;
}
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
OakN4wines
New Member
4 0 0

Thanks! I don't want to change the colour of the text, I want to change the background to dark grey. What you suggested changes the font colour.

0 Likes
24by7themes
Navigator
320 48 50

24by7themes_0-1610708342583.png

Like this you want?

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
OakN4wines
New Member
4 0 0

Hi there, I'd like the grey bar to go across the whole length of the screen so behind the logo and text if possible. Thanks!

0 Likes
24by7themes
Navigator
320 48 50

Hi @OakN4wines 
I see your site, I think you did it. Good.

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