Floating Navbar

[DemOnstar]

Is there a floating navbar option/mod for 4.2.x?
If not, then that would be a request...

Cheers..

[ikopylov]

Is there a floating navbar option/mod for 4.2.x?


Example:
Navbar is a "magnet" to the top of the page
see demo http://fotogl.com

[futureaudio]

It could be easily done by adding "position:fixed" to the parent container div. Depending on the style used, it might require a bit of editing and moving things around though.

[DemOnstar]

Example:
Navbar is a "magnet" to the top of the page
see demo http://fotogl.com

Yes, that example is exactly what I mean except I would want to include the search in there as well.
Although the design is a little over stylized for me, this is what I am looking for.

Thank you for the example but is there a link to the source?

--------------- Added 1381810463 at 1381810463 ---------------

It could be easily done by adding "position:fixed" to the parent container div. Depending on the style used, it might require a bit of editing and moving things around though.

My coding ability is a bit crap but I will have a go at this one using the example above.

Thanks.

[JayJay]

Futureaudio's suggestion is what I would do. What you may find is that the rest of your page may shift up by the width of the navbar so just bear that in mind

[DemOnstar]

Ok, I am on the right lines. I added this to my additional.css


.navbar {
position: fixed;
width: 97.6%;
z-index: 1;
}


It kinda works in a comical way.. The thing that escapes me is how should it know where the top of the screen is?
Scrolling the page leaves it exactly where it was, but when I scroll to the top of the page, it should stop and then fix itself there...

Good fun so far...:)

[ikopylov]

It could be easily done by adding "position:fixed" to the parent container div.
This may apply only if navbar located in absolute top of the page (top=0)


DemOnstar, There is no source. HandMade. Did it myself for my site.
Used 1 script and some css code.
This can be done for each site will be different execution/
Open the contents and copy the code
If you have problems, I will help you.
If it does not take much time

[futureaudio]

You should be able to adjust the vertical placement with "top" attribute. "top: 0" for topmost placement and then add as many pixels to it as need be.
Ok, I am on the right lines. I added this to my additional.css


.navbar {
position: fixed;
width: 97.6%;
z-index: 1;
}


It kinda works in a comical way.. The thing that escapes me is how should it know where the top of the screen is?
Scrolling the page leaves it exactly where it was, but when I scroll to the top of the page, it should stop and then fix itself there...

Good fun so far...:)

[DemOnstar]

Thank you all for your assistance...
I am getting there bit by bit...

--------------- Added 1381916601 at 1381916601 ---------------

This may apply only if navbar located in absolute top of the page (top=0)

Open the contents and copy the code


Not sure which contents you are talking about but you have already helped a great deal by showing me your site...Inspiring..

[DemOnstar]

Same position literally...

The navbar doesn't move, it sits there and everything moves behind it...Ok, now again, it looks a bit weird..It should scroll to the top of the screen and then stop there whilst everything else goes underneath it and away... But alas. it doesn't.. I open the page and all looks as it should, I scroll and the navbar doesn't move but all other content does...

I tried the 'top' attribute and it didn't really do much, I just ended up moving the wrapper down..

What is it apart from coding ability that I am missing?

Thanks...

[futureaudio]

You need a small JavaScript to detect top scroll position of the page and change "top" of the menu accordingly. You can take clues from that site or something. I don't think you can do this with just CSS itself.

[Simon Lloyd]

You need to apply it to the container for the navbar itself.

[DemOnstar]

You need a small JavaScript to detect top scroll position of the page and change "top" of the menu accordingly. You can take clues from that site or something. I don't think you can do this with just CSS itself.

A ha, JavaScript.. Now that is going to make me lose interest...css, I think I can handle but JS, that is too much for me...I know this as I have already tried to decipher JS but ended up throwing a wobbler....

--------------- Added 1382172381 at 1382172381 ---------------

You need to apply it to the container for the navbar itself.

Apply what, the css or the JS?

The navbar is doing now what I wanted it to do except for the problems mentioned above..

Thanks..

[Simon Lloyd]

Do it like this:
Add this to css (additional css area is fine)
div.floating-menu {position:fixed;border:0px;width:100%;z-index:100;}
div.floating-menu a, div.floating-menu{display:block;margin:0 0.0em;}

Then surround the navbar template or the variable like i've shown with the div
<div class="floating-menu">
$navbar
</div>

Here's the result:
http://www.thecodecage.com/forumz/index.php

[DemOnstar]

Cheers all..

I finally did it, it took me forever..

Had to use some js in conjunction with css.. What a headache...Not be doing that again for a while..
If you want to try it let me know....

[DemOnstar]

Now that is done, it a presented a minor issue...Possibly a 20 px issue..

When clicking on a forum or or landing on a page from a quote or something, because part of the screen is taken up by the floating bar, the page is slightly out. It doesn't land below the floating bar and the top of the post is clipped a little.
Does anybody know where to add the necessary change?

Thanks all for your co operation in this matter..

[tbworld]

For CSS help you need to provide a link. :)

[DemOnstar]

Cheers tb, figured out a compromise..

Thanks for being there....