Logo or Image disappears in header when looking in a mobile view


  Page 1 of 2 Next Last 
Author Message
Dude

Posted: 9/21/2012
Quote message 

When you use a mobile or collapse the width of your browser window,how can we make the logo or image in the header not disappear?
I like the responsiveness of 4.0rc but it would be nice to see the logo at the top in mobile view.

How to make this happen?
 
GCG

Posted: 9/24/2012
Quote message 

I have the same problem with the responsive header on mobile devices.

I hope Artisteer team solve it asap.

Anyway, Artisteer 4 and responsive web design its great.

Bye
 
Pam

Posted: 10/6/2012
Quote message 

Any fix on the logo/header not showing on mobile devices?
Would love to see this problem resolved!!!
Thanks.
 
Lee

Posted: 10/11/2012
Quote message 

Any news on this? I was really excited about mobile view, until I lost my header.
 
wilmsoft

Posted: 10/12/2012
Quote message 

No response from Artisteer? Bought the full version but, this product seems unfinished until we can control some of the background code IN artisteer.

I can't really have my logos disappear from headers just because it's in mobile view. Also, drop down menus don't work either, you only see the top level menu, and cant' access the drop down items.
 
mzvitzf

Posted: 10/12/2012
Quote message 

Quote wilmsoft:

No response from Artisteer? Bought the full version but, this product seems unfinished until we can control some of the background code IN artisteer.

I can't really have my logos disappear from headers just because it's in mobile view. Also, drop down menus don't work either, you only see the top level menu, and cant' access the drop down items.

:( Yeah this really need a solution!!!! Its a pretty dire bug!
 
jjved

Posted: 10/12/2012
Quote message 

Quote wilmsoft:

No response from Artisteer? Bought the full version but, this product seems unfinished until we can control some of the background code IN artisteer.

I can't really have my logos disappear from headers just because it's in mobile view. Also, drop down menus don't work either, you only see the top level menu, and cant' access the drop down items.


There is a special option to enable subitems in responsive under the Menu -> Levels -> Options ;-)
 
Renny

Posted: 10/12/2012
Quote message 

@ PurpleEdge, how do you hardcode the logo into the header.php.

@Richard, yes it really is a bug. Artisteer knows that the logo should show on Mobile as well.
 
richard

Posted: 10/12/2012
Quote message 

@renny

We'll have to agree to disagree.

I think Artisteer's mistake is to make the decision to hide the items without providing a config override to the dev within the app...

As I've said before, if you want it to show then edit the css in the responsive css file. If this was important to me I wouldn't be sitting waiting for Artisteer to release a fix...

 
Renny

Posted: 10/12/2012
Quote message 

But you don't have time to tell us how to do that, Richard?


 
PurpleEdge

Posted: 10/12/2012
Quote message 

@Renny - have a look at the source code in the link I posted, you just need to cut and paste it into the same place in whichever file contains your header (It might vary depending on the export option, I used Wordpress) - and change the link to your own image, of course!

 
Renny

Posted: 10/12/2012
Quote message 

PurpleEdge,
I found the sourcecode.
I know where my header.php file is.
But I don't know exactly how to add that html to the php.

Here's the php from my header:
<nav class="art-nav clearfix">
<div class="art-nav-inner">
<?php do_action('tt_nav_before'); ?>
<?php
if ( !theme_get_option('nav_display')){
echo theme_get_menu(array(
'source' => theme_get_option('theme_menu_source'),
'depth' => theme_get_option('theme_menu_depth'),
'menu' => 'primary-menu',
'alt' => theme_get_meta_option($post->ID, 'theme_nav_menu_items'),
'alt_menu' => theme_get_meta_option($post->ID, 'theme_nav_menu_choose'),
'class' => 'art-hmenu'

This is your html:
<header class="clearfix cfm-header">
<div><a href="http://www.customengineering.com.au" target="_self" title="Custom Engineering, MONA VALE"><img width="400" height="150" title="Custom Engineering Mona Vale" src="http://customengineering.com.au/wp-content/uploads/2012/10/cust_logo_400_150.jpg" alt="Custom Engineering Mona Vale" /></a></div>

What do I replace in the php?

Thanks,
Renny
 
PurpleEdge

Posted: 10/12/2012
Quote message 

@Renny - it will depend on where you have stuff in your theme :*)

In my case I added it to the line directly under the line that starts with...

<header class="


That is the start of your "header".

The actual code I used was, for Wordpress,...

<div><a href="<?php echo home_url() ?>" target="_self" title="Custom Engineering, MONA VALE"><img width="400" height="150" title="Custom Engineering Mona Vale" src="http://customengineering.com.au/wp-content/uploads/2012/10/cust_logo_400_150.jpg" alt="Custom Engineering Mona Vale" /></a></div>


Using
href="<?php echo home_url() ?>"
means that the link is created to the home page. I could have done the same for the image link instead of hardcoding it.

hth
 
Renny

Posted: 10/12/2012
Quote message 

Hi Purple Edge,
I got it, and it worked, but it shows the header image UNDER the menu at 320x480. Did you do something to the responsive CSS file too?

Thanks,
R
 
PurpleEdge

Posted: 10/12/2012
Quote message 

Hi Renny, yeah, I found I could move it around a bit to get different results, just don't put it in the div ...

<div class="art-shapes">


...because anything in there gets hidden in the responsive mode!
 
Giuseppe

Posted: 10/17/2012
Quote message 

I have same problem... is not good... wait
 
Giuseppe

Posted: 10/17/2012
Quote message 

Solved: with the new version when you have to be careful EXPORT compatibility for smartphones, turn it off and the site works as before
 
Giuseppe

Posted: 10/17/2012
Quote message 

Hello, the problem of the image on the home page that disappears is resolved by changing the script.js file in the directory of your template. Edit script.js and search for "header.jpg" or the name of your file "header" at this point rem / comment the two lines "header.css (.............". finished :-)
 
Designic

Posted: 10/19/2012
Quote message 

Quote Giuseppe:

Hello, the problem of the image on the home page that disappears is resolved by changing the script.js file in the directory of your template. Edit script.js and search for "header.jpg" or the name of your file "header" at this point rem / comment the two lines "header.css (.............". finished :-)


I didn't get, ok i opened script.js and i found header.jpg

header.css('background-image', "url('images/header.jpg')
header.css('background-position', "center top");

what to do now?
 
Dude

Posted: 10/19/2012
Quote message 

Quote Designic:

Quote Giuseppe:

Hello, the problem of the image on the home page that disappears is resolved by changing the script.js file in the directory of your template. Edit script.js and search for "header.jpg" or the name of your file "header" at this point rem / comment the two lines "header.css (.............". finished :-)


I didn't get, ok i opened script.js and i found header.jpg

header.css('background-image', "url('images/header.jpg')
header.css('background-position', "center top");

what to do now?


I think he means comment those lines out

see this http://www.milonic.com/mfa/2004-January/comment-or-rem-out-lines-of-code.html

To comment lines out just put "//" without quotes before the lines

so
// header.css('background-image', "url('images/header.jpg')
// header.css('background-position', "center top");


I have not tried this yet to unhide the logo but I will try soon.
 
Garry

Posted: 12/12/2012
Quote message 

@ Michael

Not sure I understand your question completely but you can disable the responsive design from export options in Artisteer.
 
Harry

Posted: 12/25/2012
Quote message 

I used a little trick to do this with my logo. I created an image, inserted this in the background and set it centered. Now it's working. Bit shady but who cares as people not going to check how you did it..
 
mightec

Posted: 12/27/2012
Quote message 

Hi

I think that we have all suffered with this problem, I contacted the Artisteer Support and they came back with this solution for me, see their comments below.


Please open your responsive.css file and find the .responsive .art-header class.
Replace it with he following:

.responsive .art-header {
background-color: transparent;
background-image: url("images/object123.png");
background-repeat: no-repeat;
background-size: contain;
height: auto;
margin-left: 1% !important;
margin-right: 1% !important;
min-height: 100px;
min-width: 1%;
width: auto;
}

I will try to explain my method, it seem that when you import an image into the header, an object is created and placed in the images file of the template:

/public_html/mydomain_name/temlates/template_name/images/object123.png

The actual image file name will be something different to this example.

So to make thing easy for myself I created a second image and called it object123.png, I opted for a .png file so that I could have the header background show through. I placed this file in the same directory, what happen now is that my regular header image is displayed on the desktop version and when someone is using a smartphone a the second image is displayed.

This gives me the benefit of customising the desktop and mobile header. In the mobile I add a 'Click-to-Ca;;' image and arranged that if the taps the header their mobile calls the website owner.
 
JeffK

Posted: 12/29/2012
Quote message 

Works on my Google nexus 7 in landscape view but disappears in portrait view.

I am very open to other suggestions
 
BoatingBuddy

Posted: 1/6/2013
Quote message 

Its not exactly rocket science. Why don't they just use what works in bootstrap templates that just resize the logo or carousel slide show. There is not much of a reasonable excuse not to use what works for others. It sure is a big turn off to Artisteer
 
Johnboy

Posted: 1/17/2013
Quote message 

I solved the problem by putting a textblock in the header and reconfigure it to display the logo in responsive/mobile view.
The edited tag for the textblock in style.responsive.css looks like this:

.responsive .art-header .art-shapes .art-textblock
{
padding: 2% !important;
margin: 2% !important;
line-height: normal;
background-image: url(images/object1648787719.png); /* Your logo. High resolution recommended to keep it nice when mobile resolution is high */
display: none;
top: auto;
left: auto;
width: auto;
height: auto;

text-indent: -9999px; /*gets rid of the text in the textblock if there is any*/
width: 80%; /*width of box and logo*/

background-position: center center;
background-size: contain;
background-repeat:no-repeat;
}


I used this instead of putting the logo directly into the background to avoid it being covered by an expanding menu.

~John
 
Jeffk

Posted: 1/18/2013
Quote message 

I have stopped using Artisteer until this issue addressed. Content in top 1,2,3 and user 1,2 is also not being displayed correctly.
 
Garry

Posted: 1/18/2013
Quote message 

In responsive design terminology some elements are removed or rearranged depending on screen resolution of viewer's device. You can try disabling the responsive feature from Export Options in Artisteer if you don't need it.

 
S

Posted: 1/19/2013
Quote message 

Quote :
I created a second image and called it object123.png, I opted for a .png file so that I could have the header background show through. I placed this file in the same directory



Wouldn't doing that overwrite the first file with the same name? If not, how did you get it so it doesn't overwrite it?
 
Cfmweb.nl

Posted: 3/16/2013
Quote message 

The workaround as quoted bij mightec is actually a very decent solution for this problem.

In Artisteer
Instead of using a header background and a seperate header object image. Just create a new header image in the same dimensions of your current header and use that as a header background instead.

Save and export the theme to your website.

In FTP / File browser
Edit the file "style.responsive.css" which is located in your theme folder.
Find the ".responsive .art-header class. " and replace it with he following:

.responsive .art-header {
background-color: transparent;
background-image: url("images/exampleobject123.png");
background-repeat: no-repeat;
background-size: contain;
height: auto;
margin-left: 1% !important;
margin-right: 1% !important;
min-height: 100px;
min-width: 1%;
width: auto;
}

Now go to the "images" folder of your theme and locate the "object(+number).png" files. The .png file with the biggest file-size is the header you want to use.

Copy it's name and paste it in the style.responsive.css file where it says "exampleobject123.png".

Hit save and preview in your browser. If the header is to small you can edit the "min-height: 100px;" tot the actual height of your header image.

Hope this can be of any help to other users.

Regards Chris,

 
  Page 1 of 2 Next Last