Photoshop Question posted in
The official user guide can be found here.

How do I center a Bootstrap nav bar with a brand image inbetween nav links? – Photoshop

So I’ve designed a mock website layout for a made up company so I can test my skills at Twitter’s Bootstrap 3 but I’m having problems relaying what I’ve designed on photoshop to code.

I’m trying to get the whole navbar content centered, with links at either side of the brand logo. I’ve checked online, google, stackoverflow and more, however I can’t seem to get it anywhere near what I’ve designed! I’m having a hard time getting my head around it. It seems like it should be simple, and I’ve just overthought it’s complexity! The links need to be center to the image, but also center in the navbar itself. The layout as such:

[link] [link] [LOGO] [link] [link]

Here’s an image of the mentioned design:

enter image description here

Tags:

2

Answers


  1. 0

    You can also try flexbox display. In order to implement it, you will have to:

    1. add the display: flex property to the parent element of the elements that you need to align (in this case: on the <ul> element in the navbar, which contains the list of navigation links and the brand image)
    2. set margin: auto for the elements you need to align (in this case: on the <li> elements)

    Optional: if you don’t want your elements to show up in a row (default bahavior), adjust the value of the flex-direction property. E.g. if you want to have the elements listed vertically, add flex-direction: column; to the <ul> element.

    Here is a sample code, with two different image-placements: on-top of the list for mobile devices and in the middle of the row for small devices and above.

        HTML:
    ...
    <nav class="container">
        <div class="row visible-xs text-center">
            <div class="col-xs-12">
                <a href="#"><img src="images/logo.png" alt="BLUE|BERY"/></a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <ul class="text-center">
                    <li><a href="#">Who We Are</a></li>
                    <li><a href="#">Our Food</a></li>
                    <li class="hidden-xs"><a href="#"><img src="images/logo.png" alt="BLUE|BERY"/></a></li>
                    <li><a href="#">Book a Table</a></li>
                    <li><a href="#">Promotions</a></li>
                </ul>
            </div>
        </div>
    </nav>
    ...

    CSS:
        body {background-color: #333333;}
        nav {background-color: #000000;}
        nav ul {
            display: flex; 
            list-style-type: none; 
            padding-left: 0;  //in order to eliminate Bootstrap's built-in 40px padding
        }
        nav ul > li {margin: auto;} //N.B. don't alter the margin property, if you want some further adjustments, use padding!
        nav ul > li > a:link, :visited, :hover, :active {
            color: #ffffff; 
            text-decoration:none;
        }
        @media all and (max-width:767px) {
            nav a > img {margin: 20px auto;}
            nav ul {flex-direction: column;} //only if you want to change the default direction
        }
    Login or Signup to reply.
  2. 0

    To center the floated navbar-nav you can use relative position and negative left, right values on the navbar-nav itself and on the list items or child elements.

    To make sure that the logo is always centered you may think about not using a nav-justified but a regular navbar-nav with a fixed value for left and right padding on the anchor tags, but with individual values for different screens.

    To get the vertical alignment working just add the appropriate line-height to the anchor tags.

    I have decided to hide the actual navbar-brand and only show it on sx breakpoint.
    For the centered logo it is the other way around, so we do not have the logo inside the collapsed nav. Just look at the example and i am sure you will get the idea.

    Here is the example.

    @import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");

.navbar {
  background-color: #231f20;
  min-height: auto;
  position: relative;
  top: 0px;
  font-size: 13px;
  width: auto;
  border-bottom: none;
  margin-bottom: 0px;
  padding: 40px 0px;
}
.navbar-brand {
  padding: 0 15px;
  height: 96px;
}

@media (min-width: 768px) {
  .navbar-nav {
    position: relative;
    right: -50%;
  }
  .navbar-nav > li {
    position: relative;
    left: -50%;
  }
  .navbar-nav > li a {
    line-height: 126px;
    vertical-align: middle;
    padding: 0 24px;
  } 
}

@media (min-width: 992px) {
  .navbar-nav > li a {
    padding: 0 48px;
  } 
}

@media (min-width: 1200px) {
  .navbar-nav > li a {
    padding: 0 68px;
  } 
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand hidden-sm hidden-md hidden-lg" href="#"><img src="http://i.imgur.com/SC9LKtA.png" alt="Brand" width="180" /></a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Who We Are</a></li>
                <li><a href="#">Our Food</a></li>
                <li class="hidden-xs"><a href="#"><img src="http://i.imgur.com/SC9LKtA.png" alt="Brand" width="180" /></a></li>
                <li><a href="#">Book a Table</a></li>
                <li><a href="#">Promotions</a></li>
            </ul>
        </div>
    </div>
</nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search