Jump to content

Trying to center a navigation item

Recommended Posts

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

Link to comment
  • Replies 6
  • Views 212
  • Created
  • Last Reply

Top Posters In This Topic

You can try this to Website > Website Tools > Custom CSS

nav.header-nav-list {
    position: relative;
    justify-content: space-between;
}

nav.header-nav-list>div:nth-child(7) {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

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.