Как создать панель Sticky Nav, которая центрирована и настроена на разные размеры экрана?

Question

Я новичок на этом веб-сайте целиком. Я хочу создать скользкую панель навигации, похожую на ту, что была на happycog.com/. Я хотел бы иметь 7 или 8 ссылок в навигации. Может кто-нибудь помочь noob, пожалуйста?

Answer 1

Я думаю, вы имеете в виду css и html.

HTML

<div class="navbar">8 li items</div> 

CSS

.navbar { 
width:100%; 
position:fixed; 
top:0; 
} 

Вы должны дать содержащий элемент ширину (или все вниз от 'HTML' на 100%).

Answer 2

Вы могли бы начать с основы, как Foundation

Bootstrap Или

Это проще, чтобы начать с ними, поскольку есть много документации и сообщества довольно велико.

Answer 3

Сначала убедитесь, что вам нужен контейнер для всех 8 ссылок с указанной шириной, например 980 или 1180 пикселей. Кроме того, важно, чтобы его родительский контейнер (контейнер, содержащий наш контейнер ссылок) имел ширину текущей длины вашего браузера.

Итак, предположим, что ваш контейнер ссылок <div id="links-container"> содержит <a href="#">Home</a><a href="#">Contact Us</a> и т. Д. И родителем нашего .links-container является тег body. - Это все для html, теперь мы идем к стилю, который будет использовать CSS.

Мы стилизация контейнера (со ссылками) по центру, придав ему свойство стиля (встроенный или в CSS)

.links-container { 
    // this will make the container float 
    // at the center of its parent container 
    margin:0 auto; 
    // this will set the container's width 
    // if not set, it will inherit its parent's width 
    width:980px; 
}