Twitter Bootstrap Question posted in

Twitter bootstrap – How to style Bootstraps collapsable Navbar?

I’ve made a website using bootstrap, I don’t know much about this framework. What I’m having difficulty with is styling the navbar.

What I would like to do is move the name, and three titles, ‘work’, ‘about’, and ‘contact’, to the left corner of the page, and move the social media icons, to the right corner of the page. Could someone instruct me on how I could do this while still retaining the functions that bootstrap offers?

Here is a jsfiddle: https://jsfiddle.net/3kq7ptxd/

The jsfiddle looks different from the actual website, so if you go on paulopinzon.com you will maybe get a clearer idea of what I’m attempting.

Thanks for taking the time! I will try to experiment with things in the mean time, but if someone with more experience could help that would be much appreciated.

Have a good day

HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="css/yourCustom.css" rel="stylesheet"/>
<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.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> 
<body>
<nav role="navigation" class="navbar navbar-default navbar-static-top">
  <div class="container">
  <div class="navbar-header">
  <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>

  </button> <a href="index.html" class="navbar-brand" style="color:#000000">Paulo Pinzon-Iradian</a>

    </div>
    <div id="navbarCollapse" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="work.html" style="color:#000000; margin-left:1.5em;">Work</a>

        </li>
        <li><a href="about.html" style="color:#000000; margin-left:1.5em;">About</a>

        </li>
        <li><a href="contact.php" style="color:#000000; margin-left:1.5em;">Contact</a>

        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a target="_blank" href="https://www.facebook.com/pages/Paulo-Pinzon-Iradian/849542288428399" style="color:#3b5197;"><i class="fa fa-facebook-square"></i></a>
        </li>
        <li><a target="_blank" href="https://instagram.com/paulopinzonart/" style="color:#125688;"><i class="fa fa-instagram"></i></a>
        </li>
        <li><a target="_blank" href="https://twitter.com/PauloPinzonArt" style="color:#00c7f4;"><i class="fa fa-twitter-square"></i></a>
        </li>

      </ul>
    </div>
  </div>
</nav>
Tags:

3

Answers


  1. 0

    Change the navbar .container to .container-fluid.

    Basically .container-fluid continuously re-sizes on change of viewport and leaves no extra empty space on the sides ever, unlike .container.

    .container-fluid has the CSS property width: 100%;, so it continually readjusts at every screen width granularity.

    <nav role="navigation" class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a href="index.html" class="navbar-brand" style="color:#000000">Paulo Pinzon-Iradian</a>

    </div>
    <div id="navbarCollapse" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="work.html" style="color:#000000; margin-left:1.5em;">Work</a>

        </li>
        <li><a href="about.html" style="color:#000000; margin-left:1.5em;">About</a>

        </li>
        <li><a href="contact.php" style="color:#000000; margin-left:1.5em;">Contact</a>

        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a target="_blank" href="https://www.facebook.com/pages/Paulo-Pinzon-Iradian/849542288428399" style="color:#3b5197;"><i class="fa fa-facebook-square"></i></a>
        </li>
        <li><a target="_blank" href="https://instagram.com/paulopinzonart/" style="color:#125688;"><i class="fa fa-instagram"></i></a>
        </li>
        <li><a target="_blank" href="https://twitter.com/PauloPinzonArt" style="color:#00c7f4;"><i class="fa fa-twitter-square"></i></a>
        </li>

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

    CODEPEN DEMO

    Login or Signup to reply.
  2. 0

    Try to add following code to your css styles, did it what you wanted to? 

    nav .container {
    margin: 0 auto;
    width: 100%;
}
    Login or Signup to reply.
  3. 0

    from
    <nav role="navigation" class="navbar navbar-default navbar-static-top">
    <div class="container">
    to 

    <nav role="navigation" class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search