Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Prevent navigation stacking in two lines

Go to solution Solved by tuanphan,


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:


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:



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


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 post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

2 answers to this question

Recommended Posts

  • 0

THANK YOU @tuanphan YOU ARE A GENIUS! It works 🙂

Also thanks for (indirectly) helping me many times during my forum visits 🙂 

Happy Lunar New Year!


Link to post

Create an account or sign in to comment

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

  • Create New...