Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • January 19, 2020 at 11:15 pm #1176154
    moisturewordpress

    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;
    }

    January 20, 2020 at 1:51 pm #1176293
    Mike

    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

    January 20, 2020 at 3:18 pm #1176328
    moisturewordpress

    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

    January 21, 2020 at 3:46 am #1176535
    Mike

    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

    January 21, 2020 at 12:18 pm #1176667
    moisturewordpress

    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 😊

    January 21, 2020 at 2:11 pm #1176729
    Mike

    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

    January 21, 2020 at 2:54 pm #1176757
    moisturewordpress

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

    January 21, 2020 at 8:30 pm #1176926
    moisturewordpress

    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 🙏🏻

    January 22, 2020 at 11:53 am #1177133
    Mike

    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

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