html - Twitter bootstrap Navbar justified links with logo/brand -
i cant seem justify links , have logo in navbar. links , logo overlap on left hand side. want make links justify right of logo.
%body %nav.navbar.navbar-inverse.navbar-fixed-top .container-fluid .navbar-header %button.navbar-toggle.collapsed{"aria-controls" => "navbar", "aria-expanded" => "false", "data-target" => "#navbar", "data-toggle" => "collapse", :type => "button"} %span.sr-only toggle navigation %span.icon-bar %span.icon-bar %span.icon-bar .container-fluid .navbar-header %a.navbar-brand{:href => "#"} %img{:alt => "image", :height => "50", :src => "/assets/logo.png"} %ul.nav.navbar-nav.nav-justified %li %a{:href => "#"} link %li %a{:href => "#"} link %li %a{:href => "#"} link %li %a{:href => "#"} link %li %a{:href => "#"} link %li %a{:href => "#"} link %li %a{:href => "#"} link %li %a{:href => "#"} link
css
.navbar { position: relative; background-color: #004170; padding-top: 15px; padding-bottom: 15px; margin-bottom: 0; font-size: 18px; } .navbar-nav.nav-justified > li{ float:none; }
try remove .navbar-nav
class navbar code.
%ul.nav.navbar-nav.nav-justified
to
%ul.nav.nav-justified
if navigation move down can set below properties :
.nav-justified { width: 98%; } .nav-justified > li { float: none; }
it works me.
Comments
Post a Comment