vb.org Archive - Floating Navbar

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- Modification Requests/Questions (Unpaid) (https://vborg.vbsupport.ru/forumdisplay.php?f=112)

- - Floating Navbar (https://vborg.vbsupport.ru/showthread.php?t=303387)

DemOnstar

10-14-2013 12:46 PM

Floating Navbar

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

Cheers..

ikopylov

10-14-2013 04:56 PM

Quote:

Originally Posted by DemOnstar (Post 2453216)

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

10-14-2013 05:16 PM

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

10-15-2013 02:12 AM

Quote:

Originally Posted by ikopylov (Post 2453271)

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 [DATE]1381810463[/DATE] at [TIME]1381810463[/TIME] ---------------

Quote:

Originally Posted by futureaudio (Post 2453283)

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

10-15-2013 12:19 PM

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

10-15-2013 01:23 PM

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

Code:

.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

10-15-2013 06:39 PM

Quote:

Originally Posted by futureaudio (Post 2453283)

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

10-15-2013 07:43 PM

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.

Quote:

Originally Posted by DemOnstar (Post 2453586)

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

Code:

.navbar {

    position: fixed;

    width: 97.6%;

    z-index: 1;

}

DemOnstar

10-16-2013 07:40 AM

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

--------------- Added [DATE]1381916601[/DATE] at [TIME]1381916601[/TIME] ---------------

Quote:

Originally Posted by ikopylov (Post 2453675)

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

10-19-2013 03:49 AM

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

10-19-2013 04:09 AM

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

10-19-2013 05:05 AM

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

DemOnstar

10-19-2013 06:43 AM

Quote:

Originally Posted by futureaudio (Post 2454560)

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 [DATE]1382172381[/DATE] at [TIME]1382172381[/TIME] ---------------

Quote:

Originally Posted by Simon Lloyd (Post 2454571)

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

10-19-2013 07:06 PM

Do it like this:
Add this to css (additional css area is fine)

Quote:

Originally Posted by css

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

11-05-2013 10:46 AM

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

11-06-2013 11:35 AM

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

11-06-2013 12:19 PM

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

DemOnstar

11-06-2013 12:31 PM

Cheers tb, figured out a compromise..

Thanks for being there....

All times are GMT. The time now is 03:08 PM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.02117 seconds Memory Usage 1,757KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (2)bbcode_code_printable (9)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (18)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: