How to remove logo for mobile only when starting to scroll?

Airi
#1

image
image1168×349 19.5 KB

How to remove the logo for mobile/tablet only when starting to scroll. It should still be there at the top of the page when first entering the site or loading the main page.

Website: https://ailytics.ai/

#2

Hi,

Thank you for getting back.

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    #masthead-sticky-wrapper.is-sticky .custom-logo-link {
      opacity: 0;
    }

Regards,
Kharis
aThemes Support

#3

Hi there,

The code didn’t seem to work

#4

hi @kharisblank. Any thoughts on the able?

#5

Hi,

​Please accept my apologies for the delay in response. I really appreciate your patience.

Try this code:

    .is-sticky .site-branding > * {
      display: none;
    }

Adding, you may need to flush any cache after applying the code above, in case your web browser retains the cached version of your page and not able to load the new code addition or some changes have made.

Regards,
Kharis
aThemes Support

#6

Hi @kharisblank no worries. Unfotunately it still does not work. i also tried other code however the .is-sticky doesnt seem to be working

#7

Hi,

Thank you for trying.

I noticed from your website’s source code, you have LiteSpeed Cache enabled. Have you cleared it after applying the code, clear web browser’s history/cache and restart it?

Regards,
Kharis
aThemes Support

#8

Yes it has been cleared however the logo is still there

#9

Hi,

Try this code:

    .is-sticky .site-branding > * {
      display: none !important;
    }

Regards,
Kharis
aThemes Support

#10

Hi @kharisblank, still doesnt work with the !important
Would any of my code here be blocking or interfeering with the hiding of logo on sticky menu?

@media only screen and (max-width: 1199px) {
	.main-navigation {
		background-color: #35BFCB !important;
	}
	.site-header {
		background-color: transparent !important;
		position: fixed !important;
	}
	.mobile-menu-toggle_lines,
	.menuStyle1 .mobile-menu-toggle_lines:before,      .menuStyle1 .mobile-menu-toggle_lines:after {
		background-color: #000 !important;
	}
}
#11

Can you try removing all other additional CSS code and keep this remains for checking purpose?

    .is-sticky .site-branding > * {
      display: none !important;
    }

Before doing so, make sure you make a backup of your additional CSS code. So you can use them when needed.

Regards,
Kharis
aThemes Support

#12

Tried removing all the additional css code and only this. Still does not work. Tried putting this within a @media only screen and (max-width: 1199px) { } also did not work