Recent
Categories
View Replies (4)

Sticky Header - Logo by scrolling hidden

  1. New
0
Votes
Undo
  1. vtom007
    vtom007
  2. Sherlock Holmes
  3. Commercial Templates
  4. Monday, 23 February 2026
  5.  Subscribe via email
I am using a Joomla51 template with the “Sticky Header” option enabled. A large graphic is used as the logo.

Is it possible to configure it so that when scrolling down, the graphic disappears completely instead of just becoming smaller? The menu bar should remain fixed at the top.

Thank you.
Responses (4)
vtom007
vtom007
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
ChatGPT say:

/* Ausgangszustand */
.logo {
overflow: hidden;
max-height: 300px; /* ungefähr die aktuelle Logo-Höhe */
transition: max-height 0.5s ease, padding 0.5s ease;
}

.logo-image.primary-logo-image {
display: block;
transition: transform 0.5s ease, opacity 0.4s ease;
}

/* Sticky-Zustand */
.sticky-wrapper.is-sticky .logo {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
}

.sticky-wrapper.is-sticky .logo-image.primary-logo-image {
transform: translateY(-100%);
opacity: 0;
}
  1. 4 days ago
  2. Commercial Templates
  3. # 1
z0r0z
z0r0z
Love Fool Vanity Monster The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
And does it also work if you enter it into the custom CSS?
  1. 3 days ago
  2. Commercial Templates
  3. # 2
vtom007
vtom007
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
And does it also work if you enter it into the custom CSS?


Yes, it works with the Jasmine template. However, you should note that with this CSS code, the mobile logo cannot be used. It would probably need an additional rule to hide the main logo in responsive mode.

However, this is sufficient for me.
  1. 3 days ago
  2. Commercial Templates
  3. # 3
z0r0z
z0r0z
Love Fool Vanity Monster The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Okay, best of luck! :)
  1. 3 days ago
  2. Commercial Templates
  3. # 4
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!