Jump to content

Prevent navigation stacking in two lines

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://carlotta-notaro.squarespace.com/

Hello! My site is https://carlotta-notaro.squarespace.com/   Password: mollystupida

My navigation stacks into two lines on smaller screens:

128654874_navlinksstacked.thumb.jpg.3e61e14b954337cd31aea95c5063626e.jpg

So I used a code from the kind @tuanphan  to un-stack it:

.header-title-nav-wrapper {
  flex: 1 0 85% !important;
  flex-wrap: nowrap !important;
}
.header-nav {
  width: 100% !important;
  flex: 1 1 100% !important;
}

 

It puts my navigation links in one nice line, but now the links aren't horizontally centered:

473047308_navlinksunstackedbutnotcentered.thumb.jpg.8e81f4dbe014b5ce51b7af900cd54aa8.jpg

 

I would like to horizontally re-center my navigation links like this:

728600211_mygoal.thumb.jpg.c292edaa6de7b2fc7224c8e6217ef977.jpg

Do you have any CSS code snippets to re-center my navigation links horizontally, in the middle of the header?

Thanks in advance! 🙂

 

Link to comment
  • 6 months later...
On 9/2/2021 at 11:58 PM, KristenRuthSmith said:

When I put this code in it un-centers the entire nav. How can I fix that?

Screen Shot 2021-09-02 at 9.57.25 AM.png

Screen Shot 2021-09-02 at 9.57.34 AM.png

Hi,

Can you share your site url?

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
  • 5 months later...

Hello, I am finishing a website, and I am having a similar problem. Below 1500px my menu is on 2 lines.

Do you have a code to avoid this problem? Maybe we should go from a computer menu to a phone menu when viewing the site below 1500px what do you think?

Thank you for your help, attached the screenshots,

the website link: https://elenadellutri.squarespace.com/
password: 5636

Capture d’écran 2022-02-08 à 18.36.43.png

Capture d’écran 2022-02-08 à 18.36.56.png

Capture d’écran 2022-02-08 à 18.37.12.png

Link to comment
On 2/9/2022 at 12:41 AM, Prismaze said:

Hello, I am finishing a website, and I am having a similar problem. Below 1500px my menu is on 2 lines.

Do you have a code to avoid this problem? Maybe we should go from a computer menu to a phone menu when viewing the site below 1500px what do you think?

Thank you for your help, attached the screenshots,

the website link: https://elenadellutri.squarespace.com/
password: 5636

Capture d’écran 2022-02-08 à 18.36.43.png

Capture d’écran 2022-02-08 à 18.36.56.png

Capture d’écran 2022-02-08 à 18.37.12.png

You can consider changing to Burger Menu in specific screen sizes with custom CSS

What do you think? 

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.