Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • June 21, 2018 at 8:35 am #975682
    Rshaules

    Hi there!
    I’m wanting to have a transparent header on all size screens, including mobile. At present my homepage (tas.media) displays a transparent header on desktop version, but not on mobile version.

    Is there an easy way to force the header to be transparent regardless of the screen size?

    Thank you!

    -Richard

    June 21, 2018 at 9:01 am #975690
    Guenni007

    how should the header behave on scroll event?

    you should have a different logo if you like to have a transparency always

    June 21, 2018 at 9:36 am #975710
    Guenni007

    by the way – it is hard to help if css is merged on developer state. !
    so maybe you can switch that off till you are ok with styling your site.
    i don’t know where that black background of header comes from in between 990px and 786px

    can you try this in quick css ( don’t forget to renew the mergerd css):

    @media only screen and (max-width: 768px){
#header_main, 
#top #wrap_all .av_header_transparency,  
#top .av_header_transparency .header_bg,
.header_color.header-scrolled .container_wrap_meta,
.header_color .header_bg {
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
}
.av_minimal_header_shadow {
	box-shadow: none !important
}
.responsive #top #wrap_all #header {
	    position: absolute !important;
}
}
    June 21, 2018 at 2:59 pm #975816
    Rshaules

    Hi there and thanks so much for replying- greatly appreciated!

    I tried the above code (switching off merged css, and flushing cache) however I’m still running into the same problem on tas.media – the wide or desktop view has a transparent header, then as you make the screen narrower, the header goes from being transparent, to black, and then white- very strange indeed.

    You would think there would be a simple code to have the header stay transparent regardless of the width of the screen, but this doesn’t seem the case.

    Thank you anyways for posting!

    -Richard

    June 21, 2018 at 5:08 pm #975864
    Victoria

    Hi Richard,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    June 22, 2018 at 1:13 am #976070
    Rshaules

    Hi Victoria, no worries- it’s tas.media
    Thank you!
    -Richard

    June 22, 2018 at 10:35 am #976210
    Victoria

    Hi Rshaules,

    Thanks :)

    What screen sizes are we talking about now?

    Best regards,
    Victoria

    June 22, 2018 at 11:13 am #976242
    Guenni007

    hm ? – wenn ich meinen Code simuliert einfüge sieht deine Seite so aus:

    wie gesagt man müsste dann noch veranlassen, dass in dem Fall das weiße Logo sich zeigt.

    June 22, 2018 at 11:24 am #976248
    Guenni007

    schau mal in den Quick css die Regel oben :

    
#top #wrap_all #footer .flex_column p{
    font-size: 12px !important;}

    hat am Ende keine geschweifte Klammer ! Das macht alles folgende ungültig

    June 22, 2018 at 11:53 am #976275
    Guenni007

    1) Du scheinst die Einstellung des Mobile Wechsels auf 990 px zu habe.
    2) wenn du es nicht auf allen Seiten hast, dann musst du die Regeln leider für die entprechenden Regeln nur setzen!

    also für Home:

    @media only screen and (max-width: 990px){
.home #header_main, 
#top.home #wrap_all .av_header_transparency,  
#top.home .av_header_transparency .header_bg,
.home .header_color.header-scrolled .container_wrap_meta,
.home .header_color .header_bg {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
}
.home .av_minimal_header_shadow {
    box-shadow: none !important
}
.responsive #top.home #wrap_all #header {
        position: absolute !important;
}
}

    und in deine child-theme functions.php:

    function av_home_transparent_logo(){
if( is_front_page() ) {
?>
<script>
(function($){
      if ($(window).width() < 990 ) {
		$(".logo img").attr("src", "https://www.tas.media/wp-content/uploads/2018/06/white-logo.png");
	   }
})(jQuery);
</script>
<?php
}
}
add_action('wp_footer', 'av_home_transparent_logo');
    June 23, 2018 at 11:25 am #976886
    Victoria

    Hi Rshaules,

    Have you tried Guenni007’s solution?

    Best regards,
    Victoria

    June 23, 2018 at 11:26 am #976888
    Victoria

    Hi Rshaules,

    Have you tried Guenni007’s solution?

    Best regards,
    Victoria

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