Задача. Фиксированное меню вверху страницы шириной от 1024px до 1680px. Должно выравниваться по центру, иметь декоративный border снизу и отступы по краям.
Проблема. При уменьшении окна браузера до ширины менее чем 1024px не появляется горизонтальная полоса прокрутки, что делает невозможным использование такой навигации на экранах c шириной менее 1024px.
Эта же проблема присутствует на сайте http://www.nike.com/us/en_us/ но у этого ресурса имеется отдельная мобильная версия сайта что, собственно, и нивелирует этот недостаток.
Разметка:
<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>
Стили:
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;
}