Jump to content

Center the DESKTOP navigation in Bedford 7.0

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.cedarbuiltgreenhouses.com/

Tuan, my friend, I know you are out there and will help me yet again.😄

I have switched the site over to the Bedford style but I want the white text "HOME" to "Testimonials" to appear in the center of the page. I would like the contact & About button to stay at the far right. 

I noticed you have tried to tackle this problem before but were unsuccessful. It seems they got displayed as a hamburger:

https://forum.squarespace.com/topic/168758-center-align-logo-with-bedford-70-template/

https://forum.squarespace.com/topic/145081-center-logo-and-navigation-in-bedford/

I believe that the "Site title container Width" has something to do with this. Please see my attached photos where I changed the size.  275 to 150 px. You can see the blue box area at the top changes but the navigation does not snap to the center. 

If possible I would like the Nav Button to stay at the far right. I believe in you Tuan! Thanks for your help always.

Screenshot (25).png

Screenshot (26).png

Link to comment
  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

Hi Tuan,

Do you see the 3 white lines at the top right? The navigation becomes like that if someone is viewing on mobile or a small screen. This is called "hamburgering."  I adjusted the size again. Do you see it?

Please see the attached image. I would like the white text to be centered if possible as outlined in red

Screenshot (28).png

Link to comment
On 12/14/2021 at 6:27 AM, CBGreenhouses said:

Hi Tuan,

Do you see the 3 white lines at the top right? The navigation becomes like that if someone is viewing on mobile or a small screen. This is called "hamburgering."  I adjusted the size again. Do you see it?

Please see the attached image. I would like the white text to be centered if possible as outlined in red

Screenshot (28).png

Try adding this to Design > Custom CSS

nav#mainNavigation {
    text-align: center;
}

image.thumb.png.4660024f9983cebb5333ab67a8dce691.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 12/18/2021 at 1:50 AM, CBGreenhouses said:

Tuan, you've done it again! You genius!

The only other thing... can you get just my Nav Button (the contact&About) to appear on the far right side

PS. I also like lofi hophop

I usually listend it when working.

Remove above code & add this

.collection:last-child {
    margin-left: auto !important;
}
nav#mainNavigation {
    display: flex !important;
    justify-content: center !important;
}
.index.active.homepage {
    margin-left: auto !important;
}

image.thumb.png.e7c2680da26dfd7fa01292d6d462c93c.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 12/21/2021 at 2:09 AM, CBGreenhouses said:

Tuan, slight problem with the code. If you look on any other page on the site with this code on, the navigation is all the way to the left 

https://www.cedarbuiltgreenhouses.com/options

Screenshot (30).png

You want to do on all pages or homepage only?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • Solution
On 12/23/2021 at 1:54 AM, CBGreenhouses said:

All pages please. It doesn't look right pushed off center to the left like this.

Remove above & use this new code

.collection:last-child {
    margin-left: auto !important;
}
nav#mainNavigation {
    display: flex !important;
    justify-content: center !important;
}
.index.homepage {
    margin-left: auto !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.