Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 27, 2018 at 11:42 am #990643
    lacky1995

    Hello,
    I moved the header area down via CSS. Now I have the problem that the header area is no longer displayed as soon as the screen height gets smaller. The smaller the screen height, the more the header disappears.
    Can you help me? Thank you

    Best reguards
    Lukas

    July 28, 2018 at 4:53 am #990875
    Rikard

    Hi Lukas,

    The header looks fine on my end on mobile sizes, could you post a screenshot of the problem and try to explain a bit further please?

    Best regards,
    Rikard

    July 28, 2018 at 12:11 pm #990910
    lacky1995

    Hello,

    I mean not on the mobile devices but on the desktop. (laptop/computer)

    This is what it should look like: https://caroline-trafoier.com/wp-content/uploads/2018/07/Bildschirmfoto-2018-07-28-um-12.04.14.png
    This is how it looks when the screen height changes: https://caroline-trafoier.com/wp-content/uploads/2018/07/Bildschirmfoto-2018-07-28-um-12.04.49.png

    Best regards,
    Lukas

    July 29, 2018 at 4:36 pm #991088
    Victoria

    Hi Lukas,

    What code did you use to move the header down?

    Best regards,
    Victoria

    July 29, 2018 at 6:48 pm #991163
    lacky1995

    Hello,

    With this code I moved the header down:
    #header.av_header_transparency{
    margin-top:40%!important;
    }
    @media only screen and (min-width: 1024px) {
    #menu-item-388 {
    margin-left: 400px;
    }
    .html_header_top.html_logo_center .logo {
    top: 78%;
    }
    .html_header_top.html_logo_center #header.av_alternate_logo_active .logo {
    top: 49%;
    }

    With this code I changed the logo size:
    .logo img {
    width: 400px!important;
    height:100px!important;
    }

    Best regards,
    Lukas

    July 29, 2018 at 7:57 pm #991271
    Victoria

    Hi Lukas,

    Try using vh instead of % and work out the values that work for you

    
#header.av_header_transparency{
    margin-top:40vh!important;
}
@media only screen and (min-width: 1024px) {
#menu-item-388 {
    margin-left: 400px;
}
.html_header_top.html_logo_center .logo {
    top: 78vh;
}
.html_header_top.html_logo_center #header.av_alternate_logo_active .logo {
    top: 49vh;
}

    Best regards,
    Victoria

    July 30, 2018 at 11:39 am #991469
    lacky1995

    Thank you!

    July 30, 2018 at 5:24 pm #991620
    Victoria

    Hi lacky1995,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

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