Tagged: header css, logo css, secondary logo
-
AuthorPosts
-
December 9, 2016 at 1:39 am #722281
Hello,
I have a secondary logo which appears when the browser or screen size is smaller than 1200px. I would like to apply some styling to this logo only, which would be similar to this:
#header_meta {z-index: 1;}
#header_main {z-index: 3;}
strong.logo {top: -55px; height: 120px !important; width: auto;}
h1.main-title {padding-left: 250px;}I had copied the above css from another forum, and it was working on the logo before. But now the client wants the full logo to appear first on full screen view, and then change to the overhang icon logo with smaller screen sizes (before button menu and after)
The goal is to have that logo overhang the header bar by about 10px.This is the current custom css I pieced together from other forums:
.logo img {
height: auto;
max-width: 280px;
}.header-scrolled .logo img { opacity: 0; }
.header-scrolled .logo a {
background-image: url(http://www.coastalblissdayspa.com/wp-content/uploads/HeaderLogo_1.png);
background-size: contain;
background-repeat: no-repeat;
}@media only screen and (max-width: 1385px) and (min-width: 990px) {
.container { width: 96%; }}@media only screen and (max-width: 1200px) {
.logo img { opacity: 0; }
.logo a { background-image: url(http://www.coastalblissdayspa.com/wp-content/uploads/HeaderLogo_1.png);
background-repeat: no-repeat;
background-size: contain;
}}Any help is appreciated! Thanks!
December 12, 2016 at 2:20 pm #723118Hey L3anne!
Thank you for contacting us!
It seems like URL field is empty in your code – http://i.imgur.com/sR0poi5.png
Can you please elaborate on the changes you would like to make. We might be able to provide you an alternative solution. Adding your secondary logo as subtext – http://kriesi.at/documentation/enfold/add-subtext-to-logo-replace-logo-with-site-title/ and displaying/hiding it on certain screensize or when scrolled down would be a better solution in my opinion.
Cheers!
Yigit -
AuthorPosts
- You must be logged in to reply to this topic.