Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Roland Hagan
Roland Hagan
6,443 Points

navbar bootstrap

Merry Christmas Everyone, I need help with elements in my navbar, I want to align them left and right accordingly using the .navbar-right, .navbar left classes but I'm not sure if I have implemented it correctly in my code or if it is not supported by Bootstrap v3. Thanks in advance to those who answer my question.

Below is my code html and css code:

<!DOCTYPE html>

<html lang="en">


<head> 
       <title> </title> 

       <meta charset="utf-8">

       <meta name="viewport" content="width=device-width, initial-scale=1">

       <link rel="stylesheet" href="bootstrap.css"/>

       <link type="text/css" rel="stylesheet" href="stylesheet2.css"/>  
</head>

<body>
       <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container-fluid">   
                <div class="navbar-header">
                  <ul class="navbar-left">
                     <li><a href="dashboard.html"><img src="homeicon1(2).png"></a></li>
                     <li><a href="settings.html"><img src="machineicon1(2).png"></a></li>
                  </ul>

                  <ul class="nav navbar-nav navbar-right">
                    <li><a href="helpdocs.html"><img src="helpicon1.png"></a></li>
                    <li><a href="#"><img src="powerbutton1(2).png"></a></li>
                  </ul>
                    <a class="navbar-brand" href="#">
                        <img alt="#" src="munchlogoweb(1).png">
                    </a>
                </div>
            </div>
        </nav>



         <div class="container">
          <div class="row">
                    <div class="col-md-3">
                    <a href="createoffer.html"><img src="createoffericon(1).png"></a>
                    <div class="text1"><a href="createoffer.html">Create Offer</a></div>
                </div>

                <div class="col-md-3">
                <a href="stats.html"><img src="statsicon(1).png"></a>
                <div class="text2"><a href="stats.html">Stats</a></div>
            </div>

                <div class="col-md-3">
                <a href="settings.html"><img src="settingsicon(1).png"></a>
                <div class="text3"><a href="settings.html">Settings</a></div>
            </div>

                <div class="col-md-3">
                <a href="help.html"><img src="helpicon.png"></a>
                <div class="text4"><a href="help.html">Help</a></div>
                </div>
            </div> 
        </div>
    </body>
</html>

CSS: 

body {
  background-color: #FFFFFF;
}

.navbar-fixed-top {
  width: 100%;
  height: 56px;
  background-color: #FF3F34;
  margin-top: -8px;
  margin-left: -10px;
}

.navbar li  {
  display: inline;
}

.navbar-left {
  margin-top: -22px;
}

.navbar-right {
  margin-top: -22px;
}

.logo {
  display: inline;
}

.logo img {
  margin-top: 7px;
  margin-left: 235px;
}

.container-fluid {
  margin-left: 140px;
}

.col-md-3 {
  display: inline;
  margin-top: 230px;
}

.text1 a {
  text-decoration: none;
  font-family: Verdana, sans serif;
  font-size: 24px;
  color: #333333;
  display: inline;
}


.text2 a {
  text-decoration: none;
  font-family: Verdana, sans serif;
  font-size: 24px;
  color: #333333;
  display: inline;
  margin-left: 43px;
}

.text3 a {
  text-decoration: none;
  font-family: Verdana, sans serif;
  font-size: 24px;
  color: #333333;
  display: inline;
  margin-left: 25px;
}

.text4 a {
  text-decoration: none;
  font-family: Verdana, sans serif;
  font-size: 24px;
  color: #333333;
  display: inline;
  margin-left: 45px;
}
Jamie Halvorson
Jamie Halvorson
12,590 Points

Hi!

I think that one of the issues may be that the entire navigation is in the class "navbar-header", you would use this only for the "navbar-brand".

Here's a link to a Bootply: http://www.bootply.com/VsIFVvq3Wl

Hope that this helps!

Jamie

Roland Hagan
Roland Hagan
6,443 Points

I have made the changes to my code it still does not seem to work, what classes should I use in my CSS?

3 Answers

Jamie Halvorson
Jamie Halvorson
12,590 Points
Jamie Halvorson
Jamie Halvorson
12,590 Points

That's all I've got unfortunately, I used the above solution on a client project: http://www.wearecampfire.co.uk/client/thechampionships/

Feel free to take a look at the source code and see if anything can help you.

Jamie Halvorson
Jamie Halvorson
12,590 Points
Jamie Halvorson
Jamie Halvorson
12,590 Points

Hi Roland,

Here is a new Bootply that should work for you: http://www.bootply.com/0utfiJG5om

What I have done is removed the Navbar-left class as it is not needed and tidied things up a little bit.

Are you looking to have two list items either side of your navbar-brand?

Cheers,

Jamie

Roland Hagan
Roland Hagan
6,443 Points

Yes, the two list items are either side of the navbar-brand.

Jamie Halvorson
Jamie Halvorson
12,590 Points
Jamie Halvorson
Jamie Halvorson
12,590 Points

Hi,

This might help you: http://plnkr.co/edit/oCdrwBp4jqxqRHPqcqGT?p=preview

More info: http://stackoverflow.com/a/24925578

Cheers,

Jamie

Roland Hagan
Roland Hagan
6,443 Points

I didn't really work for me. Do you have any other suggestions?