Increase header height + logo size

farbenfromm · March 2015

Hello! Thanks for the great theme

The website I'm working on is here: http://pietaeta.de/pietaeta/vorsorgeprogramm/

Is it possible to increase the overall height of the header (for example 150px) and also increase the size of the logo? I've tried it myself, but I had problems with the navigation getting pushed outside the header (when you scroll and it's sticky). The navigation should always touch the bottom of the header. The sticky top header is perfectly fine.

Can you help me with that?

Thanks a lot!

danielastudillo · March 2015

Please! I have the same problem, wanna change the logo size on the Menu. THANKS!

Albert · March 2015

Hi,

to increase logo height, please use below css guys:

#Top_bar #logo { height: 100px; }

Thanks!

farbenfromm · March 2015

Thanks so much! Though the problem I have with this solution is, that the navigation gets pushed upwards and isn't at the bottom of the header anymore (see my initial link). Is there a way to fix that?

Albert · March 2015

Ok but what exactly you want to do with menu? Align vertically to be the center of header height?

farbenfromm · March 2015

Basically align it at the bottom. When one menu item is active, there's a line underneath it. And I would like to have the menu lower so that this line touches the bottom of the header. I made a screenshot so you can see what I mean: Screenshot

Albert · March 2015

Ohh, ok. So if you want to do something like that, then please use below css:

#Top_bar .menu > li > a { padding: 35px 0; }

farbenfromm · March 2015

Perfect!! This fixed it and now it looks great! Thanks for the awesome support!

Albert · March 2015

You're welcome

michi_w · March 2015

I had the same issue: logo-size. modified the size in css; but...the container is bigger now - only my logo keeps getting cut in half

so only about the height of the logo size from the original css (59px) is visible.

Albert · March 2015

@michi_w What is the url to your website where you got this logo?

michi_w · March 2015

0

Albert · March 2015

@michi_w In your case, below css would be perfect:

#Top_bar #logo { height: 100px; }

michi_w · March 2015

thank you for your suggestion... did not solve the problem

could you look again please?

michi_w · March 2015

http://ww

Albert · March 2015

@michi_w This must be cache on your side because this is how we see your website now http://pasteboard.co/2bYcxQ2N.png

michi_w · March 2015

mhmm. no... this is a different header-layout i was trying.

michi_w · March 2015

transparent header layout looks like the posted link

Albert · March 2015

Ok, we see now. It does not show because you did not pasted this css. We have checked your code and the css we gave you above does not exist so how you want to get it work? BTW If you have transparent header then this will be looking like this on subpages. As the name is "transparent" content goes behind transparent section. If you don't like it, then you should use different header layout on subpages.

michi_w · March 2015

mhmm. i pasted it into style.css of the child-theme and it did change the size of the container.

sorry to keep bothering you - thank you for your help!!

Albert · March 2015

@michi_w No, it's not the place for custom css. Each custom css should be pasted into Theme options > Layout > Custom CSS & JS > Custom CSS section. And you can also paste this css with !important declaration so as below:

#Top_bar #logo { height: 100px !important; }

michi_w · March 2015

thank you!!!! it worked :-) sorry for the delay

Albert · March 2015

You're welcome

danielastudillo · April 2015

@muffingroup Hey guys, thanks a lot for the help, it really work out. But know I have the same problem on the mobile version, i'm using in the css the code below. What code should I use to get the mobile logo with the real dimensions?

THANKS!

#Top_bar #logo { height: 100px !important; }

Albert · April 2015

Unfortunately on mobile you can't display larger logo because around logo on mobile you got some paddings so menu can be visible. If we'll give you css to remove paddings, then menu icon will disappear.

SaschOs · March 2018

Thanks

Increase header height + logo size

Comments