Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • May 20, 2016 at 3:29 pm #635925
    Freek

    Hi. I want to have a header image (in logo area) but my image is not responsive anymore,
    What i did.
    1. website styling – logo area – bg image (image size: 1612×250) – top middle – fixed
    2. header-layout = logo middle, menu beneath
    3. css code for no logo (.logo {display: none};)
    4. Website layout -measurements : 100%

    It looks good on a 24″ screen but not on a small 13″ screen.
    The header image is not responsive.
    What did i do wrong?
    THX Freek

    May 23, 2016 at 5:23 am #636531
    Rikard

    Hi Freek,

    I’m not sure what you mean by that, it looks responsive on my end, did you manage to get it fixed? If not then please try to explain a bit further and/or post screenshots of the issue.

    Thanks,
    Rikard

    May 23, 2016 at 8:46 am #636616
    Freek

    Hi Rikard,

    I moved the test to another URL (see private content). As you can see i made a clean WordPress and Enfold installation with no changes other than the no logo css code.
    In the styling – Logo Area – Background image area, i uploaded an logo image (size: 1612 × 250, fixed, no-repeat).
    The image is too large and is not responsive.
    Hope you know what i mean now.
    THX Freek

    May 23, 2016 at 4:21 pm #636917
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .header_color .header_bg {
    background-size: contain !important;
}

    Best regards,
    Yigit

    May 23, 2016 at 4:31 pm #636923
    Freek

    It looks better now but i changed the header height to 290px, but the menu is still shown through the tekst. How can i change the header background size? THX Freek

    May 24, 2016 at 3:22 pm #637519
    Yigit

    Hi,

    Can you please try using your logo instead? I see that you have removed it using custom CSS code. Please remove that code and add following 

    .container.av-logo-container {
    max-width: 100%!important;
    margin: 0!important;
    width: 100%!important;
}

    Best regards,
    Yigit

    May 25, 2016 at 11:13 am #637950
    Freek

    Ok this worked for me.
    THX case closed

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Header image not responsive’ is closed to new replies.