Sticky Menu Bar w/Logo

[Phear]

Forum URL: trongridlines.boards.net/

So, I'm hoping to accomplish one last thing to really make this the fully featured board of my dreams. The last thing I'd like to do here is have a sticky menu bar, that only appears when you scroll past the main banner. (Just like Slightly insane)


smangii.proboards.com/thread/39684/sticky-menu-bar

The difference is, I would like my main navigation to move slightly to the left when it appears, and a logo that I define to appear to its left.

I know it's possible as SI managed it, but I'm not sure about the navigation change. Is this possible?

[Former Member]

Jul 31, 2015 21:42:04 GMT -8 Phear said:

Forum URL: trongridlines.boards.net/

So, I'm hoping to accomplish one last thing to really make this the fully featured board of my dreams. The last thing I'd like to do here is have a sticky menu bar, that only appears when you scroll past the main banner. (Just like Slightly insane)


smangii.proboards.com/thread/39684/sticky-menu-bar

The difference is, I would like my main navigation to move slightly to the left when it appears, and a logo that I define to appear to its left.

I know it's possible as SI managed it, but I'm not sure about the navigation change. Is this possible?

iv got the sticky menu bar thingy on mine but i think its a template request so the reds may move this.

but ill stick around because im interested in this aswell.

[Phear]

Bump for the last thing I'm looking to change on my board.

At least for now. I'm sure I'll add more features, soon.

[Tumbleweed]

Jul 31, 2015 21:42:04 GMT -8 Phear said:

Forum URL: trongridlines.boards.net/

So, I'm hoping to accomplish one last thing to really make this the fully featured board of my dreams. The last thing I'd like to do here is have a sticky menu bar, that only appears when you scroll past the main banner. (Just like Slightly insane)


smangii.proboards.com/thread/39684/sticky-menu-bar

The difference is, I would like my main navigation to move slightly to the left when it appears, and a logo that I define to appear to its left.

I know it's possible as SI managed it, but I'm not sure about the navigation change. Is this possible?

I did my own version of smanggi's but no fade stuff. You can see it here on my test site:

putteraround3.proboards.com/

Although I didn't do it on my test site nor did Smanggi but to make it appear smoother, I'd suggest slicing the very bottom of your banner image off to add as a background to the menu bar.

This is a bear of a code to get perfect but if interested,  I'll go back and find out how I did this as it's been a while ago.

[Former Member]

Aug 2, 2015 18:06:08 GMT -8 Tumbleweed said:

Jul 31, 2015 21:42:04 GMT -8 Phear said:

Forum URL: trongridlines.boards.net/

So, I'm hoping to accomplish one last thing to really make this the fully featured board of my dreams. The last thing I'd like to do here is have a sticky menu bar, that only appears when you scroll past the main banner. (Just like Slightly insane)


smangii.proboards.com/thread/39684/sticky-menu-bar

The difference is, I would like my main navigation to move slightly to the left when it appears, and a logo that I define to appear to its left.

I know it's possible as SI managed it, but I'm not sure about the navigation change. Is this possible?

I did my own version of smanggi's but no fade stuff. You can see it here on my test site:

putteraround3.proboards.com/

Although I didn't do it on my test site nor did Smanggi but to make it appear smoother, I'd suggest slicing the very bottom of your banner image off to add as a background to the menu bar.

This is a bear of a code to get perfect but if interested,  I'll go back and find out how I did this as it's been a while ago.

im interested in this aswell, could it sick the navagation bar aswell ?  i think thats whats its called, nav tree bar

[Tumbleweed]

Aug 2, 2015 19:01:29 GMT -8 @joecool111 said:

Aug 2, 2015 18:06:08 GMT -8 Tumbleweed said:

I did my own version of smanggi's but no fade stuff. You can see it here on my test site:

putteraround3.proboards.com/

Although I didn't do it on my test site nor did Smanggi but to make it appear smoother, I'd suggest slicing the very bottom of your banner image off to add as a background to the menu bar.

This is a bear of a code to get perfect but if interested,  I'll go back and find out how I did this as it's been a while ago.

im interested in this aswell, could it sick the navagation bar aswell ?  i think thats whats its called, nav tree bar

Please make your own thread rather than hijacking someone else's. Especially since you are asking for additions. Thanks.

[Phear]

This is a lot like what I'm after, as I want the banner to remain above the navigation. But, when you scroll past the threshold I want a logo to appear to the left of my navigation. This would basically force the navigation further to its right.

Do you think this would be possible with your code Tumbleweed?

[Former Member]

sorry i was just joining in on the plugin topic .... i'll start a new thread for the same plugin then.

really sorry

[Tumbleweed]

Aug 2, 2015 21:19:02 GMT -8 Phear said:

This is a lot like what I'm after, as I want the banner to remain above the navigation. But, when you scroll past the threshold I want a logo to appear to the left of my navigation. This would basically force the navigation further to its right.

Do you think this would be possible with your code Tumbleweed?

So nothing happens to your banner at all or does it scroll mostly out of view like Smangii's and then the logo appears at that scroll threshold? I can't imagine how I'd get that from not being a jerky thing when the nav bar moves over. I'll have to ponder on this for a bit and do some fiddling.

Edit: Did do a little fiddling just two get the logo to fade in (not sure if that is text or an image but I used a flower for my logo) and the nav tree bar to shrink in width (just using it until I get the rest set up so it will be the menu not the nav tree) but it's shrinking from the wrong end. lol  I have a long way to go to get everything working together. (scroll very slow because I don't have things timed right/positioned right, etc.)

Anyway, you can see it here and again, just testing on the nav tree for right now.

putteraround2.proboards.com/

Aug 2, 2015 21:53:05 GMT -8 @joecool111 said:

sorry i was just joining in on the plugin topic .... i'll start a new thread for the same plugin then.

really sorry

That's o.k. and thanks.

[Phear]

This is very close to what I'm after, honestly. I've done a quick mockup of what I'm hoping to achieve exactly, so you can see what I want to do.




Larger View:

i59.tinypic.com/2v9f4he.jpg

[Tumbleweed]

Thanks Phear,

I'm still doing a couple minor tweaks but how does this look? I'm stumbling over a smooth transition back though.

putteraround2.proboards.com/

[Phear]

That is absolutely EXACTLY what I'm looking for!

[Tumbleweed]

Sorry for the delay Phear,

O.K. To start off head to your forum wrapper template: I'm giving you the css first and I'd stick it right above your <div id="banner-container" role="banner"> because you may have to tweak things a bit since I doubt your logo will be the exact size as my test one. Once you get it the way you like you can move it to your style sheet without the <style> and </style> tags or you can just leave it in your wrapper template.

<style>
#navigation-menu{width:99%;
}
/*don't touch this*/
.f-nav1{ z-index: 9999; position: fixed; left:0; top: 0; width: 100%;
}
/*the margin moves the menu over and the 1s is the transition speed*/
.f-nav1 ul{ margin-left:30px;transition-duration: 1s;
}
/*this was added to keep the tips in view*/
.f-nav1 ul li{ padding-top:6px;padding-bottom:4px;
}
/*positioning the logo*/
#logo-fade{position:relative;float:left;top:6px; left:10px;z-index:3000;background-color: rgb(55,55,55,0.4); display:none;
}
</style>

Next, still in your wrapper template you'll need to add the fade logo image as I did in blue: (Of course you'll change the image to your image)

<a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>
<a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a>

<div id="navigation-menu" class="ui-helper-clearfix">
<!--added the logo here-->
<img id="logo-fade" style="display:none;" src=storage.proboards.com/2955945/i/PPLfTdq7IWaaDtC7Opn5.png>
 <ul role="navigation">

Then right below where the menu ends I added the blue to clear out the float left I used for the logo:

{else}
<span>Welcome $[current_user.name].</span> $[logout_link]
{/if}
</p>
</div>
<!--this added-->
<div style="clear:both;"></div>

And lastly, here is the jquery and you can just stick this at the very bottom of your wrapper template:

<script type="text/javascript">
jQuery("document").ready(function($){
   
   var nav = $('#navigation-menu');
   
   $(window).scroll(function () {
       if ($(this).scrollTop() > 140) {
           nav.addClass("f-nav1");
         
       } else {
           nav.removeClass("f-nav1");
         
       }
   });

});
</script>

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

Here's my whole Wrapper Template:

SPOILER: Click to show

<script type="text/javascript">
jQuery("document").ready(function($){

var nav = $('#navigation-menu');

$(window).scroll(function () {
if ($(this).scrollTop() > 140) {
nav.addClass("f-nav1");

} else {
nav.removeClass("f-nav1");

}
});

});
</script>

<script>
var divs = $('#logo-fade');
$(window).scroll(function(){
if($(window).scrollTop() <140 ){
divs.fadeOut(500);

} else {
divs.fadeIn(2000);

}
});
</script>

[pawl]

Have a feeling I'll be playing with this myself - nice one tumble!

[Phear]

So, it's basically all working, and working beautifully. I'm working to clean it up right now, but I've run into a problem, where the user's Inbox cuts off when they're logged in.



I'll keep digging around to see what the problem could possibly be and I'll update if I find it. If I don't update, I haven't found it.