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

HTML

Posted by Roland Hagan
Roland Hagan
6,443 Points

Help! I need my logo centred in my Navbar!

Hello all, I need help with my logo in my Navbar, I want to centre it between my navbar icons without adjusting margins, as this would shift the icons off the screen, is this possible.

Here is the HTML:

<!DOCTYPE html>

<html lang="en">


<head> 
       <title> </title> 

       <meta charset="utf-8">

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

       <!-- Latest compiled and minified CSS -->
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.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">
                  <div class="navbar-header">

                      <ul class="nav navbar-nav navbar-left">
                        <li><a href="dashboard.html"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a></li>
                        <li><a href="settings.html"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span></a></li>
                      </ul>

                        <ul class="#"><li><a href=#><img src="munchlogoweb(1).png">
                    </img></a></li></ul>

                      <ul class="nav navbar-nav navbar-right">
                        <li><a href="help.html"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-off" aria-hidden="true"></span></a></li>
                      </ul>
                </div>

        </nav>
    </body>
</html>

And here is the CSS:

body {
  background-color: #FFFFFF;
  padding-top: 50px;
}

.navbar.navbar-default.navbar-fixed-top {
  width: 110%;
  height: 56px;
  background-color: #FF3F34;
  margin-top: -8px;
  margin-left: 0px;

}


.nav.navbar-nav.navbar-left {
    margin-right: 200px;
    display: inline-block;
}

.nav.navbar-nav.navbar-right {
    margin-left: 360px;
    display: inline-block;
}

.glyphicon {
    font-size: 2.5em;
    display: inline-block;
    color: #ffffff;
}

 img {
  margin-top: 12px;
  margin-left: 18px;
  display: inline;
  text-align: center;
}

.container {
  margin-left: 140px;
  height: 56px;
  width: 110%;
  display: block;
}

1 Answer

bleedcmyk
bleedcmyk
5,945 Points
bleedcmyk
bleedcmyk
5,945 Points

I would just do something like this with margin: 0 auto; for centering and then correct measurements to get the right icon into the center:

http://codepen.io/anon/pen/xbgPJd

You could also build it into a 3 column bar with left, center and right .