0

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>
Peter Girnus
  • 2,673
  • 1
  • 19
  • 24
ppinzon
  • 137
  • 2
  • 9
  • try this link.. http://stackoverflow.com/questions/13903981/how-to-align-brand-title-and-links-left-in-bootstrap-navbar – bakki Nov 05 '15 at 21:55

3 Answers3

2

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

Peter Girnus
  • 2,673
  • 1
  • 19
  • 24
  • This works! That's interesting because before I tried changing the width to 100% in css but that didn't work. So thank you! And if they are too far to the left and right, do I just use padding-left:5px etc? Or is there another method? – ppinzon Nov 05 '15 at 21:55
  • For future reference you can overwrite bootstrap css with your own css but you must add your css file after bootstraps, so that it parses after. – Peter Girnus Nov 05 '15 at 21:57
  • you may want to consider using a percentage value for your padding, as 5px will look different on different screen widths. – Peter Girnus Nov 05 '15 at 21:59
  • Okay, Thank you very much for your help :) – ppinzon Nov 05 '15 at 22:07
0

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

nav .container {
    margin: 0 auto;
    width: 100%;
}
Karolína Vyskočilová
  • 1,305
  • 1
  • 18
  • 29
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">
bakki
  • 314
  • 3
  • 10