2016-01-13 3 views
-2

Я пытаюсь создать липкий навигатор, но он просто отображается как вертикальные точки с ссылками. Вот код, я использую:Sticky navbar vertical bullet points

/* Spacing & Border of First Link in Navigation */ 
 
    .tabs-inner .section:first-child ul { 
 
    margin-top: 0px; 
 
    border: 0 solid #eeeeee; 
 
    } 
 

 
    /* Background & Border of Navigation */ 
 
    .tabs-inner .widget ul { 
 
    background: #999999; 
 
    border: 0px solid #eeeeee; 
 
    text-align: center !important; 
 
    } 
 

 
    /* Font, Colour & Border of Links */ 
 
    .tabs-inner .widget li a { 
 
    font: normal normal 14px Arvo; 
 
    color: #333333; 
 
    border: 0px solid #ffffff; 
 
    } 
 

 
    /* Font & Colour of Rollover Links */ 
 
    .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { 
 
    color: #eeeeee; 
 
    background-color: #ffffff; 
 
    text-decoration: none; 
 
    } 
 
    
 
    /* Centre Navigation */ 
 
    .tabs .widget li, .tabs .widget li{ 
 
    display: inline; 
 
    float: none;}
<div id="stickynavbar"> 
 
    <ul> 
 
    <li><a title="home" href="LINK">Home</a></li> 
 
    <li><a title="TITLE" href="LINK">PAGE TITLE</a></li> 
 
    <li><a title="TITLE" href="LINK">PAGE TITLE</a></li> 
 
    <li><a title="TITLE" href="LINK">PAGE TITLE</a></li> 
 
    <li><a title="TITLE" href="LINK">PAGE TITLE</a></li> 
 
    </ul> 
 
</div>

Я пробовал разные версии и все, что я пытаюсь создать Navbar он держит придумывая пуля точек.

+0

Итак, вы хотите, чтобы это было "липкие" * горизонтальный * Navbar? –

+3

Ваш css никоим образом не связал вас с вашим html? –

ответ

0

Как вы можете в комментариях «CSS, который вы предоставили, не имеет ничего общего с панелью навигации». Если вы хотите сделать панель навигации липкой сверху, используйте следующий CSS, чтобы ваша панель навигации была зафиксирована вверху:

#stickynavbar { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 9999; 
 
    width: 100%; 
 
    height: 50px; 
 
    -webkit-transform: translateZ(0); 
 
} 
 

 
ul { 
 
    list-style-type:none; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: black; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
}
<div id="stickynavbar"> 
 
    <ul> 
 
    <li><a title="home" href="LINK">Home</a></li> 
 
    <li><a title="TITLE" href="LINK">PAGE TITLE</a></li> 
 
    <li><a title="TITLE" href="LINK">PAGE TITLE</a></li> 
 
    <li><a title="TITLE" href="LINK">PAGE TITLE</a></li> 
 
    <li><a title="TITLE" href="LINK">PAGE TITLE</a></li> 
 
    </ul> 
 
</div>

+0

Это работает для меня в блоге тестера, но не для моего основного блога, должно быть что-то не так в моем шаблоне, что его переопределение – hadesg

Смежные вопросы