Header too small for logo, increase size of header. Logo must stay at same size.

AndyPham7 · December 2014

What would be the CSS code to edit the height of the header/menu? I need the logo to stay the same size on desktop view.

[Links visible only for registered users]

Using classic header and insurance demo. I tried searching but search results kept giving me people wanting to resize logo.

#top_bar?

Albert · December 2014

Hey,

to do that, you can play with below css:

#Top_bar .menu > li { padding: 30px 0; }
#Top_bar .menu > li a:after { display: none; }
#Top_bar #logo { height: 100px; }

Insoft_Consulting · December 2014

Hello,

I have the same problem. My logo is currently too small ([Links visible only for registered users]). I have pasted the code you shared in Appearance>BeTheme Options>Layout>Custom CSS. Nothing has changed. I will be gratefull for any help.

Albert · December 2014

Sorry but this won't work for this header. With header fixed it is not possible. If you want to use above cs, you must use different header style.

Insoft_Consulting · December 2014

Thank you for the hint! I have changed the header for "classic", but to make code work I had to add the width parameter:

#Top_bar .menu > li { padding: 10px 0; }
#Top_bar .menu > li a:after { display: none; }
#Top_bar #logo { height: 83px; width: 225px}

There's one more thing. When I scroll down the page, the logo gets vertically compressed. Shoud I add some more lines of code to CSS?

Albert · December 2014

When you scroll down, then sticky header activate and that's why logo gets compressed. It can't be the same size as regular because this will look awful. If you really want, then we can try to increase whole header/logo section while is sticky but we guarantee this will look bad.

AndyPham7 · December 2014

Thank you for the CSS support muffin group, and working on Christmas Eve! Will definitely consider another theme from you guys in the future. Keep it up!

Albert · December 2014

Thanks

P.S. We work everyday day but in special days like "Christmas Eve" we work a little less for obvious reasons.

Insoft_Consulting · January 2015

Hi again! I understand that the logo can be compressed, but can't it be resized proportionally?

Albert · January 2015

@Insoft_Consulting Logo is resizes proportionally because uses scale-with-grid class. So if anything is wrong on your website then we need url to see what you mean.

Insoft_Consulting · January 2015

I have provided the url in the firt post ([Links visible only for registered users]). As you can see, our logo is compressed only vertically.

Albert · January 2015

@Insoft_Consulting As we see logo is resized proportionally but maybe we think about something else so please explain what exactly you mean because as we see everything works fine.

Insoft_Consulting · January 2015

As you can see, the width stays the same, so it is not properly scaled.

Albert · January 2015

We have no idea where you noticed this behavior exactly but we did not noticed anything like that on mac and other computers. We tested different browsers of course. But we remember that we noticed something similar in the past in one case and this has been fixed with one of last updates so we recommend to update theme first as you use old 4.5 version. But if you don't want to update theme, then please have a look at http://forum.muffingroup.com/betheme/discussion/257/logo-gets-squashed-vertically-with-sticky-header-on-retina-macbook-pro where similar problem has been described.

Header too small for logo, increase size of header. Logo must stay at same size.

Comments

This website uses cookies