Jump to content

Trying to center a navigation item

Go to solution Solved by BYWJ,

Recommended Posts

Posted

I am trying to center 1 navigation item in particular. I know I'll have to use code, but I have no experience creating code.
I don't want to change how I have the order of the navigation items set up (nav items, logo, social icons, etc). Only the search icon in particular.
The navigation item in particular is the search icon. I want it to be centered (in the green circle, not centered as in next to my logo).

Screenshot2024-05-09190857.thumb.png.b77d144cb1f34ad93924db56bc9eb4d1.png

I appreciate any help!

Thanks,
Julie

  • Replies 7
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Posted

I added the code and this is what it looks like
Screenshot2024-05-12at12_10_00PM.thumb.png.c411b07ca1c8463fa1ba41c617ee1977.png

I had to change this part of the code:

nav.header-nav-list>div:nth-child(7) {

To this:

nav.header-nav-list>div:nth-child(6) {

Because I combined a navigation item into a folder (Coaching > Lifestyle folder), and 7 didnt exist anymore.

All it needs right now is to be moved to the next line, any idea on how to do that?

 

Thanks,
Julie

  • Solution
Posted

For anyone wondering I used this code to fix it
 

nav.header-nav-list > div:nth-child(6) {
  /* Remove absolute positioning and transformation */
  width: 100%;           /* Make it occupy the full width of the new row */
  text-align: center;   /* Center the item horizontally */
  margin-top: 2px;     /* Add some spacing above the new row (adjust as needed) */
}

(Change "6" with whatever number your navigation item is. For example, if you have 3 navigation items "Shop, Contact, About" and you're trying to move "About" you'd change the 6 in the code to 3, since its the 3rd navigation item)

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.