How to adjust the height of the logo using classic header

Mattdim805 · December 2014

I'm currently using the classic header for my BeTheme website (www.2ndchanceinsurance.com). I like the location of the logo on the sticky menu when I scroll down the page a bit, but it doesn't match up when the logo is in it's natural state when the page is scrolled to the top.

How can I move the logo up so there is less padding between the top of the page and the top of the logo (so it's identical to the padding you see above the logo when you scroll down the page a bit and bring out the sticky header)?

Below is the current custom CSS I have input into my Muffin Options section - do I need to tweak something here, or add a new line of CSS?

#Top_bar #logo img { max-height: 100%;}

@media only screen and (min-width: 960px) {

#Top_bar #logo img { max-width: 190px;}

}

.page-id-1161 #ecommerce_ready .fancy_heading { text-align: left;}

.page-id-1705 { background: url(http://themes.muffingroup.com/betheme/wp-content/uploads/2014/06/wood-texture.png);}

.page-id-1748 .footer_action, .page-id-1748 .widgets_wrapper { display: none;}

.page-id-1768 #Footer { display: none;}

.page-id-1796 #Footer { background: #292929;}

.page-id-1796 .dark .list_item.lists_2 .list_icon i { color: #fff; }

.header-classic #Top_bar { height: 120px; }

.header-classic #Top_bar #logo img { max-height: 165px; }

#Top_bar #logo {

height: 130px !important;

}

body:not(.home) #Top_bar .logo { position: absolute; z-index: 1; }

Below is an example screenshot showing how it looks now, and how I want it to look.

Albert · December 2014

From which browser you did this screenshot? Because we did not noticed anything similar on our computers.

Mattdim805 · December 2014

I used Google Chrome to take the screenshot of the header.. However, if you look at it right now, the logo will not appear to overlap the gray sub-header. This JUST happened fifteen minutes ago though when I applied your custom CSS, as directed in this other ticket: http://forum.muffingroup.com/betheme/discussion/2311/how-do-i-decrease-the-size-of-the-logo-on-mobile-only#latest.

My goal is to have my logo look like the right side of the above screenshot when looking at it on tablets or desktop, but to be smaller when looking at it on mobile (all the while still overlapping the sub-header, just as it does with on desktop).

Albert · December 2014

In previous topic we gave you properly css and this code is related only with mobile version. But if it does not work as you want, then unfortunately we do not have anything else to recommend.

Mattdim805 · December 2014

I took the CSS you provided me in the other ticket which allowed me to add padding to the logo and it worked perfectly. I changed it from 0px to 2px though to get it exactly where I needed it. Below is what I added to my custom CSS, for anyone else wanting to try to accomplish the same thing:

#Top_bar #logo { padding: 2px; height: 130px !important;

}

Thanks support team! Great job as always.

How to adjust the height of the logo using classic header

Comments