Jump to content

Aligning Navigation Items to Middle

Recommended Posts

Hi Squarespace Family,

I have run into an issue with my second Navigation bar (in English) and would greatly appreciate if someone in the community could please assist.

Here is my first navigation bar (in German) which is perfectly aligned. See first picture. This is what I am wanting my English Nav bar to look like as well.

My second nav bar (in English) is not quite aligned. See second pic.

Part of the reason is that in my second Nav Bar, I made the last Nav item 'Get Started' into a button and applied a certain padding that looks consistent with the button in the German Nav Bar. This padding causes the button to be aligned nicely but pushes all other Nav items to the top. Here is the code I used for the Get Started nav item.

.header-nav-list .header-nav-item:last-child a {
    border-radius: 30px;
      font-family: 'bold';
  font-size: 10pt;
      color: #FBF7F4;
    border-color: #566965;
    background: #566965;
    border-width: 2px;
    border-style: solid;
    display: inline-block;
    padding: 0.7rem 1.9rem;}

If anyone could please help me align the remaining Nav items, I would be so thankful.

 

Many thanks,

Carl

 

 

 

 

 

Screenshot 2023-08-22 at 10.04.59.png

Screenshot 2023-08-22 at 10.06.20.png

Link to comment
  • Replies 5
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Can you share your website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Hi Ziggy, 

it is still not yet published so not sure I can share this with you.

I know that when I remove the padding from the Get Started button that the text is all perfectly aligned in the middle so I believe I have to try shift the remaining Nav items down while leaving the Get Started unmoved.

Thanks for your help! 

Link to comment
2 minutes ago, CP1 said:

it is still not yet published so not sure I can share this with you.

You'll need to add a password:

https://squarefortytwo.com/squarespace-guides/add-a-site-wide-password-to-your-squarespace-website

How are you managing the English vs German text in the navigation?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Hi Ziggy,

I have split the navigation into 2 by simply hiding the English nav items from the German Nav Header and vice versa. See picture.

The formula I used to hide the non-relevant items depending on if they were German or English pages was the following:

#collection-AAA,

#collection-BBB,

#collection-etc,

{
#header .header-nav-item:nth-child(1){
display:none;}
#header .header-nav-item:nth-child(2){
display:none;}
#header .header-nav-item:nth-child(3 etc){
display:none;}

 

All of this works perfectly. It is only when I make the last header nav item as a 'Get Started' button and add padding that it makes the rest of the items out of line. As per the CSS code shared in the first msg above.

Thanks!

Screenshot 2023-08-22 at 12.59.53.png

Link to comment
4 minutes ago, CP1 said:

All of this works perfectly. It is only when I make the last header nav item as a 'Get Started' button and add padding that it makes the rest of the items out of line.

That's a good method.

I need to be able to see and inspect the website header to be able to help you fix it. Can you share your website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.