Sticky Menu Bar w/Logo

[Phear]

So, discovered my issue! I had to add some right margin to the .welcome text stylesheet to balance out the adjustments that the new stylesheet made with my navigation-menu.

All fixed now! Thanks Tumbleweed! This is fantastic!


trongridlines.boards.net/


One last question: Is there any way to make the transition back to original menu more instant? I like the fadein animation, but it seems the fadeout animation tends to lag the transition back to head.

[Tumbleweed]

Aug 5, 2015 8:34:59 GMT -8 Phear said:

So, discovered my issue! I had to add some right margin to the .welcome text stylesheet to balance out the adjustments that the new stylesheet made with my navigation-menu.

All fixed now! Thanks Tumbleweed! This is fantastic!


trongridlines.boards.net/


One last question: Is there any way to make the transition back to original menu more instant? I like the fadein animation, but it seems the fadeout animation tends to lag the transition back to head.

It looks to me you have found the part in the jquery that controls that and it's fixed as well.

[Phear]

Aug 5, 2015 15:03:05 GMT -8 Tumbleweed said:

Aug 5, 2015 8:34:59 GMT -8 Phear said:

So, discovered my issue! I had to add some right margin to the .welcome text stylesheet to balance out the adjustments that the new stylesheet made with my navigation-menu.

All fixed now! Thanks Tumbleweed! This is fantastic!


trongridlines.boards.net/


One last question: Is there any way to make the transition back to original menu more instant? I like the fadein animation, but it seems the fadeout animation tends to lag the transition back to head.

It looks to me you have found the part in the jquery that controls that and it's fixed as well.

It's mostly fixed, but I'm still having a little trouble with fadeOut lag on the logo, and nav transition. Think it would be possible to fix, or am I gonna have to live with that?

[Tumbleweed]

Aug 5, 2015 15:12:59 GMT -8 Phear said:

Aug 5, 2015 15:03:05 GMT -8 Tumbleweed said:

It looks to me you have found the part in the jquery that controls that and it's fixed as well.

It's mostly fixed, but I'm still having a little trouble with fadeOut lag on the logo, and nav transition. Think it would be possible to fix, or am I gonna have to live with that?

It seems almost instantaneous on your site viewing in IE and Chrome but try removing the blue part in the css and see if that fixes the lag you are seeing:

.f-nav1 ul{ margin-left:30px;transition-duration: 1s;

I'm still not happy with this code anyway and am looking for a better way to do this but I suck so badly at jquery and javascript that it is trial and error for me. I'll fiddle with it a bit more on my site in case removing that transition has no affect and it probably won't.

[Phear]

Aug 5, 2015 16:49:28 GMT -8 Tumbleweed said:

Aug 5, 2015 15:12:59 GMT -8 Phear said:

It's mostly fixed, but I'm still having a little trouble with fadeOut lag on the logo, and nav transition. Think it would be possible to fix, or am I gonna have to live with that?

It seems almost instantaneous on your site viewing in IE and Chrome but try removing the blue part in the css and see if that fixes the lag you are seeing:

.f-nav1 ul{ margin-left:30px;transition-duration: 1s;

I'm still not happy with this code anyway and am looking for a better way to do this but I suck so badly at jquery and javascript that it is trial and error for me. I'll fiddle with it a bit more on my site in case removing that transition has no affect and it probably won't.

No good on the duration removal. It must be something bogging me down, maybe? As long as it works well for everyone else that's quite alright.

Thanks again, Tumbleweed! I'll hit you with a Thank You on Friday.

[Tumbleweed]

Aug 5, 2015 18:44:07 GMT -8 Phear said:

Aug 5, 2015 16:49:28 GMT -8 Tumbleweed said:

It seems almost instantaneous on your site viewing in IE and Chrome but try removing the blue part in the css and see if that fixes the lag you are seeing:

.f-nav1 ul{ margin-left:30px;transition-duration: 1s;

I'm still not happy with this code anyway and am looking for a better way to do this but I suck so badly at jquery and javascript that it is trial and error for me. I'll fiddle with it a bit more on my site in case removing that transition has no affect and it probably won't.

No good on the duration removal. It must be something bogging me down, maybe? As long as it works well for everyone else that's quite alright.

Thanks again, Tumbleweed! I'll hit you with a Thank You on Friday.

If I do figure out a way to do this better I'll pm you or tag you here. No need for special thanks since you did it right here. Thank you for the thank you. lol

[Tumbleweed]

Hey, Phear

I fiddled with this more and I got things acting better (trimmed it/changed it) so to try this out, just comment out your other one so it doesn't run. To comment out, add the blue:

<!--<script>
var img = $('#logo-fade');
$(window).scroll(function(){
if($(window).scrollTop() <140 ){
img.fadeOut(1);
} else {
img.fadeIn(2000);
}
});
</script>-->

And here is the new one to try: (Checked on IE, Chrome & FF)

<script type="text/javascript">
$(window).scroll(function(){
if($(window).scrollTop() <140 ){
$('#logo-fade').fadeOut(10);
} else {
$('#logo-fade').fadeIn(200);
}
});
</script>

Probably about all I'll mess with this so pick your favorite.

[Phear]

The new one works perfect! The laggy transition at the end is completely gone.

Thanks!

[Phear]

One last issue, though-- it looks like when you're at the top of the page now, my banner stretches further out into a gray box on the side of the page, forcing the user to scroll over. Any idea what could be causing it?

trongridlines.boards.net/

[Phear]

Sorry to revive the topic again, Tumbleweed! Just want it to get working perfectly before it's ready.

It seems that some bit of code, is stretching my banner, but it's only stretching a solid color? My banners are larger, and meant to  flow with the page (each banner is 1920px wide) but it's still cut off.



Any ideas what could be happening here? :/

[Tumbleweed]

Aug 7, 2015 10:07:49 GMT -8 Phear said:

Sorry to revive the topic again, Tumbleweed! Just want it to get working perfectly before it's ready.

It seems that some bit of code, is stretching my banner, but it's only stretching a solid color? My banners are larger, and meant to  flow with the page (each banner is 1920px wide) but it's still cut off.



Any ideas what could be happening here? :/

Hmmm, I'm not sure. I hope you don't mind but I borrowed the image you have in your screen cap to put on my test site since mine was only 1280px and set to repeat. (I'll remove it just as soon as we get this solved. ) I don't get that on either of the various versions I did. Do you? putteraround2.proboards.com/   (I do get it somewhat on your site but not as bad as you show in your screen cap but probably because I'm using a rather small screen res,  so I see there is a problem.)

I know I gave you this which actually wasn't really needed by the time I got done tweaking things.

#navigation-menu{width:99%;
}

You could comment it out or remove it and see if that helps. If not, I noticed you added the random banner plugin, I think after we got this stickier menu squared away. Does disabling it change anything?

[Phear]

I tried commenting it out, and disabling the Random Banner plugin, and neither seemed to affect the random space at the right side of the screen. Really strange.

I've found a sort of workaround, for non-1920px width screen resolutions, that involves lowering the Width to 94.7% - the highest it will go without leaving space, so for now this works. The only thing is, now when you have a higher resolution, the navigation is cut-off. But it only happens on higher screen resolutions.

[Lynx]

Perhaps this may work. At the bottom of your stylesheet, try this bit of CSS:


// Contain banner image
#banner { background-image: contain; }


If it doesn't work like that, try adding !important to it and try different resolutions. Here's hoping that helps! Of course, this is assuming that your banner is in as a background image (Admin > Themes > Advanced Styles & CSS > Visual Editor > Forum > Header (Top) > Forum Banner > Banner Image > Background Image).

[Phear]

Aug 10, 2015 9:45:14 GMT -8 Lynx said:

Perhaps this may work. At the bottom of your stylesheet, try this bit of CSS:


// Contain banner image
#banner { background-image: contain; }


If it doesn't work like that, try adding !important to it and try different resolutions. Here's hoping that helps! Of course, this is assuming that your banner is in as a background image (Admin > Themes > Advanced Styles & CSS > Visual Editor > Forum > Header (Top) > Forum Banner > Banner Image > Background Image).

Sadly, no effect with this, either. I'm really not sure where this space is coming from. :/

[Lynx]

The only other thing I can think of right now is replacing contain with cover. Cover is supposed to stretch / shrink images to fit - so take note that (if it does work) it may distort your image, depending on how much it gets stretched / shrunk.