Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Hide logo in mobile header only in specific conditions

  • Hello

    I have a sticky menu for my site with a logo to the left.
    Is it possible to hide the logo in the header in those conditions :
    >only on mobile,
    >only on the homepage,
    >only before first scrolling ? (or after scrolling “X”pixels ) ?

    This is because on the hero of my homepage, I already have the logo in big, so it makes two times the logo.

    Have a nice day !

  • Hi there,

    >only on mobile,
    >only on the homepage,

    These two can be achieved with this CSS:

    .home .main-navigation .site-logo {
        display: none;
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    >only before first scrolling ? (or after scrolling โ€œXโ€pixels ) ?

    Unfortunately, this would require a custom javascript solution which we cannot support in this forum.

    Let me know if the CSS works and thanks for your understanding ๐Ÿ™‚

  • Hi Leo

    Thanls for the code ! ๐Ÿ™‚ I’ve added an CSS fadein animation. Not the same thing that after “X” scrolling but that will be ok for my purpose ๐Ÿ™‚

  • No problem ๐Ÿ™‚

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