Fixed menu (position fixed) - horizontal scrolling disappears

Question

Task. Fixed menu at the top of the page width from 1024px to 1680px. It should be centered, have a decorative border below and indents at the edges.

Problem. When the browser window is reduced to a width of less than 1024px, the horizontal scroll bar does not appear, making it impossible to use such navigation on screens with a width of less than 1024px.

The same problem is present on the site http://www.nike.com/us/en_us/ but this resource has a separate mobile version of the site, which, in fact, eliminates this disadvantage.

Markup:

<div class="header"> <div class="navigation"> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">Products</a> </li> <li> <a href="#">Downloads</a> </li> <li> <a href="#">Applications</a> </li> <li> <a href="#">Projects</a> </li> </ul> </div> </div> <div class="content"></div>

Styles:

 body, html { font-size: 100%; padding: 0; margin: 0; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } li { list-style: none; display: inline-block; margin-left: 2em; } .header { background: DarkSalmon; padding: 0 3em; position: fixed; top: 0; width: 100%; } .navigation { border: 5px solid IndianRed; margin: 0 auto; text-align: right; min-width: 1024px; max-width: 1680px; } .content { background: MediumSeaGreen; height: 4000px; }

as an option for resolution less than 1024px - hide the menu and
The fact is that the site is technical, and does not imply adaptive styles.
Well, it could be done, but all the main content is long tables with technical data that it makes no sense to adapt.

Answer 1 · 2015-12-02T18:23:03

First, you need to set the header class that it can show a scroll, for example, to show only a horizontal scroll when the contents are larger than the container, you need to add

 overflow-x: auto;

Next you need to remove the padding

 padding: 0;

and add a position to the left

 left: 0;

Example:

 body { margin: 0;} li { list-style: none; display: inline-block; margin-left: 2em; } .header { background: #fff; padding: 0; position: fixed; overflow-x: auto; top: 50px; //изменено только для демонстрации left: 0; width: 100%; } .navigation { border-bottom: 1px solid grey; margin: 0 auto; text-align: right; min-width: 1024px; max-width: 1680px; }

 <div class="header"> <div class="navigation"> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">Products</a> </li> <li> <a href="#">Downloads</a> </li> <li> <a href="#">Applications</a> </li> <li> <a href="#">Projects</a> </li> </ul> </div> </div>

UPDATE: it seems to be implemented so that when resizing a common scrollbar appears for the whole page at the bottom of the browser window with position:fixed , it will not work.

As a workaround: set the header : position:absolute class and subscribe to scrolling events to change its top property

for example using jQuery

 $(window).scroll(function() { $('.header').css('top', $(this).scrollTop() + "px"); })

Example:

 $(window).scroll(function() { $('.header').css('top', $(this).scrollTop() + "px"); });

 body { margin: 0; overflow-x: scroll; } li { list-style: none; display: inline-block; margin-left: 2em; } .header { background: #fff; padding: 0; position: absolute; top: 0px; //изменено только для демонстрации } .navigation { border-bottom: 1px solid grey; margin: 0 auto; text-align: right; min-width: 1024px; max-width: 1680px; } .placeholder { height: 1024px; content: "." }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="header"> <div class="navigation"> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">Products</a> </li> <li> <a href="#">Downloads</a> </li> <li> <a href="#">Applications</a> </li> <li> <a href="#">Projects</a> </li> </ul> </div> </div> <div class="placeholder">&nbsp;</div>

UPD example with markup from the post.

instead of fixed - absolute
min-width - moved to header, also added to content

 $(window).scroll(function() { $('.header').css('top', $(this).scrollTop() + "px"); });

 body, html { font-size: 100%; padding: 0; margin: 0; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } li { list-style: none; display: inline-block; margin-left: 2em; } .header { background: DarkSalmon; padding: 0 3em; position: absolute; top: 0; width: 100%; min-width: 1024px; } .navigation { border: 5px solid IndianRed; margin: 0 auto; text-align: right; max-width: 1680px; } .content { background: MediumSeaGreen; height: 4000px; min-width: 1024px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="header"> <div class="navigation"> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">Products</a> </li> <li> <a href="#">Downloads</a> </li> <li> <a href="#">Applications</a> </li> <li> <a href="#">Projects</a> </li> </ul> </div> </div> <div class="content"></div>

This design is not exactly suitable, as it contains an additional scrollbar.
I wanted to ensure that when resizing there appeared a common scrollbar for the entire page at the bottom of the browser window
@ DIV1000, then add it to the post, otherwise you would like the solution?
The idea is interesting, but because of the constant recalculation of the 'top' values, the menu is jerking.
site and found it: stackoverflow.com/questions/9846807/ ... stackoverflow.com/questions/12291226/…. It turns out that as you said, the issue is solved only with the help of js

Fixed menu (position fixed) - horizontal scrolling disappears

1 answer 1

More articles: