Goatsy Goatsy - 5 months ago 23
CSS Question

In Bootstrap, how do I place links that are outside of the Navbar, inside the mobile Navbar only? (without having to write them twice in the HTML)

I'm using Bootstrap.

I have links that are outside of the Navbar.

</nav>
<ul>
<li><a href="#" class="outside-link">Outside Link</a></li>
<li><a href="#" class="outside-link">Outside Link</a></li>
<li><a href="#" class="outside-link">Outside Link</a></li>
<li><a href="#" class="outside-link">Outside Link</a></li>
<ul>


I also have the same links inside the Navbar, but with a "visible-xs" class attached, so that they only appear inside the Mobile Navbar. (with hamburger toggle icon menu)

<ul class="visible-xs">
<li><a href="#" class="outside-link">Outside Link</a></li>
<li><a href="#" class="outside-link">Outside Link</a></li>
<li><a href="#" class="outside-link">Outside Link</a></li>
<li><a href="#" class="outside-link">Outside Link</a></li>
<ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>


My current code works the way I would like, however, I do not want to write out the HTML links twice.
http://codepen.io/Goatsy/pen/yJeqjz

How do I place the outside links, inside ONLY the Mobile Navbar, without having to write the links twice in the HTML?




Ultimately, I would like these "outside links" to show on Desktop, outside of the navbar.

For Mobile, they will be, essentially, "moved" inside the navbar.

Answer

You can do this with CSS and the right HTML structure. Seperate your outside links from your standard links using navbar-right, then use position: absolute inside a media query so they are only out of the navbar above 767px.

@media (min-width: 767px) {
  .navbar.navbar-default .ul-outside {
    position: absolute;
    top: 100%;
    left: 0;
  }
}

Working Example I

/*FOR DEMO ONLY*/

.navbar.navbar-default {
  margin-bottom: 0;
}
/*FOR DEMO ONLY*/

@media (min-width: 767px) {
  .navbar.navbar-default .ul-outside {
    position: absolute;
    top: 100%;
    left: 0;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav navbar-left">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right ul-outside">
        <li><a href="#">Outside</a>
        </li>
        <li><a href="#">Outside</a>
        </li>
        <li><a href="#">Outside</a>
        </li>
        <li><a href="#">Outside</a>
        </li>
      </ul>
    </div>

  </div>
</nav>
<!--DEMO CONTENT-->
<div class="jumbotron">
  <div class="container">
    <h1>
      Outer Links
    </h1>
  </div>
</div>
<!--DEMO CONTENT-->

Working Example II:

/*FOR DEMO ONLY*/

.navbar.navbar-default {
  margin-bottom: 0;
}
/*FOR DEMO ONLY*/

@media (min-width: 767px) {
  .navbar.navbar-default .ul-outside {
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
  }
  .navbar.navbar-default .ul-outside > li {
    float: none;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav navbar-left">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right ul-outside">
        <li><a href="#">Outside</a>
        </li>
        <li><a href="#">Outside</a>
        </li>
        <li><a href="#">Outside</a>
        </li>
        <li><a href="#">Outside</a>
        </li>
      </ul>
    </div>

  </div>
</nav>
<!--DEMO CONTENT-->
<div class="jumbotron">
  <div class="container">
    <h1>
      Outer Links
    </h1>
  </div>
</div>
<!--DEMO CONTENT-->