Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 11, 2022 at 10:13 am #1335044
    ellamac

    Hi there,
    I have a customised header with a centered logo and the main menu to left.
    I would like to make the header and logo transparent on all pages of for mobile.
    I tried some CSS listed in the forum but it didn’t work. Are you able to help me, please?

    January 12, 2022 at 3:57 am #1335146
    Ismael

    Hey Suze,

    Thank you for the inquiry.

    The following css code should set the header background to transparent and pull the main container upwards beneath the header. Please add it in the Quick CSS field or in the child theme’s style.css file.

    @media only screen and (max-width: 767px) {
  .header_color .header_bg, .header_color .main_menu ul ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow, .header_color .avia_mega_div, .header_color .av-subnav-menu>li ul, .header_color .av-subnav-menu a {
    background-color: transparent;
    color: #969696;
  }

  .responsive #top #main {
    padding-top: 0 !important;
    margin: 0;
    margin-top: -127px;
  }
}

    Best regards,
    Ismael

    January 12, 2022 at 4:18 am #1335149
    ellamac

    Thank you, Ismael – that worked perfectly for the transparent header.
    I do still have half a logo showing and wondered if there is anyway to hide the header logo on mobile only?

    January 12, 2022 at 4:53 am #1335154
    ellamac

    I’ve added the follow css which seems to have worked to remove the header logo.

    @media only screen and (max-width: 767px) {
    .logo {
    visibility: hidden !important;
    }
    }

    Thanks for your support – this thread can be closed now.

    January 12, 2022 at 6:51 am #1335180
    Rikard

    Hi,

    Great, I’m glad that you found a solution, and thanks for the update. I’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Transparent Mobile Header and Logo for Mobile’ is closed to new replies.