Sticky Header and 'Go Down' Button

This topic has 14 replies, 2 voices, and was last updated 9 years by sharmstr.

Author

Tagged: sticky button, invisible, transparent menu, one page, sticky menu
June 26, 2015 at 12:06 #65033

ARCHE
Participant

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.

June 26, 2015 at 18:15 #65071

sharmstr
Moderator

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

June 27, 2015 at 02:42 #65179

ARCHE
Participant

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?

June 27, 2015 at 03:28 #65182

sharmstr
Moderator

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

June 27, 2015 at 03:30 #65183

sharmstr
Moderator

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
June 27, 2015 at 04:04 #65185

sharmstr
Moderator
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
June 27, 2015 at 14:10 #65227

ARCHE
Participant

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!

July 25, 2015 at 01:04 #69934

ARCHE
Participant

This reply has been set as private.

July 25, 2015 at 01:41 #69936

ARCHE
Participant

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.
July 25, 2015 at 15:51 #69966

sharmstr
Moderator
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
July 28, 2015 at 11:38 #70351

ARCHE
Participant

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?

July 28, 2015 at 13:32 #70377

sharmstr
Moderator

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

July 28, 2015 at 13:53 #70386

sharmstr
Moderator

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

July 30, 2015 at 00:19 #70627

ARCHE
Participant

This reply has been set as private.

July 30, 2015 at 00:52 #70629

sharmstr
Moderator

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

Viewing 15 posts - 1 through 15 (of 15 total)

The forum ‘KLEO’ is closed to new topics and replies.

Search KB

Log in with your credentials

Forgot your details?