Header padding

[Nicole Miller]

Hello,

Is there a way to change the padding on the header? I want the logo to stay the size it is but have
of the header smaller.

Dobersen Residence

Thank you for your help
Nicole

• This topic was modified 5 years, 11 months ago by Nicole Miller.

[Zex]

Hello, Nicole!

If you want to lower the navigation menu, you can add this code into Customize->General->Additional CSS

code:

.sticky-header ul:not(.mobile-menu-icons) {
  
  padding-top: 45px;

}

https://prnt.sc/hqv7uw

Change the padding value per your needs.

Regards

[Nicole Miller]

Thanks I’m not noticing any change. Maybe I am phrasing my question wrong.
Can I change the padding around the Logo?
I want the logo to be the size it is but have less header?

Residential

Thank you for your help

[Nicole Miller]

Hello I’ve noticed this is marked as resolved and while you did give me the code to lower the navigation menu, I was hoping to change the padding around the logo.
I would greatly appreciate your help on this matter.

My client likes having their logo really big when the page opens but then the header is very large and they would like to change this. Is this possible?

Thank you

[Zex]

Hello Nicole!

Sorry for the late answer.

Now I understand what is actually a problem…

Add the code below into General->Additional CSS

code:

@media screen and (min-width: 992px) {
   .pull-left img{
   
    position: fixed;
	}
}

https://prnt.sc/htpivq

Regards

[Nicole Miller]

Hello,
Thank you!
This is almost it, but the header is just a little too small.
This is exactly what we are going for though.

Residential

Thank you so much for your help
Nicole

[Zex]

Hi, Nicole!

You can change the height of the header with the code below:

@media screen and (min-width: 480px) {.site-header,.sticky-header:not(.sticky-header-shrink) {
  height:80px!important;
  }
}

http://prntscr.com/htzotx

Change the height value per your needs.

Regards

[Nicole Miller]

Yes!!! Great thank you for your help!!
Happy New Year

[Nicole Miller]

One small problem.
Now the Header is not transparent on the home page.

[Zex]

Hi, Nicolle!

Sorry, I missed the last post…

Please replace the last code that I gave you in post above, with the code below:

@media screen and (min-width: 480px) {.sticky-header:not(.sticky-header-shrink) {
  height:112px!important;
  }
}

http://prntscr.com/huhq8k

Happy holidays!

[Nicole Miller]

That works.
Thank you!

[MichaDangerHero]

Hello, I hope you don’t mind me dropping my question in here. While searching the forums I found that OP’s website is an example of what I’m trying to do/change:
Residences

When you scroll down just a little, just when the header starts scaling, there’s a jump in the scrolling of the images. As if the first scrolled pixel is a 50px jump, and it’s smooth scrolling afterward.

I have that issue on my website and I’d be super happy to lose that jump in the scrolling. (My site is not yet online, hence using OPs example here)

Thanks!

[Zex]

Hello, MichaDangerHero!

Unfortunately, for now, it’s not possible to quickly resolve this, so we will put it on the to-do list for the next theme update.
In the meantime, you can try using header v1, which works smoothier.

Thank you for your understanding.

Regards

[Author]

Posts