Jump to content

Change navigation bar background color

Recommended Posts

  • Replies 16
  • Views 5.1k
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 year later...

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.

Link to comment
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? 

Screen Shot 2021-07-09 at 2.15.19 pm.png

What is site url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

vedicorganic.squarespace.com-01-min.png

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

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

vedicorganic.squarespace.com-02-min.png

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

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

vedicorganic.squarespace.com-03-min.png

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

vedicorganic.squarespace.com-04-min.png

5. (Tablet – Menu) Increase text width?

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

vedicorganic.squarespace.com-05-min.png

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

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

vedicorganic.squarespace.com-06-min.png

7. (Tablet – Technologies) Text overlaps

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

vedicorganic.squarespace.com-07-min.png

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

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

vedicorganic.squarespace.com-08-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.