Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #1335044

    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?


    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,


    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?


    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.



    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,

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