Joomla Templates Club 406,261 posts

[hospitalityguy Friend hospitalityguyJoin date: June 2014Posts: 4Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#199917

Hi,

I can’t post a URL, since I’m still working with the site on localhost.

What I’d like to do, is have the logo removed when the screen size goes below about 510px wide. I tried watching a video about modifying the logo, but it seemed a bit dated.

I have added a custom.css file, wherein I placed code to modify the logo to be slightly larger. Here is what I’ve added:

.logo-image a {
background-image: url(“../images/hss-logo-200×36.png”);
display: block;
padding: 6px 10px 0;
width: 200px;
height: 36px;
}

.t3-mainnav {
background: #fff;
border-bottom: solid 1px #d5d5d5;
height: 50px;
}

I suppose I’d have to add something like display: none; to a class. Thing is, I don’t know which class.

Hope you can help.

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#543237

Hi

You should have in custom.css something like this

@media (max-width: 480px) {
.logo-image a {
display:none;
}
}

[hospitalityguy Friend hospitalityguyJoin date: June 2014Posts: 4Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#543238

Dude, go look in the mirror and give yourself a French kiss. Works beautifully.

Thanks!

1 user says Thank You to hospitalityguy for this useful post

1. pavit

[Author]

Posts