Floating Header Snaps Off From Top

This topic has 10 replies, 2 voices, and was last updated 9 years, 1 month ago by Sakin.

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

Author

Posts
October 18, 2015 at 10:33 pm #78089

matthewseanmclachlan
Participant

Hi Sakin,

I noticed that when I scroll down my floating header initially snaps off from the top down into the body. Is there any way to make this transition look more fluid? Or is this a javascript issue?

October 19, 2015 at 12:08 am #78094
Sakin
Keymaster
@matthewseanmclachlan: Try adding following css in “Appearance => Theme Options => Custom CSS” box:
```
#header-top,
#header-top.fixed-header {
	-moz-transition: all 0.5s ease-in-out; 
	-webkit-transition: all 0.5s ease-in-out; 
	transition: all 0.5s ease-in-out;
}
```
October 19, 2015 at 12:34 am #78097

matthewseanmclachlan
Participant

I did, it still jumps when I scroll down. Is it possible for it to not jump at all as I scroll down from the top?

October 20, 2015 at 7:30 am #78190

matthewseanmclachlan
Participant

http://www.trendfly.org

Okay I got the scrolling effect for my posts! But the menu bar still snaps off from the top in its animation. This got me wandering if I could change the animation effect on the menu bar. I think it uses:

`-moz-transition: all 0.50s ease-in-out;
-webkit-transition: all 0.50s ease-in-out;
transition: all 0.50s ease-in-out;`

The scrolling animation effects for the smooth scroll uses:

ease-in-out-quad

Is there any way to get this animation effect for the menu bar? As you can see the animation for the scroll has no bounce or elasticity.

Thanks in advance!
Matt

October 20, 2015 at 10:55 am #78200

Sakin
Keymaster

@matthewseanmclachlan: That is all we can do with custom css. For more effect you need to use JS.

October 21, 2015 at 1:13 am #78274

matthewseanmclachlan
Participant

Interesting. To clarify, what I want to do is remove the effect? I don’t want it to bounce when I scroll, I simply want the menu to scroll down with the page. There is no way to remove the bounce effect?

If not, I guess I will try to find another solution.

Thanks again!
Matt

October 21, 2015 at 10:45 pm #78326

Sakin
Keymaster

@matthewseanmclachlan: Oh I misunderstood. Then remove the css I gave you. Check your site, it’s not live.

October 21, 2015 at 10:55 pm #78328

matthewseanmclachlan
Participant

Okay, I made it live again and deleted this css code:

#header-top,
#header-top.fixed-header {
-moz-transition: all 0.50s ease-in-out;
-webkit-transition: all 0.50s ease-in-out;
transition: all 0.50s ease-in-out;
}

let me know then how to remove the bounce effect (I’m assuming the ease-in-out is only a part of this problem) and what css to use to make the menu simply scroll down with the page.

Thanks again Sakin!

October 21, 2015 at 11:27 pm #78333
Sakin
Keymaster
@matthewseanmclachlan: You can add the following css:
```
.site { padding-top: 75px; }
#header-top { position: fixed; }
```
October 21, 2015 at 11:34 pm #78337

matthewseanmclachlan
Participant

tried it. here is the results. the extra white padding at the top is not necessary i don’t think, and still it bounces? haha

it’s interesting, because it seems like an animation added to theme? I just want to switch it off.

I’m sure you understand. essentially I just want the menu bar to behave as it does when you scroll down the page. Staying fixed at the top. I just want that smooth scroll to be how it behaves when you open the site.

Example: http://www.theinfantree.com/

October 21, 2015 at 11:44 pm #78339
Sakin
Keymaster
@matthewseanmclachlan: It’s conflicting with your own customs css:
Find all the #header-top css, you will find the following:
```
#header-top { position: fixed; }
#header-top {
	background: #ea3b36;
	background: rgba(234, 53, 54, 0.7);
}
#header-top {
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5); 
    -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
    position: relative;
}
#header-top { z-index: 99; }
```
Remove all that and add the following:
```
#header-top { 
	background: #ea3b36;
	background: rgba(234, 53, 54, 0.7);
	box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5); 
	-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
	position: fixed;
	z-index: 99; 
}
```
Author

Posts