Dude
|
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
|
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
|
Any fix on the logo/header not showing on mobile devices?
Would love to see this problem resolved!!!
Thanks.
|
|
Lee
|
Any news on this? I was really excited about mobile view, until I lost my header.
|
|
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.
|
|
mzvitzf
|
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
|
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
|
@ 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
|
@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
|
But you don't have time to tell us how to do that, Richard?
|
|
PurpleEdge
|
@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
|
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
|
@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
|
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
|
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
|
I have same problem... is not good... wait
|
|
Giuseppe
|
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
|
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
|
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
|
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
|
@ Michael
Not sure I understand your question completely but you can disable the responsive design from export options in Artisteer.
|
|
Harry
|
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
|
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
|
Works on my Google nexus 7 in landscape view but disappears in portrait view.
I am very open to other suggestions
|
|
BoatingBuddy
|
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
|
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
|
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
|
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
|
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
|
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,
|
|