Michael Hanes
|
I discovered an easy fix for this problem where the logo disappears in the header. I did not have luck with embedding the logo into the header image because in my case the logo was positioned on the far right. Anyhow I realized that the headline and or slogan elements seem to work without a hitch when resized to a mobile platform. So why fight it and just work with what works!
The solution is to have your background image and the separate graphic for logo can simply have a css display property of none when resized. The other fix is to utilize the headline text and or slogan text but them have a css display of none when in normal size but when resized they get shown. Finally you can put an alternate small logo just to the left of the headline text. This can all be accomplished by adding the following code into the css section under options. You will need to tweak as you see fit with your own logo image and image size.
.art-headline {
display: none;
}
.responsive .art-headline {
padding-left:10px;
}
.responsive .art-shapes {
background-image: url('../../../images/mini_logo.png');
background-repeat: no-repeat;
background-size: 66px;
}
|
| |
Tayo
|
I am having thesame problem, my logo and drop down menu disappered on reponsive template. Can someone pls help. This is the website http://teamworkintegratedsolutions.com
|
| |
Mary H
|
Thanks guys! found my answer here just had to dig a while.
"Responsive view" was a new term to me...
|
| |
Ilker Ulfer
|
1- template.responsive.css file open
2- find under codes
.responsive .art-header #art-flash-area,
.responsive .art-header .art-shapes>*
{
display: none;
}
3- Chance display: none; to display: compact;
4- is done :))
|
| |
Antonina
Artisteer Team
|
Hello,
This article concerns handling header images in responsive modes, it may be helpful for you:
http://www.artisteer.com/?p=responsive_header
|
| |
Chris
|
I have problems with the header and slider in responsive mode artisteer version 4.3 . The header logo does not appear and the slider images are not resized
|
| |
Jaime Gómez
|
Easy solution.
Open the file style.responsive.css
Locate the line .responsive art-header and there add background properties. (Background image. Here we will put our logo background), we add properties size and background color.
Example:
.responsive .art-header
{
width: auto !important;
max-width: none !important;
min-height: 100px !important;
min-width: 0 !important;
margin-right: 1% !important;
margin-left: 1% !important;
background-color:#004a8b !important;
background-image:url(images/yourelogo.png) !important;
background-size:245px;
text-align: center;
}
Save, and ready.
|
| |
Robb Delaney
|
2016 SOLUTION
If you are having problems with the logo disappearing when you are viewing your webpage through your cell phone, it is because you have to have two separate images on your header, the problem is, as of Arister 4.3 they do not allow you to change visibility of the Image. You have to make the logo our of a controls imagelink box.
--------------------> Controls>Imagelink
1) Once you select this... it will ask you for a picture.. I will assume you are using a png or jpg.
2) It will then ask you for the address.. go ahead and add your website, select the target as _Self and leave the screen tip blank.
3) After you create the image, you can resize it smaller.
---------------------------------------------------------------------------------------------------------------
Add one Imagelink for the fullsize logo. after you select the logo image and everything looks correct. Go ahead and add a second one.. Identical to it.
Position the logo where you need it to be on the header and move on to the next one.
Now that you have TWO imagelinks, resize the second one you created. make it smaller, something like 275 pixles and place it over the other logo so that they overlap.
On the bigger imagelink, right click and turn off visibility for the Cell Phone responsive views.
On the SMALLER imagelink, right click it and turn off visivility for everything BUT the Phone Responsive views.
You will now have, Clickable, non-disappearing logos!!!
DelaneyInteractive
|
| |
Robb Delaney
|
2016 SOLUTION FOR DISAPPEARING LOGOS
If you are having problems with the logo disappearing when you are viewing your webpage through your cell phone, it is because you have to have two separate images on your header, the problem is, as of Arister 4.3 they do not allow you to change visibility of the Image. You have to make the logo our of a controls imagelink box.
--------------------> Controls>Imagelink
1) Once you select this... it will ask you for a picture.. I will assume you are using a png or jpg.
2) It will then ask you for the address.. go ahead and add your website, select the target as _Self and leave the screen tip blank.
3) After you create the image, you can resize it smaller.
---------------------------------------------------------------------------------------------------------------
Add one Imagelink for the fullsize logo. after you select the logo image and everything looks correct. Go ahead and add a second one.. Identical to it.
Position the logo where you need it to be on the header and move on to the next one.
Now that you have TWO imagelinks, resize the second one you created. make it smaller, something like 275 pixles and place it over the other logo so that they overlap.
On the bigger imagelink, right click and turn off visibility for the Cell Phone responsive views.
On the SMALLER imagelink, right click it and turn off visivility for everything BUT the Phone Responsive views.
You will now have, Clickable, non-disappearing logos!!!
DelaneyInteractive
|
| |