Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress

How would I develop a navbar with the logo in the center?

<header role="banner"> <nav id="navbar-primary" class="navbar" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-primary-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#"><img id="logo-navbar-middle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo"></a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </header><!-- header role="banner" -->


navbar-primary .navbar-nav {

background: #ededed; width: 100%; text-align: center;

li { display: inline-block; float: none; > a { padding-left: 30px; padding-right: 30px; } } }

Remove img.logo-navbar-middle from you unordered list. (Semantically it's not a nav item). Place it somewhere nested in .navbar and set its position to absolute.

You'll have to add a relative position to .navbar for this to work. Adjust the top position by decreasing the top value (set to 50% in my code below) to your liking. I added a transform property with a value of "translateY(-50%)" just in case your navbar does not have fixed height. You can remove this if it has a fixed height.

.navbar {
    position: relative;
}

img.logo-navbar-middle {
    display:block;
    position: absolute;
    top: 50%;
    left:0;
    right:0;
    margin: 0 auto;
    transform: translateY(-50%);
}