pug-bootstrap / PUG-Bootstrap

Bootstrap framework written completely using mixins in Pug
http://pug-bootstrap.github.io/PUG-Bootstrap/
MIT License
226 stars 73 forks source link

no way of giving navbar items on right side #16

Closed tokidoki11 closed 7 years ago

tokidoki11 commented 7 years ago
mixin navbar(name, id, style, href)
    - var style = (typeof style === 'undefined') ? "default" : style
    - var href = (typeof style === 'undefined') ? "#" : href
    nav( role="navigation", class=["navbar", "navbar-" + style] )
        .navbar-header
            button.navbar-toggle.collapsed( type="button", data-toggle="collapse", data-target="#" + id, aria-expanded="false", aria-controls="navbar")
                span.sr-only Toggle navigation
                span.icon-bar
                span.icon-bar
                span.icon-bar
            a.navbar-brand(href=href)= name

        .collapse.navbar-collapse( id=id )
            ul.nav.navbar-nav
                block

I cant put items on right side of navbar since block is inside the ul tag

comparing to bootstrap html code here

<ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
  </ul>
tokidoki11 commented 7 years ago

I think you should let the ul.nav.navbar-nav out and make new mixins instead to overcome this

rajasegar commented 7 years ago

Fixed now