Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • March 9, 2021 at 5:28 pm #1286796
    padywhite

    Helo,

    I have followed all recommendation about the transparent header and logo on mobile. However my transparent logo had no space between the top of the page when I activated it. Curiously when I use the solid logo in the transparent header is no issue. So I tried to fix it by adding a padding-top value to the transparent logo that worked fine at first look. But when I start to scroll down the page, the transparent logo moves up for second before the solid menu with solid logo appears.

    Do you have any idea How to fix this? I just want to have a smooth transition between transparent and solid header menu as on the desktop website. I use the enfold spa template. And I just want to have the same header menu effect on mobile.

    My website: stage.padywhite.de

    My CSS code in Quick CSS field:

    
/* Transparent header on mobile */

	.responsive #top #wrap_all .av_header_transparency {
    		background: transparent;
    		position: absolute!important;}

	.responsive #top #wrap_all .av_header_transparency, 
	.av_header_transparency #advanced_menu_toggle {
  		background: transparent!important;
  		position: fixed!important;}

/* Sticky header on mobile */

    	.responsive #top #wrap_all #header {
    		position: fixed!important;}

/* Add Transparent logo */

	.responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img {
  		opacity: 0;}

	.responsive #top .av_header_transparency .logo img.alternate {
		display: block;}

/* Padding to Transparent logo */

	.responsive #top .av_header_transparency .logo {
		padding-top: 20px!important;}

/* Resize Logo */

	#header_main .container .logo a img {
		height: 40px!important;}

}

    Thanks
    Patrick

    • This topic was modified 3 years, 8 months ago by padywhite.
    March 12, 2021 at 2:51 pm #1287695
    Victoria

    Hey padywhite,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    March 12, 2021 at 6:33 pm #1287808
    padywhite

    Here you go:

    March 13, 2021 at 2:23 pm #1287984
    Victoria

    Hi padywhite,

    Thank you, I cannot figure it out. I will ask my colleagues to check.

    Best regards,
    Victoria

    March 14, 2021 at 12:23 am #1288062
    Mike

    Hi,
    Thank you for your patience, and thanks for the link to your staging site, please see the screenshot in the Private Content area.
    This screenshot is showing your two logos at the same time on mobile, you will note that you can see both of them instead of them overlapping and only seeing one of them.
    To create this screenshot I changed the opacity in my browser only, this led me to the css:

    @media only screen and (max-width: 767px) {
.responsive .logo a {
    display: table-cell;
    vertical-align: middle;
}
}

    changing the “table-cell” to “inline-block” corrects, but then we need to correct the padding for after scroll when the class “av_header_transparency” is removed and this css doesn’t work anymore:

    @media only screen and (max-width: 767px) {
.responsive #top .av_header_transparency .logo {
    padding-top: 20px !important;
}
}

    So the full solution is this:

    @media only screen and (max-width: 767px) {
.responsive .logo a {
    display: inline-block !important;
    vertical-align: middle;
}
.responsive #top .logo {
    padding-top: 20px !important;
}
}

    I added this to your Quick CSS and is working now, please clear your browser cache and check.

    Best regards,
    Mike

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