Permanent fix: disappearing logo in header (responsive)


  Page 1 of 2 Next Last 
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!
 
Billyx

Posted: 4/8/2013
Quote message 

This has helped me a lot but have a question.

I get to see my header now on mobile but it only shows a portion of it.
The original size is 960x125.
In mobile view it shows a small part, in landscape(turn phone sidesways) you see more.

Is it suppsse to adjust to the width?
If we arnt using a full size header image are we using just a logo? If so, what size are you guys setting it up at?

Im trying to get the full size header to fully adjust showing all of it.
 
Monty

Posted: 5/9/2013
Quote message 

Eureka!
 
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!
 
Jimmy

Posted: 5/24/2013
Quote message 

4.2 should have this natively
 
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.
 
Elaine

Posted: 7/22/2013
Quote message 

None of these fixes worked for me either.
I watched this video as well... but it is still not working.
http://www.youtube.com/watch?v=7zsHCXT8Bmc
 
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

 
Kimberly

Posted: 8/2/2013
Quote message 

Hey all,
I am new here and new to Artisteer and have been having problems with headers too. I was able to fix my header problem by changing width to 100% and height to auto.

I also had issues with images and collages not resizing with the page in responsive mode. The images would overlap the column on the right when screen size was reduced. This was fixed by setting the page size to px instead of % in sheet options panel. I was amazed at how many little bugs like that were fixed by do that. Responsive works beautifully, including the page itself when its size is in px. Weird - go figure. This doesn't work for the header though. I still had to change the header code as mentioned above.
Hope this helps
Kimberly
 
Green Lantern

Posted: 8/18/2013
Quote message 

Here's a quick and dirty way to get your Artisteer header images to automatically resize. I discovered this by accident, and it might help those who don't want to do any CSS editing.

Step 1: Create your header and images as usual in Artisteer.
Step 2: Right click your header and select "New Slide > Duplicate".

That's it. For whatever reason, doing a header slideshow causes the header to resize (on several sites I tested it on at least), even though the single slide does not resize. So we're just creating a false, 2 slide, slideshow of a single header so it resizes.

Optional Step 3: Click "Motion > Options" and set the speed and delay to very fast, like 100ms and 1s respectively. And set Repeat to No. This just reduces any redraw effect, so the header does't appear to load more than once.

Optional Step 4: Click "Navigator > Bullets" and set the Fill to transparent, along with the active, passive and hovered bullets. This effectively hides the little slideshow navigation bar.

Enjoy! :)
 
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?
 
Eileen
Artisteer Team

Posted: 10/22/2014
Quote message 

@DACOG:
please contact Artisteer support at http://www.artisteer.com/?p=support and provide more detailed description of the issue.
 
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.
 
Hans G Petallo

Posted: 3/20/2015
Quote message 

Sad to say...I tried every solution on this issue mentioned in this thread...but nothing worked. Could anyone tell me if this issue is fixed in the newest version of Artisteer??

Thanks in advance

Hans
 
Wu-Tang

Posted: 3/26/2015
Quote message 

8-) you bloody beauty!! thank you
 
A Friend

Posted: 10/21/2015
Quote message 

THIS IS HOW I SOLVED THE PROBLEM. FIND:

.responsive .art-header .art-shapes>*
{
display: none;
}

NOW, REPLACE display: none; FOR

.responsive .art-header .art-shapes>*
{
background-image: url('images/your-IMAGE-responsive.png');
background-position: center top;
background-size: auto;
}

DON'T FORGET TO UPLOAD THE IMAGE IN IT RESPECTIVE FOLDER. IF THE HEADER LOOKS TOO BIG (TALL) FOR THE IMAGE, YOU CAN RESIZE IT BY CHANGING THE VALUES AT:

.responsive .art-header
{
width: auto;
height: 125px; <--------------- HERE!
min-height: 100px;
background-position: center center !important;
background-size: cover !important;
background-repeat: repeat !important;
}

ENJOY!!!
 
  Page 1 of 2 Next Last