Logo issues when window is resized – responsive function

[livemesh]

Some are having trouble with the logo when the logo image is a little wider than the theme expects (not your mistake) and I will get the theme fixed soon to handle such situations. Meanwhile, you can paste the below code into Custom CSS panel in theme options and see if this helps –

#header-logo { width: auto; }
#sticky-site-title { width: 350px; /* pls change to your logo image  width */}

/* Make the menu slide down and manage menu item highlighting when the screen size decreases */
@media only screen and (min-width: 768px) and (max-width: 959px) {

#primary-menu > ul.menu > li:hover, #primary-menu > ul.menu > li.sfHover { background-color: transparent; }

#primary-menu > ul.menu > li.current-menu-ancestor, #primary-menu > ul.menu > li.current-menu-item { border-bottom: 4px solid #46A5D5;
border-top: none; }

#primary-menu { position: relative; float: right;}
#header-logo { position: relative; }

}

@media only screen and (max-width: 479px) {
	background-size: 220px auto; /* Make the logo smaller in lower resolutions - pls increase or descrease the size to suit your logo image dimensions */
}

Though it looks otherwise, there is not much happening here except managing the logo when the screen size gets smaller. It’s a little more involved than usual since highlighting of the menu items is involved. No worries, the next update should take care of these issues and some of the above code will go into theme framework for everyone and the rest will go into theme options. Thanks!

[Author]

Posts