Change navigation bar background color

Hi,

I have desperately been trying to change the background color of the navigation bar of my website...

It should look like this: https://www.couldihavethat.com/

The logo should be in the top left corner with no background color.

Thanks everyone for your help

Can you share link to your site?

www.anythingfanny.com

password is: anythingfanny

15 hours ago, AnythingFanny said:

www.anythingfanny.com

password is: anythingfanny

header background or navigation background?

nav.Header-nav.Header-nav--primary {
    background: blue;
}

This code worked for me but how to extend the navigation bar background color to 'full-width' of site instead of being cut off? 

To change your menu's background color, click My Sites > Personalize > Customize. Once the Customizer screen loads, click CSS. Right-click on your navigation menu and choose Inspect. An Inspector panel will appear at the bottom of your screen, where you can view your website's underlying code.

Thanks but I also need help with the actual code itself. Is it the padding that I am increasing on either side? 

On 7/9/2021 at 11:20 AM, earthwindflowermoon said:

This code worked for me but how to extend the navigation bar background color to 'full-width' of site instead of being cut off? 

What is site url? We can check easier

Thanks Tuanphan, have just messaged you with the details. 

On 7/12/2021 at 8:12 AM, earthwindflowermoon said:

Thanks Tuanphan, have just messaged you with the details. 

Add to Design > Custom CSS

/* Fullwidth nav bar color */
.Header-inner.Header-inner--top {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.Header-inner.Header-inner--top [data-nc-container="top-center"] {
    width: 100% !important;
}
nav.Header-nav.Header-nav--primary {
    width: 100%;
}
html, body {
	overflow-x: hidden;
}

This worked perfectly! Many, many thanks!!!!!!!!!! 

Do you want to fix these?

Site URL – https://vedicorganic.squarespace.com/?password=Maharishi

1. (Desktop – Homepage) The amount of text in the block is different, so the block size is not equal, it does not look good.

https://vedicorganic.squarespace.com/?password=Maharishi

2. (All devices – About the mvoa institute) Remove image?

https://vedicorganic.squarespace.com/about-the-mvoa-institute/?password=Maharishi

3. (Mobile – Footer) Mobile is cut into 2 lines.

https://vedicorganic.squarespace.com/home/?password=Maharishi

4. (Mobile – Projects) On Desktop, the text is on the left. On Mobile, text projects is skewed to the right.

https://vedicorganic.squarespace.com/projects/?password=Maharishi

5. (Tablet – Menu) Increase text width?

https://vedicorganic.squarespace.com/?password=Maharishi

6. (Tablet – Projects) Reduce space in footer?

https://vedicorganic.squarespace.com/projects/?password=Maharishi

7. (Tablet – Technologies) Text overlaps

https://vedicorganic.squarespace.com/the-maharishi-transcendental-meditation-sidhi-program/?password=Maharishi

8. (Tablet – Board of directors) Increase text width?

https://vedicorganic.squarespace.com/board-of-directors/?password=Maharishi

Thank you kindly Tuanphan. The site is still very much a work in progress! Can you please assist with how to fix point no. 1: how to align image block if amount of writing is not equal? and also point no. 7: how to avoid this text overlap? Thank you!!

On 7/26/2021 at 11:05 AM, earthwindflowermoon said:

Thank you kindly Tuanphan. The site is still very much a work in progress! Can you please assist with how to fix point no. 1: how to align image block if amount of writing is not equal? and also point no. 7: how to avoid this text overlap? Thank you!!

Add to Design > Custom CSS

/* Home-desktop-equal boxes height */
@media screen and (min-width:992px) {
section#info .image-subtitle {
    min-height: 165px;
}
section#info .image-title {
    min-height: 45px;
}
}
/* h1 overlap */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-606a89c300e3e07f20670a6e h1 {
    font-size: 32px;
}
}

Thanks Tuanphan! The heading 1 reduced size on that particular page. Is there a way to apply this rule for entire site as I have some other pages of overlapping text. Many thanks.

6 hours ago, earthwindflowermoon said:

Thanks Tuanphan! The heading 1 reduced size on that particular page. Is there a way to apply this rule for entire site as I have some other pages of overlapping text. Many thanks.

change this

Quote

div#page-606a89c300e3e07f20670a6e h1

to

Quote

h1

Beautiful! Thank you!!