I would like to have sign up and login links at the top right of my navbar and have a responsive collapsed menu justified left

Question

I'm quite new to bootstrap and I've been trying to sort a log in and sign up link on the right side of my navbar.

pull-right is working, but it also affects the collapsed menu, which I don't want: I would like to get it inline with my main nav which is in the same nav menu but different ul list, is this possible?

Edit: Added the rest of my navbar code. I've not got css on the col-md-2 at the moment as I tried using @media with a min-width and max-width with float:left or text-align:left, but they didn't work at all and I tried also without @media.

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <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="index.php"><img src="Assets/designclick.png" alt="Design Click"></a>
</div>
<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Discover</a></li>
    <li><a href="#">Designers</a></li>
    <li><a href="#">Jobs</a></li>
    <li><a href="#">About</a></li>
  </ul>
  <div class="col-md-2 pull-right">
    <ul class="nav navbar-nav memblogin">
      <li class="memblogin"><a href="#">Sign Up</a></li>
        <li class="dropdown" id="menuLogin">
          <a class="dropdown-toggle" href="#" data-toggle="dropdown" id="navLogin">Login</a>
          <div class="dropdown-menu" style="padding:17px;">
            <form class="form" id="formLogin"> 
              <input name="username" id="username" type="text" placeholder="Username"> 
              <input name="password" id="password" type="password" placeholder="Password"><br>
              <button type="button" id="btnLogin" class="btn">Login</button>
            </form>
          </div>

You question could use a bit more specific detail about the problem you're having. — Robert Harvey, Apr 25 '15 at 02:21
I would like to have sign up and login links at the top right of my navbar and have a responsive collapsed menu justified left. Is this possible? — Shiro, Apr 25 '15 at 02:26
Anything is possible given enough time, money and programmer talent. — Robert Harvey, Apr 25 '15 at 02:27
I've fixed it now, just had to remove the col-md and pull-right and use navbar-right in the ul class instead. — Shiro, Apr 25 '15 at 03:09

score 1 · Answer 1 · edited May 23 '17 at 12:33

I fixed it with help from this post - Bootstrap NavBar with left, center and right aligned items

I removed the col-md and pull-right and added navbar-right instead, I then added padding-right: 30px; to my navbar in the css. The sign up and login links are at the top right whilst aligning left when the nav is collapsed. This is my code now -

<ul class="nav navbar-nav navbar-right">
    <li class="memblogin"><a href="#">Sign Up</a></li>
      <li class="dropdown" id="menuLogin">
        <a class="dropdown-toggle" href="#" data-toggle="dropdown" id="navLogin">Login</a>
        <div class="dropdown-menu" style="padding:17px;">
          <form class="form" id="formLogin"> 
            <input name="username" id="username" type="text" placeholder="Username"> 
            <input name="password" id="password" type="password" placeholder="Password"><br>
            <button type="button" id="btnLogin" class="btn">Login</button>
          </form>

and the css is

.navbar-inverse {
 background-color: #0F1122;
 padding-right: 30px;
 }

I would like to have sign up and login links at the top right of my navbar and have a responsive collapsed menu justified left

1 Answers1