Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1176154

    Hi, i can’t make a transparent header on mobile work.
    This is the site: https://scalpinnovation.dk/test/

    i have this in my Quick CSS:

    td { border-style: none; }
    tr:first-child td { border-top-style: none; }
    tr td:first-child { border-left-style: none; }
    .alternate_color tr:nth-child(odd) { background: #ffffff; }
    .main_color tr:nth-child(odd) { background: #f8f8f8; }

    @media only screen and (max-width: 767px) {
    #top #wrap_all #header {
    position: fixed !important;
    }

    .responsive #top #main {
    padding-top: 0;
    }

    #top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle {
    background-color: transparent;
    }
    }
    @media only screen and (max-width: 767px) {
    .responsive #scroll-top-link {
    display: block;
    }}

    #scroll-top-link { background-color: #555555; color: white; border: 1px solid #222222; }

    .mejs-container, .mejs-layer {
    z-index: 1;
    width: 100% !important;
    }

    div .avia-video .mejs-container, div .avia-video .mejs-container video {
    height: 100%!important;
    width: 100% !important;
    position: absolute;
    }

    #1176293

    Hey Carsten,
    Thanks for the link, for a transparent header before scroll, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 766px) { 
      .responsive #top #main {margin-top: -80px!important;}
      #top #wrap_all .av_header_transparency {background-color: transparent!important;}
      div#header_main > .container {display: block !important;}
      }

    but this is a little hard to see your logo, perhaps you could change your logo to white for before scroll.
    For a transparent header after scroll, try this css:

    @media only screen and (max-width: 766px) { 
      .header_color .header_bg,#header_meta {
      background-color: transparent !important; 
    }
    }

    For always transparent, try this css:

    @media only screen and (max-width: 766px) { 
      .header_color .header_bg,#header_meta {
      background-color: transparent !important;}
      .responsive #top #main {margin-top: -80px!important;}
      #top #wrap_all .av_header_transparency {background-color: transparent!important;}
      div#header_main > .container {display: block !important;}
      #top .av_header_transparency #header_meta {
        border-bottom: 0 none transparent;}
    }

    Best regards,
    Mike

    #1176328

    Hi Mike, If I change to transparent and logo to white it will not work on laptop version. Do you have an example where there is transparent header and you can see logo and burger menu when scrolling

    #1176535

    Hi,
    Thank you for the feedback, I assume that you would like the white header before scroll and transparent after scroll with a white burger menu and social icons, in this case please try this css:

    @media only screen and (max-width: 767px) { 
      .header_color .header_bg,#header_meta {
      background-color: transparent !important; 
    }
    .logo img { 
    	opacity: 0; 
    }
    .logo a { 
    	background-image: url(https://scalpinnovation.dk/wp-content/uploads/2018/01/scalpinnovation-header-logo-neg-1.png); background-repeat: no-repeat; background-size: contain; 
    }
    .header_color:not(.av_header_transparency) div .av-hamburger-inner,.header_color:not(.av_header_transparency) div .av-hamburger-inner:before,.header_color:not(.av_header_transparency) div .av-hamburger-inner:after,.html_av-overlay-side-classic #top .av-burger-overlay li li .avia-bullet {
      background-color: #fff !important; 
    }
    .header_color:not(.av_header_transparency) .social_bookmarks a {
      color: #fff !important;
    }
    .avia-menu.av_menu_icon_beside {
        border-right-width: 0 !important; 
    }
    }

    Please see the screenshot in Private Content area.
    I see that when your site is at tablet width, which is above 768px your header is not sticky and so doesn’t become transparent, so I assume what you meant was when it is below 767px while the header is still sticky?
    After applying the css, Please clear your browser cache and check.

    Best regards,
    Mike

    #1176667

    Thanks Mike, I’ll try that code later today.
    Is it possible to only make this transparent header on specific pages only? Maybe by adding page Id to the code?

    Best regards Carsten 😊

    #1176729

    Hi,
    Yes, you can add the page IDs into the code like this:

    @media only screen and (max-width: 767px) { 
     #top.page-id-10767 .header_color .header_bg,#header_meta {
      background-color: transparent !important; 
    }
    #top.page-id-10767 .logo img { 
    	opacity: 0; 
    }
    #top.page-id-10767 .logo a { 
    	background-image: url(https://scalpinnovation.dk/wp-content/uploads/2018/01/scalpinnovation-header-logo-neg-1.png); background-repeat: no-repeat; background-size: contain; 
    }
    #top.page-id-10767 .header_color:not(.av_header_transparency) div .av-hamburger-inner,#top.page-id-10767 .header_color:not(.av_header_transparency) div .av-hamburger-inner:before,#top.page-id-10767 .header_color:not(.av_header_transparency) div .av-hamburger-inner:after,.html_av-overlay-side-classic #top.page-id-10767 .av-burger-overlay li li .avia-bullet {
      background-color: #fff !important; 
    }
    #top.page-id-10767 .header_color:not(.av_header_transparency) .social_bookmarks a {
      color: #fff !important;
    }
    #top.page-id-10767 .avia-menu.av_menu_icon_beside {
        border-right-width: 0 !important; 
    }
    }

    just adjust the page IDs to suit, this is the page ID to the page we have been testing on.

    Best regards,
    Mike

    #1176757

    What if I want to do it with more than one page ex 10767 and 10345?

    #1176926

    Is it possible to make it just like http://www.rolex.com
    Video full screen size ant transparent header that disappears when scrolling down and appears in white when scrolling up? Pleeeeeease 🙏🏻

    #1177133

    Hi,
    For the full-screen video try using the layerslider with a video background, for the header to show while scrolling up try this solution.

    Best regards,
    Mike

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