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?
 
Pekka M

Posted: 9/21/2012 Quote message   

I have sent this bug to support before this new release, but it seems that they have not fixed it...
 
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.
 
mightec

Posted: 10/7/2012 Quote message   

The way that I overcame this problem was to add a Shape to the header into which I add either some text or an image. When you reduce the size of the browser or view on a smartphone the contents of the Shape is shown in the centre of the header. There is a background to the shape, but this can be removed by adding some additional css to the responsive.css file
 
PurpleEdge

Posted: 10/8/2012 Quote message   

Hard code the logo in header.php

http://www.customengineering.com.au

 
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 ;-)
 
richard

Posted: 10/12/2012 Quote message   

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


It's not actually a bug. It's an misguided attempt to reduce the mobile users' overload of info but fails in that all the resources are downloaded anyway. The thinking appears to be that a complex header with multiple images and shapes will become a bugger's muddle when you try to make it display on a narrow browser. As I've said elsewhere, you can edit your css to change the behaviour if you wish.

re menus.
You could easily prevent the flip to vertical but you need to really think about your interface design if you wish mobile users to have a decent experience. Someone was asking "what if I have hundreds of pages? My sub menus won't show.." If you are in that position you need to reconsider whether a responsive theme is the right solution and consider maybe using a switcher to switch to either a mobile sub-site with a limited sub-set of key pages...or a theme designed specifically for mobile with drop down list style menu. One size does not fit all...
 
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 PurpleEdge,

Sorry, I should have told you that I use Wordpress.

This is from my header:

<header class= "clearfix art-header<?php echo (theme_get_option('theme_header_clickable') ? ' clickable' : ''); ?>"><?php do_action('tt_header_top'); ?> <?php get_sidebar('header'); ?>

So I would REPLACE all the italicized code with your code, or would I ADD your html (using my paths, of course), after <header class= " , keeping all the code that's there.
???

I tried a few things and the screen went white on reload every time :)

Thanks...
 
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
 
Renny

Posted: 10/12/2012 Quote message   

Oh! I see why!

Your menu is under the header and mine isn't. :-(

Renny
 
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.
 
Michael

Posted: 12/11/2012 Quote message   

Is it possible to completely disable the mobile view editing the CSS?
 
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.
 
  Page 1 of 2 Next Last 


Artisteer is not affiliated with or endorsed by Joomla!™ or Drupal™ or WordPress™ Projects.

Other services from Artisteer Team: stock photos, WordPress themes and Joomla templates. Createer and more are coming soon.

Copyright © 2008-2014 by Artisteer, Ltd