Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1137629

    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

    #1137907

    Hey yes9310,

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

    Best regards,
    Victoria

    #1138042

    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 1 month ago by  yes9310.
    #1138656

    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

    #1138728

    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;
    }
    }

    #1138818

    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

    #1138887

    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

    #1139316

    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

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.