Jump to content

Possible to change height of navigation menu with code?

Go to solution Solved by tuanphan,

Recommended Posts

Hi!

Does anyone know if it's possible to change the height of just the text in the navigation menu without it affecting the padding or margins of other elements?

I want to move the navigation text slightly lower on my homepage and then a little higher up on all other pages to be at the same height as the homepage. It's probably obvious, but I used code to remove the logo on the homepage.

Thanks!

 

Link to comment
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

Hi there, thanks for the reply, but this code is for the font size, not the height of the navigation. I'm trying to make the navigation height the same on the homepage and the rest of my pages. The rest of the pages have a hidden logo but Squarespace is still treating the navigation height on those pages as if there is a logo there. I'm also trying to change the navigation text height without it affecting the margins below the text. I don't want things pushed down or up when the navigation text changes height. Thanks for any help you can provide!

Link to comment
  • Solution
On 12/30/2022 at 3:03 PM, briansquarespace said:

The navigation (menu) bar

Change this CSS code

body.homepage header#header img {
    display: none;
}

to this

body.homepage header#header img {
    visibility: hidden;
}

Both codes can hide the logo. But your code will remove the space that the logo takes up. The code I sent just hides the logo, and leaves that space intact.

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Amazing, thanks so much!!

Now that the logo is hidden and the space is intact and the same height on all pages, is there a way to adjust the padding or positioning of the navigation menu without affecting the size of the logo? I would love if the navigation menu could up slightly higher on all pages without it affecting the section content below it. I tried adjusting the vertical padding for the header but the minimum is 1vw, so the menu cannot go higher than what it is. The only other way to affect the menu is to make the logo smaller which isn't an option.

Thanks for any help you can provide, and thanks again for solving the first step!

Link to comment
On 1/4/2023 at 1:15 PM, briansquarespace said:

Amazing, thanks so much!!

Now that the logo is hidden and the space is intact and the same height on all pages, is there a way to adjust the padding or positioning of the navigation menu without affecting the size of the logo? I would love if the navigation menu could up slightly higher on all pages without it affecting the section content below it. I tried adjusting the vertical padding for the header but the minimum is 1vw, so the menu cannot go higher than what it is. The only other way to affect the menu is to make the logo smaller which isn't an option.

Thanks for any help you can provide, and thanks again for solving the first step!

Use this CSS

.header-title-nav-wrapper {
    align-items: flex-start;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.