Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 12, 2019 at 6:26 pm #1137629
    yes9310

    Hi,
    I’ve tried all the different examples but can’t seem to get my mobile header to fit or the logo inside it centered to make it visible. Any suggestions?
    Thanks,
    Frank

    September 13, 2019 at 10:40 am #1137907
    Victoria

    Hey yes9310,

    Credentials did not work for me. Could you please update the credentials?

    Best regards,
    Victoria

    September 13, 2019 at 3:19 pm #1138042
    yes9310

    Hi Victoria,

    I’m not sure what you mean credentials? Do you mean login info? What I sent is correct. Please see below.

    Thanks,
    Frank

    • This reply was modified 4 years, 7 months ago by yes9310.
    September 16, 2019 at 5:07 am #1138656
    Nikko

    Hi Frank,

    Can you try adding this css code in Quick CSS, located in Enfold > General Styling:

    @media only screen and (max-width:767px) {
  .responsive #top #wrap_all #header, 
  .responsive #top .header_bg, 
  .responsive #top #wrap_all .av-logo-container,
  .responsive #top #header_main .inner-container {
    height: 120px !important;
  }

  .responsive #top .header_bg {
    background-size: contain !important;
  }

  .responsive #top #header .logo {
    display: block !important;
    margin: -20px auto 0;
    height: 32px !important;
    width: 126px !important;
  }

  .responsive #top #header .logo img {
    max-height: 32px;
  }
}

    Best regards,
    Nikko

    September 16, 2019 at 9:47 am #1138728
    yes9310

    Thanks Nikko,

    I tweaked your CSS some to make it a little better and it is centered now, but the top part of the header is still chopped off on mobile after trying different number values on all of the ones below. Can you take a look at it on the phone to see? Thanks.

    @media only screen and (max-width:767px) {
    .responsive #top #wrap_all #header,
    .responsive #top .header_bg,
    .responsive #top #wrap_all .av-logo-container,
    .responsive #top #header_main .inner-container {
    height: 100px !important;
    }

    .responsive #top .header_bg {
    background-size: contain !important;
    }

    .responsive #top #header .logo {
    display: block !important;
    margin: -32px auto 0;
    height: 32px !important;
    width: 126px !important;
    }

    .responsive #top #header .logo img {
    max-height: 32px;
    }
    }

    September 16, 2019 at 2:01 pm #1138818
    Nikko

    Hi yes9310,

    I think it becomes more complex using the background image you’re using right now.
    Maybe having 2 background images, the first one (currently used) then the other one is specifically made for mobile.
    then after that I think you’ll need to use background-repeat: no-repeat;
    Hope this helps.

    Best regards,
    Nikko

    September 16, 2019 at 6:26 pm #1138887
    yes9310

    Thanks Nikko,
    Where would I put a background image for that? I’m not seeing adding a background image for mobile in the Menu settings.

    Thanks,
    Frank

    September 18, 2019 at 4:33 am #1139316
    Nikko

    Hi Frank,

    I apologize what I meant was add it here:

    .responsive #top .header_bg {
  background-size: contain !important;
}

    so it’s like:

    .responsive #top .header_bg {
  background-image: url(image_url_here);
  background-size: contain !important;
  background-repeat: no-repeat;
}

    Best regards,
    Nikko

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