How to change the nav-bar background colour in Debut theme?

Highlighted
Tourist
9 1 2

How to change the nav-bar background colour?

I'd love the nav-bar background colour to be a different colour (#e1b882) to the heading (logo) background colour (#9E1F62). Any ideas where or how to do this?

 

Screen Shot 2020-11-17 at 3.29.12 pm.jpg

IMAGE 1: What I currently have.

 

Screen Shot 2020-11-17 at 3.29.12 pm 2.jpg

IMAGE 2: Mockup of how I would like the nav-bar to look..

 

Background information:
I've been able to change the heading (logo) background colour by adding the below code to Assets > theme.css (IMAGE 1)

.site-header__mobile-nav,.site-header{ background-color: #9E1F62;}

And I've also been able to change both the heading (logo) and the nav-bar background to the same colour by adding the below code to theme.css

header.site-header {
background-color: #000000 ;
}
.site-header__mobile-nav {
background-color: #000000 !important;
}
div#shopify-section-header.shopify-section {
background-color: #000000 ;
}

What I'd like is help with the code for just the nav-bar by its self (IMAGE 2).

Thanks for your help
Jo

0 Likes
Highlighted

Hello.....
Please share your store URL .
So that I will 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
9 1 2

Thanks, oscprofessional

The store's not public yet, however, here's the link and password to view:

https://www.brisbaneartistsagency.com
password: BAA20!

0 Likes
Highlighted
ul#SiteNav {
    background: #e1b882;
    padding: 29px;
    margin: 0;
}

Hello
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

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
9 1 2

Thank you so much for the code, oscprofessional - it worked!

Wondering if you could help with two more issues that have come up from changing this.

1) How do we remove the 1 px white line between the gold nav-bar and the 'image with text overlay'? ref image

Screen Shot 2020-11-17 at 6.57.28 pm.png

2) How do I increase the padding at the top of the nav-bar so the nav text is centred vertically? At the moment there is more space below the text as opposed to above the text. I tried adding padding-top: 20px; to the code however it didn't change a thing.

Thanks.
Jo

0 Likes
Highlighted
nav#AccessibleNav {
    border: 0;
}
ul#SiteNav {
    background: #eccda4;
    padding: 30px;
}
.site-nav a {
    line-height: 11px;
}

please update previous code with this code 

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