Permanent fix: disappearing logo in header (responsive)


Author Message
Picart

Posted: 8/1/2013
Quote message 

My css reads like this:

.art-header
{
-webkit-box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.25);
box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.25);
margin:0 auto;
height: 150px;
background-image: url('images/object234298832.png'), url('images/header.jpg');
background-position: 124px 27px, 0 0;
background-repeat: no-repeat;
position: relative;
width: 900px;
z-index: auto !important;
}

.responsive .art-header
{
background-image: url('images/header.jpg');
background-position: center center;
}

When I paste in the suggested script:
.responsive .th-header {

background-image: url('images/your-image.jpg');

background-size: contain!important;

}

My header doesn't resize. Not only does the logo disappear in small view but the block disappeared too. So I'm wondering what else needs changing. Any ideas much appreciated.

Pic

 
1HourWebsitePro

Posted: 8/24/2013
Quote message 

Here is how I solved the problem.

1) locate responsive.css
2) Locate "@media (min-width: 480px) and (max-width: 767px)" and "@media (max-width: 479px)"
3) Using class ".art-shapes" add background image.
4) Upload smaller image if needed.

Resulting in:

#art-resp-phone-landscape { display: block; }
.art-shapes{
background:url('IMAGE URL HERE') no-repeat;
top:-20px;
}
}

@media (max-width: 479px)
{
.art-shapes{
background:url('MAGE URL HERE') no-repeat;
top:-20px;
}


Hope this Helps!
 
Loconz

Posted: 9/10/2013
Quote message 

I took a different approach to responsive headers

Since its all about the small screen I decided to make two headers.
the first header is the normal header to see on the big screen so I used the import image for that so it will disappear.
Then I loaded a Mini header as a background image so it would show when on smartphones.
Seems to work and although both are similar here, you can see the difference. www.webestate.co.nz

From a business point of view a complicated header can be simplified for smartphone users.

 
Gobl3t

Posted: 10/4/2013
Quote message 

@Loconz
That idea seems great :-), so how did you made a mini version of your heather?
 
Bryan

Posted: 4/24/2014
Quote message 

I still go with this one below.... the reason is that on a full sized page I can have detailed logo with phone numbers...whatever.... but when it gets down to a smartphone, people generally don't want to see detailed headers but a simple logo version helps remind then where they are. Make sure the background logo is covered by the main banner.


Quote Loconz:

I took a different approach to responsive headers

Since its all about the small screen I decided to make two headers.
the first header is the normal header to see on the big screen so I used the import image for that so it will disappear.
Then I loaded a Mini header as a background image so it would show when on smartphones.
Seems to work and although both are similar here, you can see the difference. www.webestate.co.nz

From a business point of view a complicated header can be simplified for smartphone users.


 
Adam

Posted: 10/5/2014
Quote message 

YOU GUYS ROCK!! Thank you!!
 
DACOG

Posted: 10/20/2014
Quote message 

My Artisteer made web sliders are corrupt. Please help.

has anyone an idea how to overcome Artisteer - Joomla made template banner from getting corrupt when edited?
 
ppeperko

Posted: 3/15/2015
Quote message 

The trick is much more simple:
- open your template.css
- look for the following (line 379 according to my template, yours maybe diferent):
.default-responsive .object932826031

{
display: none;
}

- change display: none; into display: block;
- save and if your page is opened, refresh it.
 
Stefan

Posted: 3/21/2016
Quote message 

Quote Mudstock:

I found a better fix yet. Use controls and image url to place your logo. It will always stay no matter what the device screen size. Not a header sized image of course. Just the logo. example. http://www.seethebottom.com
Logo will always show. and it is done in WYSIWYG .

This is basically because the image url is basically a button that needs to show. Just do not add a link. the # works just fine to keep you where you are.

Try it. Works for me!!!
-Mudstock



This and a little tweak, and it's perfect. I also add in the sidebar-header.php ( for WP ) width="100%" for the image. Inside the <img , not the divs. And now it's perfect. Cheers
 
Romana

Posted: 3/22/2016
Quote message 

Artisteer itself has the perfect answer!

http://www.artisteer.com/?p=responsive_header
 
Bravic

Posted: 3/23/2016
Quote message 

How do I get the header responsive ?

This is my Hompage: www.druckstore-grzi.de

Thanks
 
Cassandra Saunders

Posted: 8/9/2016
Quote message 

Quote boy sapak:

Quote Mudstock:

I found a better fix yet. Use controls and image url to place your logo. It will always stay no matter what the device screen size. Not a header sized image of course. Just the logo. example. http://www.seethebottom.com
Logo will always show. and it is done in WYSIWYG .

This is basically because the image url is basically a button that needs to show. Just do not add a link. the # works just fine to keep you where you are.

Try it. Works for me!!!
-Mudstock


BEST ANSWER HEHEHEHEHE TNX MUAHHH



Where is the image URL and which controls do we use?
 
Christie Smith

Posted: 8/23/2016
Quote message 

:(
God, I am so mad. I have been trying this for two days and the stupid Artisteer instructions of visible / not visible DO. NOT. WORK. My client is being a big pain about this (probably rightfully so), and I am in the hole $-wise at this point. WTH Artisteer??? why must this be so.dang.hard????
 
Alan Marcel

Posted: 5/13/2017
Quote message 

This tip saved me, but I added another background image (smaller than normal one).

Quote ppeperko:

The trick is much more simple:
- open your template.css
- look for the following (line 379 according to my template, yours maybe diferent):
.default-responsive .object932826031

{
display: none;
background-image: url('../images/object1477052162-responsive.png'); --> SMALLER IMAGE
}

- change display: none; into display: block;
- save and if your page is opened, refresh it.