Possible to change height of navigation menu with code?

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!

What is your site url? I guess we need to use code in this case

Hi! Sorry, I thought I included that.

It's hungryheartfilms.com

Add to Design > Custom CSS

div.header-nav-item a {
    font-size: 30px !important;
}

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!

Anyone have any ideas?

You mean Navigation items or Navigation bar?

The navigation (menu) bar

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!

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;
}

Hi! I'm trying to make my header nav button the same height as the nav bar. Any tips? I added a pic of what I mean, below.

And this is the site I'm working on: 

website: https://horse-iris-yfhn.squarespace.com/

pw:  website2023

On 5/13/2023 at 3:08 AM, freshlypressed said:

Hi! I'm trying to make my header nav button the same height as the nav bar. Any tips? I added a pic of what I mean, below.

 

And this is the site I'm working on: 

website: https://horse-iris-yfhn.squarespace.com/

pw:  website2023

 

Same height like this red button?

Yes please!

Add to Design > Custom CSS

header#header a.btn {
    height: 144px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.header-announcement-bar-wrapper {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}