Editing the logo on Glossy using CSS injector

Most headers will stretch to accommodate the size of the logo. This can look a bit awkward in the glossy theme and the main menu links will stay at the top and create a bunch of space below.

If you have a larger logo, you can use the css injector to force the header to remain small. This means the bottom portion will overhang the header and overlap your slider images.

The css injector is located in the "Public site area". You'll want to add a new rule. Use a title that you'll remember what this css code is for - something like "header" would work.

#header-main-content-inner {

height:83px;

}

#region-featured-slideshow {

top:-20px;

max-height:414px;

}

.main-menu {

margin-top:20px;

}

.logo-img, .site-slogan {

margin-top:-2em;

position:relative;

z-index:100;

}

#region-branding {

margin-bottom:-40px;

}

 

#block-block-11 {

float:right;

}

#block-follow-site {

margin:6px 6px 0 0;

}

@media (max-width: 785px) {

#header-main-content-inner {

padding-bottom:2em;

}}

 

Set it so it only appears on the theme "glossy". Then save the rule, and refresh your site.