Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 14, 2020 at 4:52 pm #1245793
    metamorfic

    Hi!

    I need to create a black banner all across the bottom of the header to extend the bottom par of my client logo. I manage to make it works on desktop with the logo overlapping a black color section. But as soom as I get on mobile the logo stop overlapping and the color section go under it. Also, in the Woocommerce Shop and Product pages, I can’t insert the color section so I loose the black banner.

    Is there a way to build that black banner in the header code, so it looks the same everywhere?

    September 16, 2020 at 4:30 am #1246144
    Rikard

    Hey Genevieve,

    Please try removing the black section and add this CSS instead:

    #header {
    border-bottom: 50px solid #000;
}

    Best regards,
    Rikard

    September 16, 2020 at 3:31 pm #1246356
    metamorfic

    Hi Rikard!

    This works great on desktop. But on mobile, the border doesn’t stay being the logo, it drop below it. Can we fix that so it stay behind the logo like on desktop?

    Thanks!

    September 17, 2020 at 12:16 pm #1246505
    Rikard

    Hi,

    You have this CSS active:

    @media only screen and (max-width: 767px) {
.responsive #header_main .container {
    height: auto !important;
}
}

    Please remove that, then add this:

    .responsive #top #wrap_all .av-logo-container {
    height: 74px;
}

    Best regards,
    Rikard

    September 17, 2020 at 7:57 pm #1246591
    metamorfic

    Got this! It works! Thanks!!

    September 18, 2020 at 7:22 am #1246665
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Header with 2 color background to match logo’ is closed to new replies.