Sticky Header and 'Go Down' Button

[ARCHE]

Hi,

I would like to hide the sticky menu when Revolution Slider is shown, but appear when user scrolls to second and other sections of a one-page website.

Also, I would like to have another sticky button for scrolling down through the sections of my one-page website next to the ‘E-mail/Contact Us’ button.

Can anyone of this amazing team assist me on these?
Thank you in advance.

[sharmstr]

That’s not a quick fix. Contact dev@sevethqueen.com for a quote.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[ARCHE]

What is exactly not a quick fix? Because I assume that for the ‘Scroll Down’ button it is the same of the default ‘Go Up’ button with the only difference that the ‘Scroll Down’ button would show on the first section and not on the last?

And about hiding the sticky menu on the first full-width section of my one-page website, is there no possibility to hide the menu/header like other themes have as default option?

[sharmstr]

Quick fix meaning css or a change to a line of code.

There’s no option to hide the menu on a certain section. Its either hidden or not.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

Forgot to say… there might be some jquery out there that will do that, but you’d have to implement it on your own.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

So, this isnt exactly what you wanted for the menu, but using the below css will hide the main menu until a user starts to scroll.

COPY CODE

.sticky-wrapper.is-sticky {
  display: inline;
}
.sticky-wrapper {
  display: none;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[ARCHE]

Thanks, that is very similar to what I wanted. The only difference is that the main menu shows as the page loads, but then when you scroll down and then go up again it becomes ‘invisible’, which is how I wanted. But I think I couldn’t find better, thank you again!

[ARCHE]

This reply has been set as private.

[ARCHE]

I re-state.

I meant: when I preview the website logged into WordPress the CSS you provided works as mentioned previously. While when it is viewed publicly it does not show the header at all.

[sharmstr]

Hmmm. Okay try this instead. If you show the wp admin bar you’ll need to change 0 to 32

COPY CODE

.kleo-main-header.header-normal {
    top: -88px !important;
}

.kleo-main-header.header-normal.header-scrolled {
    top: 0px !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[ARCHE]

Thanks.

This one makes the header visible when the Revolution Slider is shown (first section of a one-page website) and invisible once I start scrolling down.

What I would like is the opposite: invisible for the first section with Revolution Slider and visible as I scroll down the website.

[So, I just tried to invert the values (-80 to become 0, and 0 to become -88) but it makes the header visible for the whole website, the same effect I would have if I didn’t input any CSS codes]

Any other suggestions please?

[sharmstr]

Can you give me access. The code works fine on my site.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

I think I know whats going on. You need to enabled ‘resize logo on scroll’ in theme options for it to work.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[ARCHE]

This reply has been set as private.

[sharmstr]

Fixed.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Author]

Posts