Centering brand logo in Bootstrap Navbar

Question

I am trying to implement a Bootstrap 3 navbar so that the brand logo to always remain in the middle  This is the code    x000D   x000D   lt div class  navbar navbar-fixed-top navbar-default  gt  x000D     lt div class  navbar-inner  gt  x000D       lt div class  container  gt  x000D         lt button type  button  style  float  left   class  pull-left btn btn-navbar navbar-toggle  data-toggle  collapse  data-target   nav-collapse  gt  x000D         lt span class  icon-bar  gt  lt  span gt  x000D         lt span class  icon-bar  gt  lt  span gt  x000D         lt span class  icon-bar  gt  lt  span gt  x000D         lt  button gt  x000D         lt a class  brand  style  margin  0  float  none   href     gt  x000D         lt img src   Content themes next images logo png    gt  lt  a gt  x000D         lt div class  nav-collapse  gt  x000D           lt ul class  nav  gt  x000D             lt li gt   lt a href     gt Item 1 lt  a gt  lt  li gt  x000D             lt li gt   lt a href     gt Item 1 lt  a gt  lt  li gt  x000D             lt li gt   lt a href     gt Item 1 lt  a gt  lt  li gt  x000D           lt  ul gt  x000D         lt  div gt  x000D         lt ul class  nav pull-right  gt  x000D           lt li gt  x000D             lt a href     gt  x000D               lt div class  nextCog  gt  lt  div gt  x000D             lt  a gt  x000D           lt  li gt  x000D         lt  ul gt  x000D         lt span class  navbar-text pull-right  gt superpup1  lt  span gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    It makes a nice looking navbar    However  I would like the logo  green  remain in the middle persistently  I am adding this style to the  tag with  brand  class    lt a class  brand  style  margin  0  float  none  text-align center  href     gt     lt img src   Content themes next images logo png    gt   lt  a gt    It partially solves the problem  the logo is in the middle but it pushes the rest of the navbar elements down     This is an undesirable effect that I would like to eliminate  Could you suggest a solution  Maybe it s a wrong approach to centering a logo from the start

User · Answer

lt style gt   navbar-brand    margin  auto     lt  style gt    lt  --HTML-- gt   lt nav class  quot navbar navbar-light bg-light quot  gt   lt a class  quot navbar-brand quot   href  quot   quot  gt     lt img src  quot logo goes here quot  width  quot 100 quot  height  quot 100 quot  class  quot logo quot  alt  quot  quot   loading  quot lazy quot  gt   lt  a gt   lt  nav gt

User · Answer

Old question  but just for posterity   I ve found the easiest way to do it is to have the image as the background image of the navbar-brand  Just makes sure to put in a custom width    navbar-brand       margin-left  auto      margin-right  auto      width  150px      background-image  url  logo png

User · Answer

Updated 2018  Bootstrap 3  See if this example helps  http   bootply com mQh8DyRfWY  The brand is centered using     navbar-brand       position  absolute      width  100       left  0      top  0      text-align  center      margin  auto      Your markup is for Bootstrap 2  not 3  There is no longer a navbar-inner   EDIT - Another approach is using transform  translateX -50      navbar-brand     transform  translateX -50      left  50     position  absolute      http   www bootply com V7vKDfk46G  Bootstrap 4  In Bootstrap 4  mx-auto or flexbox can be used to center the brand and other elements  See How to position navbar contents in Bootstrap 4 for an explanation    Also see   Bootstrap NavBar with left  center or right aligned items

User · Answer

A solution where the logo is truly centered and the links are justified   The max recommended number of links for the nav is 6  depending on the length of the words in eache link    If you have 5 links  insert an empty link and style it with   class  hidden-xs  style  visibility  hidden     in this way the number of links is always even     x000D   x000D   lt link href  https   netdna bootstrapcdn com bootstrap 3 1 1 css bootstrap min css  rel  stylesheet   gt  x000D   lt style gt  x000D     navbar-nav  gt  li   x000D      float  none  x000D      vertical-align  bottom  x000D      x000D     site-logo   x000D      position  relative  x000D      vertical-align  bottom  x000D      bottom  -35px  x000D      x000D     site-logo a   x000D      margin-top  -53px  x000D      x000D   lt  style gt  x000D   lt nav class  navbar navbar-default navbar-fixed-top  gt  x000D     lt div class  container  gt  x000D       lt div class  navbar-header  gt  x000D         lt button type  button  class  navbar-toggle collapsed  data-toggle  collapse  data-target   navbar  aria-expanded  false  aria-controls  navbar  gt  x000D           lt span class  sr-only  gt Nav lt  span gt  x000D           lt span class  icon-bar  gt  lt  span gt  x000D           lt span class  icon-bar  gt  lt  span gt  x000D           lt span class  icon-bar  gt  lt  span gt  x000D         lt  button gt  x000D       lt  div gt  x000D       lt div id  navbar  class  collapse navbar-collapse  gt  x000D         lt ul class  nav nav-justified navbar-nav center-block  gt  x000D           lt li class  active  gt  lt a href     gt First Link lt  a gt  lt  li gt  x000D           lt li gt  lt a href     gt Second Link lt  a gt  lt  li gt  x000D           lt li gt  lt a href     gt Third Link lt  a gt  lt  li gt  x000D           lt li id  site-logo  class  hidden-xs  gt  lt a href     gt  lt 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  gt  lt  a gt  lt  li gt  x000D           lt li gt  lt a href     gt Fourth Link lt  a gt  lt  li gt  x000D           lt li gt  lt a href     gt Fifth Link lt  a gt  lt  li gt  x000D           lt li class  hidden-xs  style  visibility  hidden   gt  lt a href     gt Sixth Link lt  a gt  lt  li gt  x000D         lt  ul gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  nav gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 10 0 jquery min js  gt  lt  script gt  x000D   lt script src  https   netdna bootstrapcdn com bootstrap 3 1 1 js bootstrap min js  gt  lt  script gt  x000D   x000D   x000D    To see result click on run snippet and then full page  Fiddle

User · Answer

The simplest way is css transform    navbar-brand     transform  translateX -50      left  50     position  absolute      DEMO  http   codepen io candid pen dGPZvR      This way also works with dynamically sized background images for the logo and allows us to utilize the text-hide class   CSS    navbar-brand     background  url http   disputebills com site uploads 2015 10 dispute png  center   contain no-repeat    transform  translateX -50      left  50     position  absolute    width  200px     no height needed     image will resize automagically        HTML    lt a class  navbar-brand text-hide  href  http   disputebills com  gt Brand Text          lt  a gt      We can also use flexbox though  However  using this method we d have to move navbar-brand outside of navbar-header  This way is great though because we can now have image and text side by side      brand-centered     display  flex    justify-content  center    position  absolute    width  100     left  0    top  0     navbar-brand     display  flex    align-items  center      Demo  http   codepen io candid pen yeLZax  To only achieve these results on mobile simply wrap the above css inside a media query    media  max-width  768px

User · Answer

Try this    navbar       position  relative     brand       position  absolute      left  50       margin-left  -50px  important      50  of your logo width        display  block      Centering your logo by 50  and minus half of your logo width so that it won t have problem when zooming in and out   See fiddle

[css] Centering brand logo in Bootstrap Navbar

Examples related to css

Examples related to twitter-bootstrap-3

Examples related to bootstrap-4