Jump to content

Alignment: How to shift Navigation Bar Items to center, left and right. And, aligning logo baselines

Go to solution Solved by Ziggy,

Recommended Posts

Help! 

I am trying to move some navigation bar items to the middle of the navigation bar, and keep one item aligned to the right. Currently my page has all navigation items left justified. See here:
I've been trying to input css code and nothing is working. I attached a screenshot of what I want the navigation bar to look like.

I also want to align the baseline of the logo with the baseline of the navigation links.

 

Thank you kindly,
2Eyeballs

Screen Shot 2023-08-25 at 11.25.18 AM.png

Edited by 2Eyeballs
left out a link
Link to comment
  • Solution

Not sure your website URL is correct, can you check and reshare?

Try this for the vertical alignment:

#topNav {
    vertical-align: bottom !important;
}

This would be a method for adding spacing like the example:

#topNav .main-nav ul li:first-child {
  margin-right:8vw;
}
#topNav .main-nav ul li:last-child {
  margin-left:8vw;
}

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
11 minutes ago, 2Eyeballs said:

And to confirm I am inputting css correctly: I am copy pasting your suggestion directly into custom css. Is this right?

Correct. Sorry for not specifiying!

Edited by Ziggy

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

Have you tried clearing your browser cache?

If you can give me access to your website temporarily I can try and get this to work for you.

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

Oh! I tried your suggestion again and it is working now... You are an angel.

I have another question - what code might I use to make the footer ornamentation touch both ends of the browser window and keep the entire footer flush to the bottom?
 I'd also like to the hero image to touch both ends of the browser window.

Link to comment
7 minutes ago, 2Eyeballs said:

Oh! I tried your suggestion again and it is working now... You are an angel.

Brilliant!

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
9 minutes ago, 2Eyeballs said:

I have another question - what code might I use to make the footer ornamentation touch both ends of the browser window and keep the entire footer flush to the bottom?
 I'd also like to the hero image to touch both ends of the browser window.

Try this Custom CSS for the very bottom one:

@media only screen and (max-width:767px) {
  #block-yui_3_17_2_1_1692797721106_161964 {
    .sqs-block {
      padding-left: 0px !important;
      padding-right: 0px !important;
    }
  }
}

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

Try this tweak:

@media only screen and (max-width:767px) {
  #block-yui_3_17_2_1_1692797721106_161964 {
     padding-left: 0px !important;
     padding-right: 0px !important;
  }
}

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

I also noticed that you have some scripts in the Footer Code Injection that is not correctly wrapped in <script> tags so it is rendering as plain text:

image.png.fe8f4214daec43d51187a909c0f9d5eb.png

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

When I pasted your latest tweak (I pasted it in Custom CSS, below the successful nav bar coding suggested earlier) it broke the nav bar spacing.

Thank you for mentioning the incorrect wrapping. I didn't know why I was seeing that text. 😃

Edited by 2Eyeballs
Link to comment
1 minute ago, 2Eyeballs said:

When I pasted your latest tweak (below the nav bar coding you suggested earlier) it broke the nav bar spacing.

Did you remove anything? That CSS shouldn't have any effect on the header.

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

I tried to put it in again, cleared cache, still not working, still breaks nav bar coding....

Here is all the code I currently have in Custom CSS - 
#collection-5f3c40ae55bbd105c88bb571
{
 header, footer{
  display: none!important;
 }
}


#topNav {
    vertical-align: bottom !important;
}

#topNav .main-nav ul li:first-child {
  margin-right:10vw;
}
#topNav .main-nav ul li:last-child {
  margin-left:10vw;
}
}
@media only screen and (max-width:767px) {
  #block-yui_3_17_2_1_1692797721106_161964 {
     padding-left: 0px !important;
     padding-right: 0px !important;
  }
}

 

In Code Injection, I have the following code: 

Header - 

<style> h1, h2, h3, h4 {-webkit-hyphens: manual !important;-moz-hyphens: manual !important;-ms-hyphens: manual !important; hyphens: manual !important;}
</style>

<style>
#headerWrapper{
  padding-top: 10px; /* Adjust the value as needed */
  padding-bottom: 0px; /* Adjust the value as needed */
}
</style>

Footer-
<script> { <footer{
   padding-left: 0px; 
   padding-right: 0px;
   padding-bottom: 0px;
   padding-top: 0px;
   max-width: 100% !important;
   margin-left: auto;
   margin-right: auto;
}
          </script>

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.