Different headers for mobile and desktop

Posted in: Newspaper
Post count: 161
r1kay
#14053
Jun 6, 2014 at 12:04 pm

Hi,

I want to know if it’s possible to set different header styles for desktop and mobile. I use the full width center logo + menu for desktop, which looks great! But it doesn’t look good on mobile so I would rather use header 1 style (menu + logo on the right) with a different logo. Is this possible?

Post count: 1291
Emil G
#14075
Jun 6, 2014 at 5:02 pm

Hi,

You can change the logo on mobile using css. Use the following css (add it inside the Theme Pane -> Custom CSS): 

/* responsive phone */
@media (max-width: 767px) {   
.td-logo img{
display: none;
}
.td-logo{
background: url('http://demo.tagdiv.com/newspaper/wp-content/uploads/2013/08/logo-top2.png') no-repeat;
position: absolute;
background-size: 130px 60px;
width: 130px;
height: 60px;
z-index: 9999;
right: 5px;
top: -5px;
}
}

Replace the logo url with yours.

Thank you, Emil G.

Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.