• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Appfinite

Appfinite

Premium WordPress Themes for The Genesis Framework

  • Themes
  • Blog
  • Tutorials and Resources
  • Forums
  • Contact Us

Responsive header

Home › Community Forums › Epik Theme Support › Responsive header

  • This topic has 6 replies, 4 voices, and was last updated 9 years, 3 months ago by mindyi.
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.
Log In

Primary Sidebar

Search Forums

Affiliate Program

Looking to earn some money? Join our Affiliate program and earn 35% of every sale you refer. Top referrers earn 40-50%.

Join Now →

The Genesis Framework

All of our themes are designed for the Genesis Framework. You will need to purchase Genesis in order to use any of our themes.

Purchase Genesis

Hire a Web Developer

Need help setting up or customizing your website?

Contact Us →

Search Full Site

  • Buy Genesis!
  • Shopping Cart
  • Themes
  • My Account
  • Support Forums
  • Tutorials and Resources
  • Privacy Policy
  • Contact Us
  • Follow Us on Twitter

Copyright © 2023 · Appfinite · Built With The Genesis Framework