Appfinite

Premium WordPress Themes for The Genesis Framework

Responsive header

Home › Community Forums › Epik Theme Support › Responsive header

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • October 16, 2013 at 5:49 pm #8202
    dreamingspires
    Customer

    Hi guys
    the header I have gets cropped when I open a blog post to read- fine when the site is full width. I have uploaded Genesis responsive header plug in but it doesn’t seem to work.
    I am not sure how to edit code (where to find it) so am a novice in that regard.

    the site is: http://www.bodyinmind.org/
    Thanks in advance
    heidi

    October 16, 2013 at 10:26 pm #8213
    Wes
    Moderator

    You’ll have to experiment a couple different ways since you’re using a wide logo. You can try adding background-size: contain !important; to your #header (around line 2803 in the blue section or wherever you want) and that would sort of resize it when you adjust your browser. Give that a try first.

    I would recommend using a smaller version of the logo when accessed by a mobile device/browser because the logo you have will probably be too small to see.

    If you haven’t already, check out this tutorial – http://www.carriedils.com/add-logo-genesis-theme/ it just covers some of the basics (you may already know this).

    October 17, 2013 at 7:37 pm #8235
    dreamingspires
    Customer

    Thanks Wes – will give it a go. I am by no means a coder so will see if I can figure out putting the code in (and hope I don’t mess up the site!)
    I’ll also check out the tutorial, I’ve really struggled with headers so I suspect I’ll learn something.

    October 17, 2013 at 7:45 pm #8236
    dreamingspires
    Customer

    Hi Wes, no idea if this is right. I went to the CSS part of the site and added the code under the header section so it looks like this now:
    #header {
    color: #aaa;
    margin: 0 auto;
    overflow: hidden;
    padding: 5px 0;
    padding: 0.3125rem 0;
    max-width: 1152px;
    background-size: contain !important;
    }
    I wasn’t sure what you meant by: “around line 2803 in the blue section” – my css doesn’t have numbering like that (or I’m in the wrong part)

    I don’t think it’s worked, which might mean I have done it wrong.

    October 18, 2013 at 12:36 pm #8262
    Wes
    Moderator

    Try adding this to your css – 

    .epik-blue #header {
	background-size: contain !important;
}

    You would see line number if you were using a CSS editor, if you’re using the default WP editor, then the line numbers won’t show up.

    October 21, 2013 at 8:17 am #8370
    Ingenea
    Customer

    Wes,

    .epik-blue .site-header {
    background-size: contain !important;
    }

    is the one that worked for me.

    November 1, 2013 at 5:26 pm #8605
    mindyi
    Customer

    If I use Ingenea’s code it works if using a color (changed it to gray to try it out and used .epik-gray .site-header…) I am using the default color and if I only put .site-header… then it does not work. Is there another class I should be using? Thanks.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.