ArtisteerTutorial.com

  • Learn how to create awesome sites with Artisteer!

SOLVED: Artisteer header image disappearing on responsive (WordPress)

If you have a logo in your Artisteer 4 theme header, it will likely disappear on small devices if you’re using a responsive layout for your Artisteer WordPress theme.

This video will show you how to prevent it from disappearing with a quick CSS fix.

15 Responses to SOLVED: Artisteer header image disappearing on responsive (WordPress)

  • Greg says:

    Nice work Zach,

    I am working on a site for a friend I must admit its plain and simple.
    Unfortunately this fix doesn’t want to work for me. any suggestions?

    Cheers

  • corym says:

    I was having trouble with a missing header in another WP theme. Found your video, played around with Firefox and found the display: none hiding in a CSS file, tucked away in another folder.

    Thank you!

  • cas says:

    I tried this and every other i got online but none works for me…
    I ended up saving the same template from artisteer disabled the responsive.
    I think i’ll just use it without responsive for now.

  • CS says:

    Alternative Joomla solution:

    1) Place a header position control (header/controls/position) in the Artisteer header instead of a logo image file (Artisteer version 4.1)
    2) Insert the logo with Joomla module (type “Random Image” or “Custom HTML”) (Joomla version 3.x but earlier versions should be ok)
    3) If additional CSS change in responsive header is needed, you can insert this in Artisteer export CSS options instead of editing the css file else you have to edit the css file each time you install a updated Artisteer template in Joomla.

    Artisteer CSS options example that remove responsive header (including logo):

    .responsive .art-header
    {
    display: none;
    }

  • Luis Daza says:

    hi Zach
    First excuse my English, is google translate .. hehehe. I speak Spanish …
    Second, my template is for joomla, your using wordpress,
    with the solution you pose, now you see the logo, HOWEVER now seen behind a element to search, (seve as backgraund, or the slogan that one places.
    know how to do or what I do so it is not so, ie it is under or before the search

  • KrazyBear says:

    Hey Zach. Thanks! It worked for me. BTW, I’m also using Templateer and sometimes things are odd. Had to remark 3 of 8 lines to get it to stick. But, it worked and I greatly appreciate it!

    Keep me posted on your css course.

  • S says:

    Hmmm, this is curious. I’m sure your solution works great for some, but for me it didn’t. But what did work (in case anyone else wants to try) is to append the following to their responsive stylesheet:

    .responsive .art-header{
    background-image: url(‘http://YOURDOMAIN.com/Theme/wp-content/themes/THEME-NAME/images/IMAGE-FILE-NAME’);
    background-repeat: no-repeat!important;
    background-size: contain!important;
    }

    And this to style.css:

    .art-blockheader .t, .art-vmenublockheader .t {white-space: nowrap;}
    .responsive header.aawd-header {
    background-size: 100% 100% !important;}

    Also, for those who use firefox, there’s a great tool if you have the web developer add on installed, I just discovered this today

    Tools > Web Developer > Responsive Design View.

    Ok. Sorry, didn’t mean to hijack your thread here. Your tip is still amazing. It didn’t work for me (who knows, it probably will on my next theme), but it got me looking in the right direction, so thank you so much!

    • S says:

      Oops, sorry. That would be:

      .art-blockheader .t, .art-vmenublockheader .t {white-space: nowrap;}
      .responsive header.art-header {
      background-size: 100% 100% !important;}

  • S says:

    This still isn’t working for me…
    Does the header image need to be added as a background image, as the actual header or what?

  • Lisa Erez says:

    Zach
    YOU ARE AMAZING!
    I initially thought that your response time on this problem that I posted was pretty slow!!!!! BUT I now understand that you were make a video post showing how to solve the problem for everyone.
    That’s is fantastic.
    BTW – even Artisteer support couldn’t solve this one.

    Thumbs up!!!

    Lisa

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Free Artisteer Video Training Course

Want to learn how to create great websites with Artisteer?

Then you MUST see this training!

It's simple, step-by-step, and will turn you into an Artisteer pro!

Sign up for free below. 

New Graphic

We respect your email privacy

Recent Comments