Permanent fix: disappearing logo in header (responsive)


Author Message
Gkat

Posted: 4/6/2013
Quote message 

:-D

Y'all can thank me later.

This has been a *huge* issue and many of the fixes offered outright fail.

You know how when you go to resize your page or view your site on mobile, the logo/header image seems to disappear?

Well, I fixed that problem. Permanently.

The issue lies in your regular CSS stylesheet. Open that.

1. Locate the .art-header.
2. Copy those rules.
3. Paste over top of the '.responsive .art-header' set below.
4. Problem solved.
 
Eddy

Posted: 4/7/2013
Quote message 

2: Copy those rules....

Please, wich rules?

Can you write a Step by step for Dummies like me?

Thanks!
 
Greg

Posted: 5/21/2013
Quote message 

I'm with Billyx and Mike. I too have the enlarged header that gets cut off. I'm guessing Arkymedes has a good solution, but not exactly sure of the code.

Arkymedes, if you still read this, can you specify 'exactly' the code in the "style.responsive.css" that I need to edit, and specify 'what' I need to replace it with?

Thanks much!
 
jo

Posted: 6/22/2013
Quote message 

Nothing I tried worked properly for me. So if this helps you guys I am glad!

What I did is split up position 30 (Artisteer always puts this on the top of the header) and in there I have a logo, an ajax search and a menu. Split into three positions my site is now absolutely perfect for mobile devices and very neat too.
 
Mike Jj

Posted: 7/29/2013
Quote message 

Thanks for the fix, great job man! in 4 easy steps my logo is now responsive :-)
 
Picart

Posted: 8/1/2013
Quote message 

Quote Arkymedes:

Modify the following in "style.responsive.css" file:

.responsive .th-header {
background-image: url('images/your-image.jpg');
background-size: contain!important;
}

Don't forget background-size: contain!important; to auto adjust based on width.

How do I do this from within Artisteer? I can't figure out how to find the css. sorry, just an artist with a mission. Thanks for some help!
Pic;)
 
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.


 
Mudstock

Posted: 4/27/2014
Quote message 

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
 
Linda

Posted: 5/7/2014
Quote message 

I do the following:
1. When setting up the template, I use 90% width and min-width to 240. My max width is 990px but you can go higher if you want to display on larger monitors/tvs.
2. Change the header code in index.php to this:
<header class="art-header"><?php echo $view->position('header', 'art-nostyle'); ?>
<div class="art-header-inner">
<div class="logo"><?php echo $view->position('logo', 'art-nostyle'); ?>
</div>
<div class="headerright"><?php echo $view->position('headerright', 'art-nostyle'); ?>
</div>
</div>
</header>
3. in template.css my art-header-inner looks like this:
.art-header-inner
{
position: relative;
min-width: 240px;
max-width: 990px;
width: 90%;
z-index: auto !important;
margin: 0 auto;
}

My logo class is set as:
.logo{
width:50%;
float: left;
padding-top: 10px;
}

Seems to be working for me. http://pharmacyclearinghouse.com/


 
boy sapak

Posted: 6/25/2014
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


BEST ANSWER HEHEHEHEHE TNX MUAHHH

 
John

Posted: 10/2/2014
Quote message 

Tried doing this - not seeming to be working. Added image in w/ the 'image' gui button in header & did it that way. Image is as wide as the whole header.
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


 
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?
 
DC

Posted: 1/29/2015
Quote message 

Tried this http://www.artisteer.com/?p=responsive_header, but didn't work for me.

Went with the CSS fix supplied by @Arkymedes - thanks!

Hopefully, next version will handle this in a more streamlined fashion.

 
TonyD

Posted: 2/13/2015
Quote message 

Just to confirm what Arkymedes found, I found this after I fixed it from validating acceptable code. I added this to the section:

background-image: url('../images/header_mobile.png');
background-position: center top;
background-size: contain !important;

center top assisted with my particular situation.

I have modified 4 of my sites and this works perfectly

Good find Arkymedes and helped me verify some good options as well!

I originally used the inspect element, that tool is so great without using copy/paste etc.
 
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.
 
Wu-Tang

Posted: 3/26/2015
Quote message 

8-) you bloody beauty!! thank you
 
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
 
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
 
Deeoh

Posted: 7/3/2016
Quote message 

Eddy my man! You do not HELP at ALL. Which rules should be copied? Step-by-Step my friend.
 
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.