• Hi guys,
    I am running the suits theme on my blog https://www.oliviaontheriviera.com/
    My header image used to be responsive to mobile devices, ipads etc when the site was hosted on wordpress.com but ever since I moved to www.ads-software.com it no longer is, plus there are white bits on the side.
    Can somebody please explain how to fix the responsiveness and white bits issue and WHERE I should do it exactly? I have created a child them and a style.css file but its not clear for me where one needs to make changes to code once the child theme is created. I’m a beginner!!
    Thank you so much.

Viewing 11 replies - 46 through 56 (of 56 total)
  • Your welcome. Good luck

    Thread Starter oliviaontheriviera

    (@oliviaontheriviera)

    Hi Michael its me again!
    Just noticed that the header image no longer sends to my home page when I click it, nothing happens. How can I change that?
    Thanks a lot,
    Olivia

    Remember the snippit of code we put in your header.php file. Remove it and replace it with the following.

    <div id="headImage">
    <a href="https://www.oliviaontheriviera.com/"><img src="https://www.oliviaontheriviera.com/wp-content/uploads/2014/06/oliviaontheriviera-header-180x12001.jpg" alt="oliviaontheriviera-header-180x1200.jpg" width="1200" height="180" class="alignnone size-full wp-image-26"></a>
    </div>

    The update just adds the “a href” html to make the header a link. You dont need to update your CSS.

    Thread Starter oliviaontheriviera

    (@oliviaontheriviera)

    hi Michael
    thanks for your reply. Just did this it works but the layout is a bit off, any ideas?
    thanks
    Olivia

    It probably has something to do with the the background header image hiding somewhere on your site. Try replacing the the current #headImage rule with the following.

    #headImage {
      display: block;
      float: none;
      margin: 0 auto;
      text-align: center;
      width: 100%;
      background-color: #000;
    }
    Thread Starter oliviaontheriviera

    (@oliviaontheriviera)

    thanks the header image is better now but my menu still looks weird!

    The menu issue is separate from the header. You may want to open a new thread to get some help with that.

    Thread Starter oliviaontheriviera

    (@oliviaontheriviera)

    I’m not sure it’s a separate issue because I did have this same problem when we were working on fixing my header image previously and the menu looked fine once we managed to fix the header. It seems the header image does somehow affect the appearance of my menu…

    Thread Starter oliviaontheriviera

    (@oliviaontheriviera)

    how can I get it back to how it was before (without the clickable header)? I could just add a home button to the menu so people can navigate to my home page. I’ve tried reverting back to the code we had used in header file and stylesheet before adding the clickable link but the layout still looks weird!
    ??

    I test everything in the same theme your using before i send you the code. I even test it on your site using the firebug extension in firefox so i know the code works and doesn’t have any odd side effects.

    Have you enabled any other features or made any other changes? Perhaps adding a search function to the nav bar? It looks like you nav bar is extra tall because there is some kind of invisible search form below all the other links.

    To get the site back the way it was prior to adding the clickable header all you need to do is use the same html and css listed in this thread when we got it looking the way you want. Of course if you have made changes i don’t know about then in that case what worked before may not work now.

    Thread Starter oliviaontheriviera

    (@oliviaontheriviera)

    No I didn’t make any other changes except adding the click-able link to the header and adding a home button to the menu which I’ve deleted in the meantime. The search bar was already there before.So am a bit lost as to what is causing this extra large menu bar

Viewing 11 replies - 46 through 56 (of 56 total)
  • The topic ‘Responsive header not working’ is closed to new replies.