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

Prevent navigation stacking in two lines


CarNot95
Go to solution Solved by tuanphan,

Question

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 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...