Jose Antonio Jose Antonio - 1 year ago 73
CSS Question

How to change the navbar position? CSS & HTML

I hope I can explain all what I need of you guys here :)

I want to get some like this:
http://i.imgur.com/OzyQlHC.png

But on my code, I tried a few things, but I can't get that end :S I don't know to do it and I dont found exactly what I want...

Here's my code:

<body>


<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Desplegar navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-center navbar-brand" href="#"><a class="navbar-brand">JVasconcelos</a></div>



<div class="collapse navbar-collapse" id="navbar-collapse-1">

<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input class="form-control" placeholder="Search" type="text">
</div>
<button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">CV</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div> <!-- /.navbar-collapse -->
</nav>

<footer>

<h3> &copy; 2016 - Jose Antonio - JVasconcelos </h3>

</footer>

<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>

</body>


Here's the CSS:

.navbar-brand { float: none; }
.navbar-center { position: absolute; width: 100%; text-align: center; margin: auto; height:100%; }


--> EDIT: I did it with this code, but if exists another easier way how it is?

.navbar { margin-top: 90px; margin-left: 450px; width: 900px; }


So much thanks for watch this post and the help if you can :)

Answer Source

You don't have to use any tricks.

Just put your code in div with class of container. Set top and bottom margin to body and that is it.

HTML:

<div class="container">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <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>
        <form class="navbar-form navbar-left" role="search">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <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>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
  <div class="content">Content</div>
  <footer>Footer</footer>
</div>

CSS:

body {
  margin-top: 100px;
  margin-bottom: 100px;
}
.navbar {
  margin-bottom: 0;
}
.content,
footer{
  height: 1000px;
  background: #333;
  color: #fff;
  font-size: 60px;
  text-align: center;
  padding-top: 400px
}
footer {
  height: 100px;
  background: #eee;
  color: #333;
  padding: 0;
}

CODEPEN EXAMPLE