Geek Answers Handbook

Twitter in Twitter loading bar

What should I change to make the navigation bar fixed at a screen size of up to 940 pixels? I do not want to make it responsive. If you resize your browser windows to 940px, you will see scroolbar-x (bottom scroll bar) displayed, but when you scroll to the right, the position of the navigation bar is still fixed and some menu does not appear.

TwitterFacebook

Perhaps some image will explain what my problem is.

+4
source share
2 answers

This cannot be done in CSS only.

The example you give (Twitter) has a navigation bar with a fixed position and a fixed size in all screen sizes. A fixed position means that the scroll bars will not affect the position of the navigation bar, so you cannot use the x scroll bar to see the part of the navigation bar that, when it is less than 940 pixels, is hidden “under” the right border of the browser window.

So you need to choose

  • Have a fixed position, a fixed navbar size that is present at the top, no matter how far the user scrolls down and assumes that on a small enough screen they won’t be able to scroll horizontally to see all this, OR
  • Have a fixed position, fluid size navigation that adjusts its width to fit different screen sizes, which we hope will reduce the need to scroll horizontally in the first place, especially if you let it grow vertically if its contents don't fit on one line, OR
  • Have a non-fixed position, a fixed navbar size that will respond to horizontal scrolling, but will not be constantly present when the user scrolls down the page.

Effectively, you cannot position work in one direction in the x direction and the other in y.

You can see what I mean by option 2 by editing the following classes on a Twitter page using the CSS inspector:

 .global-nav .container { width: auto; max-width: 865px; } .global-nav, .global-nav-outer { height: auto; }

The second selector implements vertical fluidity, because the content cannot be on the same line.

You can see what I mean by option 3, making the following changes:

 .topbar { position: absolute; /* ... the rest as is */ }

EDIT

Of course, this is impossible to do in CSS, this does not mean that it is impossible to do at all. Here you specified the jsfiddle in which you mentioned the script. This uses MooTools, unlike jQuery, which I usually use with downloads.

Scenario: http://jsfiddle.net/uadDW/4/
Full screen version to better see the effect: http://jsfiddle.net/uadDW/4/show/

(Thanks to @Sherbrow for providing the base script with which I did this).

+3
source

Go to the same problem and was delighted with the proposed solution, but then I struggled to implement my own code (Yes, nuobi).

Turns out there is a conflict with jquery.js that I need elsewhere in my code.

http://jsfiddle.net/uadDW/83/

 /* code as before .. only added jquery.js link */

Remove jquery.js from external resources in the above script and you will get the original desired behavior. Rats!

+1
source

More articles:


All Articles