Twitter Bootstrap Question posted in

How to move Bootstrap navbar to the right?-Twitter bootstrap

I am using an absolutely positioned navbar in twitter Bootstrap, however when I use the .pull-right class inside of my tag with the navbar items the navbar items stay to the left. I have also tried using float: right; and text-align: right; and those didn’t work. Does the absolute positioning of the navbar affect this behaviour? How can I get the navbar items to go to the right hand side of the banner? 

.wrapper {
  position: relative;
}

#banner {
  height: 50vh;
  width: 100vw;
  position: relative;
}

#responsive-nav {
  background-color: transparent;
  position: absolute;
  z-index: 2;
}

#logo {
  position: absolute;
  top: 15px;
  left: 60px;
  z-index: 1;
}
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mock Up</title>
    <!-- Custom CSS -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- Bootstrap Link -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
    <nav class="navbar navbar-static-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <!-- Collapsing Hamburger Buttons for mobile -->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="collapse navbar-collapse" id="responsive-nav">
                    <ul class="nav navbar-nav pull-right">
                        <li class="nav-item">
                            <a href="#about">Home</a>
                        </li>
                        <li class="nav-item">
                            <a href="#work">Projects</a>
                        </li>
                        <li class="nav-item">
                            <a href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
                <div class="wrapper">
                <img class="img-responsive" id="logo" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2ZS1qSS1wOGJCVzg=w1046-h653-iv1">
                <img class="img-responsive" id="banner" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2SDRjaVpyY3FITFk=w1366-h653-iv1">
            </div>
            </div>
        </div>
        
    </nav>
    <script src="https://use.fontawesome.com/bd8b80bd9d.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>
Tags:

3

Answers


  1. 0

    parent div with id=”responsive-nav” must be width 100%

    Login or Signup to reply.
  2. 0

    Add width: 100% to the #responive-nav. 

      #responsive-nav {
  background-color: transparent;
  position: absolute;
  z-index: 2;
  width: 100%;}
    Login or Signup to reply.
  3. 0

    Here you go with a solution https://jsfiddle.net/j6sqyru8/

    .wrapper {
  position: relative;
}

#banner {
  height: 50vh;
  width: 100vw;
  position: relative;
}

#responsive-nav {
  background-color: transparent;
  position: absolute;
  z-index: 2;
}

.navbar-toggle {
  z-index: 9;
}

#logo {
  position: absolute;
  top: 15px;
  left: 60px;
  z-index: 1;
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-static-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <!-- Collapsing Hamburger Buttons for mobile -->
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div class="collapse navbar-collapse" id="responsive-nav">
          <ul class="nav navbar-nav pull-right">
              <li class="nav-item">
                  <a href="#about">Home</a>
              </li>
              <li class="nav-item">
                  <a href="#work">Projects</a>
              </li>
              <li class="nav-item">
                  <a href="#contact">Contact</a>
              </li>
          </ul>
      </div>
      <div class="wrapper">
        <img class="img-responsive" id="logo" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2ZS1qSS1wOGJCVzg=w1046-h653-iv1">
        <img class="img-responsive" id="banner" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2SDRjaVpyY3FITFk=w1366-h653-iv1">
      </div>
    </div>
  </div>
</nav>

    Hope this will help you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search