CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3
user1985273
user1985273

Reputation: 1967

Link to navbar that does not collapse

I want to add a link to my navbar that would stay to the right - even after navbar collapses it should stay to right. I've got it working when navbar is not collapsed, but after it collapses it goes to the next line which I don't want.
So my question is how would it be possible to keep the link on the same row after navbar collapses.

Here is my code so far:

    <!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>

        <a class="pull-right" style="padding-top: 15px; padding-left: 10px;" href="#">Link</a>

    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

And the code in action:
https://jsfiddle.net/av1p3x69/

Upvotes: 0

Views: 78

Answers (4)

Nikhil Raj A
Nikhil Raj A

Reputation: 175

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>

    <a class="nav-link" href="#">Link</a>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

      </ul>
    </div>
  </div>
</nav>

Using media query for mobile screen :

@media screen and (max-width: 680px) {
    .nav-link {
        position: absolute;
        right: 10px;
        top:0;
    }
    .navbar-toggle {
        margin-right: 60px;
    }
}

Upvotes: 1

Prashant Shirke
Prashant Shirke

Reputation: 1423

You can keep copy of your link in header and then can use bootstrap's responsive utility classes like hidden-xs, hidden-md to toggle the visibility like below.

<div class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
    <a class="pull-right hidden-md" style="padding-top: 15px; padding-left: 10px;" href="#">Link</a>
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>                        
  </button>
  <a class="navbar-brand" href="#">WebSiteName</a>

</div>

    <a class="pull-right hidden-xs" style="padding-top: 15px; padding-left: 10px;" href="#">Link</a>

<div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
  </ul>
</div>

Check updated fiddle here

Other approach is to use media queries but this one I feel more simple. Thanks. Hope this helps you.

Upvotes: 2

Rahul
Rahul

Reputation: 4364

You can try below code, I used media query to get desire result

 .right-link{
   float: right;
   padding-top: 15px;
   padding-left: 10px;
 }
@media only screen and (max-width : 768px) {
  .right-link{
    position: absolute;
    top: 0;
    right: 90px;
  }
}
		<!-- Bootstrap Core CSS -->
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

	<!-- jQuery -->
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

	<!-- Bootstrap Core JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    
		<a class="right-link" href="#">Link</a>
    
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

Upvotes: 1

Deathstorm
Deathstorm

Reputation: 847

The link is now pulled to the right by its class name. I think it is better to put it in the navbar-right section and just give it an extra class with a float element. I've updated your code.

.nav-link {
  padding-top: 15px;
  padding-left: 10px;
  float: right;
}
		<!-- Bootstrap Core CSS -->
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

	<!-- jQuery -->
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

	<!-- Bootstrap Core JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    
    
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
        <li><a class="nav-link" href="#">Link</a></li>
      </ul>
    </div>
  </div>
</nav>

Hope this is what you're looking for!

Upvotes: 1

Related Questions