Bootstrap 3 Navbar with Logo

Question

I want to use the Bootstrap 3 default navbar with an image logo instead of text branding  What s the proper way of doing this without causing any issues with different screen sizes  I assume this a common requirement  but I haven t yet seen a good code sample  A key requirement other than having acceptable display on all screen sizes is the menu collapsibility on smaller screens   I tried just putting an IMG tag inside the A tag that has the navbar-brand class  but that caused the menu not to function properly on my android phone  I also tried increasing the height of the navbar class  but that screwed things up even more   By the way  my logo image is larger than the height of the navbar

User · Answer

In stead of replacing text branding  I divided into two rows like in the code below and gave img-responsive class to the image         lt div class  collapse navbar-collapse navbar-ex1-collapse  style  background   efefef  height auto   gt     lt div class  container  style  margin-bottom -1px   gt       lt div class  row  gt         lt div class  col-md-3  gt           lt div id  menubar-logo  gt             lt a href  index html  gt  lt img src  img tl logo png  class  img-responsive  alt  Triple Luck IT Service Logo  gt  lt  a gt           lt  div gt         lt  div gt         lt div class   col-md-offset-3 col-md-6  gt            lt ul class  nav navbar-nav  gt             lt li gt  lt a href  index php  class  active  gt Home lt  a gt  lt  li gt             lt li gt  lt a href  about us php  gt About Us lt  a gt  lt  li gt             lt li gt  lt a href  contact us php  gt Contact Us lt  a gt  lt  li gt           lt  ul gt         lt  div gt       lt  div gt       lt  -- end of  row  -- gt     lt  div gt     lt  -- end of  container  -- gt   lt  div gt   lt  -- end of  collapse  -- gt    and in addition I added the following css codes          menubar-logo img     margin-top  10px    margin-bottom  20px    margin-right  10px      If my code solves your problem  it s my pleasure

User · Answer

My approach is to include FOUR different images of different sizes for phones  tablet  desktop  large desktop but only show ONE using bootstrap s responsive utility classes  as follow    lt  -- lt a class  navbar-brand  href   lt  php echo home url      gt    gt  lt  php bloginfo  name      gt  lt  a gt -- gt            lt a class  navbar-brand visible-xs  href   lt  php echo home url      gt    gt  lt img src   assets logo-phone png  alt   lt  php bloginfo  name      gt  Logo    gt  lt  a gt           lt a class  navbar-brand visible-sm  href   lt  php echo home url      gt    gt  lt img src   assets logo-tablet png  alt   lt  php bloginfo  name      gt  Logo    gt  lt  a gt           lt a class  navbar-brand visible-md  href   lt  php echo home url      gt    gt  lt img src   assets logo-desktop png  alt   lt  php bloginfo  name      gt  Logo    gt  lt  a gt           lt a class  navbar-brand visible-lg  href   lt  php echo home url      gt    gt  lt img src   assets logo-large png  alt   lt  php bloginfo  name      gt  Logo    gt  lt  a gt    Note  You can replace the commented line with the code provided  Replace the php code if you re not using wordpress   Edit Note2  Yes  this adds requests to your server when loading the page which might slow down a bit but if you use a background css sprite technique  chances are the logo doesn t get printed when printing a page and the code above should get better SEO

User · Answer

COMPLETE DEMO WITH MANY EXAMPLES  IMPORTANT UPDATE  12 21 15  There is currently a bug in Mozilla I discovered that breaks the navbar on certain browser widths with MANY DEMOS ON THIS PAGE  Basically the mozilla bug is including the left and right padding on the navbar brand link as part of the image width  However  this can be fixed easily and I ve tested this out and I fairly sure it s the most stable working example on this page  It will resize automatically and works on all browsers    Just add this to your css and use navbar-brand the same way you would  img-responsive  Your logo will automatically fit   navbar-brand     padding  0px     firefox bug fix       navbar-brand gt img     height  100     padding  15px     firefox bug fix      width  auto      Another option is to use a background image  Use an image of any size and then just set the desired width    navbar-brand     background  url http   disputebills com site uploads 2015 10 dispute png  center   contain no-repeat    width  200px          ORIGINAL ANSWER BELOW  for reference only   People seem to forget about object-fit a lot  Personally I think it s the easiest one to work with because the image automatically adjusts to the menu size  If you just use object fit on the image it will auto resize to the menus height        navbar-brand  gt  img         max-height  100         height  100         -o-object-fit  contain        object-fit  contain          It was pointed out that this does not work in IE  yet   There is a polyfill  but that might be excessive if you don t plan on using it for anything else  It does look like object-fit is being planned for a future release of IE so once that happens this will work in all browsers    However  if you notice the  img-responsive class in bootstrap the max-width is assuming you are putting these images in columns or something that has an explicit with set  This would mean that 100  specifically means 100  width of the parent element         img-responsive         max-width  100           height  auto          The reason we can t use that with the navbar is because the parent   navbar-brand  has a fixed height of 50px  but the width is not set    If we take that logic and reverse it to be responsive based on the height we can have a responsive image that scales to the  navbar-brand height and by adding and auto set width it will adjust to proportion   max-height  100   width  auto    Usually we would have to add display block  to the scenario  but since navbar-brand already has float left  applied to it  it automatically acts as a block element      You may run into the rare situation where your logo is too small  The img-responsive approach does not take this into account  but we will  By also adding the  height  attribute to the  navbar-brand  gt  img you can be assured that it will scale up as well as down   max-height  100   height  100   width  auto      So to complete this I put them both together and it seems to work perfectly in all browsers    lt style type  text css  gt   navbar-brand gt img      max-height  100      height  100      width  auto     margin  0 auto          probably not needed anymore  but doesn t hurt       -o-object-fit  contain     object-fit  contain       lt  style gt    lt nav class  navbar navbar-default  gt         lt div class  container  gt           lt div class  navbar-header  gt             lt button type  button  class  navbar-toggle collapsed  data-toggle  collapse  data-target   navbar  aria-expanded  false  aria-controls  navbar  gt               lt span class  sr-only  gt Toggle navigation lt  span gt               lt span class  icon-bar  gt  lt  span gt               lt span class  icon-bar  gt  lt  span gt               lt span class  icon-bar  gt  lt  span gt             lt  button gt             lt a class  navbar-brand  href  http   disputebills com  gt  lt img src  http   disputebills com site uploads 2015 10 dispute png  alt  Dispute Bills  gt  lt  a gt           lt  div gt           lt div id  navbar  class  collapse navbar-collapse  gt             lt ul class  nav navbar-nav  gt               lt li class  active  gt  lt a href     gt Home lt  a gt  lt  li gt               lt li gt  lt a href   about  gt About lt  a gt  lt  li gt               lt li gt  lt a href   contact  gt Contact lt  a gt  lt  li gt             lt  ul gt           lt  div gt         lt  div gt   lt  nav gt    DEMO http   codepen io bootstrapped pen KwYGwq

User · Answer

Maybe this is too simple  but I just copied the navbar-brand line so there are two of them  the image and then the text    lt a class  navbar-brand  href  index php  gt  lt img class  img-responsive  src  images my-icon png  width  30  height  25  alt     gt  lt  a gt   lt a class  navbar-brand  href  index php  gt My Brand lt  a gt    And I created an image that fits inside the navbar  roughly 1 2 the height

User · Answer

If using LESS  this works    navbar-height  150px   navbar-brand-vpadding  10px    navbar-brand img     height   navbar-height -  navbar-brand-vpadding   2    position  absolute    top   navbar-brand-vpadding

User · Answer

Please try following code     lt style gt      navbar a navbar-brand  padding  9px 15px 8px     lt  style gt   lt a class  navbar-brand  href     gt      lt img src  http   placehold it 140x34 000000 ffffff  amp amp text LOGO  alt    gt   lt  a gt

User · Answer

It depends on how tall you want your logo to be   The default  lt a gt  height in the navbar is 20px  so if you specify height  20px on your logo  it will allign nicely   However that s kind of small for a logo  so what I opted for was this    lt div class  navbar-header  gt       lt button type  button  class  navbar-toggle  data-toggle  collapse               data-target   navbar-ex1-collapse  gt           lt span class  sr-only  gt Toggle navigation lt  span gt           lt span class  icon-bar  gt  lt  span gt           lt span class  icon-bar  gt  lt  span gt           lt span class  icon-bar  gt  lt  span gt       lt  button gt       lt a class  navbar-brand  rel  home  href     title  Brand  gt           lt img style  height  30px  margin-top  -5px                src   img brand png  gt       lt  a gt   lt  div gt    This makes the image 30px tall and vertically aligns the image by adding a negative margin to the top  5px is half of the difference between the padding on a and the size of the image    Alternately you could change the padding on the  lt a gt  element  eg    lt div class  navbar-header  gt       lt button type  button  class  navbar-toggle  data-toggle  collapse               data-target   navbar-ex1-collapse  gt           lt span class  sr-only  gt Toggle navigation lt  span gt           lt span class  icon-bar  gt  lt  span gt           lt span class  icon-bar  gt  lt  span gt           lt span class  icon-bar  gt  lt  span gt       lt  button gt       lt a class  navbar-brand  rel  home  href     title  Brand  style  padding-top  10px  padding-bottom  10px  gt           lt img style  height  30px                src   img transparent-white-logo png  gt       lt  a gt   lt  div gt

User · Answer

This isn t semantic but I just use the existing a element  set a background image  then create multiple variations for  2x resolution  smaller screen sizes  etc   Then  you can use the  text-hide class to get some text on the page the ol  fashion way  Simple and effective though not proper use of an image   Here s a link to the helper class for text-replacement    http   getbootstrap com css  helper-classes

User · Answer

lt header class  navbar navbar-inverse header-outer  role  banner  gt     lt div class  container form-inline  gt       lt img src   Url Content     Content img Logo-Sample png     alt  Image  id  logo  class  img-responsive pull-left    gt        lt div class  pull-right padding-top  gt         lt form class  hidden-xs  role  form  gt            lt div class  form-group  style  padding-left 10px  gt             lt input type  email  class  form-control  id  exampleInputEmail2  placeholder  Username  gt           lt  div gt            lt div class  form-group  gt             lt input type  password  class  form-control  id  exampleInputPassword2  placeholder  Password  gt           lt  div gt           lt div class  form-group navbar-remember  gt             lt label class  white-font  gt               lt input type  checkbox  class  white-font  gt  Remember me            lt  label gt           lt  div gt           lt button type  button  class  btn btn-primary form-group  title  Sign In  gt Sign In lt  button gt         lt  form gt       lt  div gt     lt  div gt    lt  header gt    Please understand the code at your own effort  D This is my draft code and its already working    Here s the screenshot

User · Answer

The easiest and best answer for this question is to set a max width and height depending on your logo  the image will be a max of 50px high but no longer than 200px    lt a href  index html  gt   lt img src  imgs brand-w png  style  max-height 50px max-width 200px   gt   lt  a gt    This will vary depending on your logo size and the nav bar items you have

User · Answer

Quick Fix   Create a class for your logo and set the height to 28px  This works well with the navbar on all devices  Notice I said works  WELL      logo     display block    height 28px

User · Answer

You shouldn t need to add additional CSS  since Bootstrap3 does provide it  Unless you do want to add it  This is my code on putting the logo to the left and links to the right  This navigation is responsive  Make changes to this as you see fit   HTML    lt nav class  navbar navbar-expand-lg navbar-light fixed-top  style  background-color white   gt           lt div class  container  gt           lt a class  navbar-brand  href     gt  lt img style     width  150px   src  image jpg  alt  Image text  gt  lt  a gt           lt button class  navbar-toggler  type  button  data-toggle  collapse  data-target   navbarResponsive  aria-controls  navbarResponsive  aria-expanded  false  aria-label  Toggle navigation  gt           lt span class  navbar-toggler-icon  gt  lt  span gt           lt  button gt               lt div class  collapse navbar-collapse  id  navbarResponsive  gt                   lt ul class  navbar-nav ml-auto  gt                       lt li class  nav-item  gt  lt a class  nav-link  href     gt Home lt  a gt  lt  li gt                       lt li class  nav-item  gt  lt a class  nav-link  href     gt Projects lt  a gt  lt  li gt                       lt li class  nav-item  gt  lt a class  nav-link  href     gt Blog lt  a gt  lt  li gt                       lt li class  nav-item  gt  lt a class  nav-link  href     gt Contact lt  a gt  lt  li gt                   lt  ul gt               lt  div gt           lt  div gt       lt  nav gt

User · Answer

Why is everyone trying to do it the hard way   Sure  some of these approaches will work  but they re more complicated than is necessary   OK  first - you need an image that will fit within your navbar   You can adjust your image via css height attribute  allowing width to scale  or you can just use an appropriately sized image   Whatever you decide to do - the way this looks will depend on how well you size your image   For some reason  everyone wants to stick the image inside of an anchor with navbar-brand  and this isn t necessary   navbar-brand applies text styles that aren t necessary to an image  as well as the navbar-left class  just like pull-left  but for use in a navbar    All you really need is to add navbar-left    lt a href     class  navbar-left  gt  lt img src   path to image png  gt  lt  a gt    You can even follow this with a navbar-brand item  which will appear to the right of the image

User · Answer

Although your question is interesting i don t expect there will be one answer for it  Maybe your question is too broad  Your solution should depend on  other content in the navbar  number of items   sizes of your logo  should your logo act responsive  etc  Adding the logo in the a  with navbar-brand  seems a good starting point  I should use the navbar-brand class because this will add a padding  top   bottom  of 15 pixels   I test this setting on http   getbootstrap com examples navbar  with a logo of 300x150 pixels   Full screen   1200     between 768 and 992 pixels  menu not collapsed       lt 768  menu collapsed     Beside the aesthetic aspects i did not find any technical problem  On small screens a big logo will overlap or break out the viewport maybe  Screens between 768 and 992 pixels also have other problems when the content doesn t fit in a line  see for example  https   github com bassjobsen jamedo-bootstrap-start-theme issues 18  The default navbar has The default navbar example adds a bottom-margin of 30px so the content of your navbar should never overlap the content of your page   fixed navbars will have problems when the height of the navbar varies    You will need some css and media queries to adapt the navbar to your need on different screen sizes  Please try to narrow your question  b e  describe the problem you found on android   update see http   bootply com 77512 for an example      On smaller screens such as a phone  the collapsed menu appears above the logo   interchange the button and the logo in your code  logo first  set float left on the logo      There is no way to align the menu items to anything except top   set the margin-top for  navbar-collapse ul  Use logo height minus navbar height  to align to the bottom or  logo height - navbar height    2 to center

User · Answer

lt div class  navbar navbar-default navbar-fixed-top  role  navigation  gt           lt div class  container  gt               lt div class  navbar-header   gt                  lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar-collapse  gt                      lt span class  sr-only  gt Toggle navigation lt  span gt                      lt span class  icon-bar  gt  lt  span gt                      lt span class  icon-bar  gt  lt  span gt                      lt span class  icon-bar  gt  lt  span gt                       lt  button gt                   lt a class  navbar-brand  href  Default aspx  gt   lt span gt   lt img alt  Logo  src  Images shopify-bag png height  35  width  40   gt  lt  span gt  Shopping GO lt  a gt               lt  div gt               lt div class  navbar-collapse collapse  gt                   lt ul class  nav navbar-nav navbar-right  gt  lt  ul gt      Don t forgot to add bootstrap in head of your code

User · Answer

My solution is add css  display  inline-block  to img tag    lt img style  display  inline-block  height  30px  margin-top  -5px  gt    DEMO  jsfiddle

User · Answer

This code works perfect if you need to see the brand centered and with auto width in toolbar  It contains the Wordpress function to get the image file from right path    lt a class  navbar-brand page-scroll  rel  home       href   page-top   title  Title  gt       lt img style  height  100   width  auto              src   lt  php echo get template directory uri     gt  img logo png  gt

User · Answer

Instruction how to create a bootstrap navbar with a logo which is larger than the default height  50px    Example with a logo 100px x 100px  standard CSS    Compute the height and  padding top   padding bottom  of the logo  Here 120px  100px height   padding top  10px    padding bottom  10px    Goto bootstrap   customize  Set instead of navbar height 50px   120px  50   70  and navbar-collapse-max-height from 340px to 410px  340   70   Download css  In this example I use this navbar  In navbar-brand             lt div class  navbar-header  gt               lt  button gt       lt a class  navbar-brand myLogo  href     gt         lt img src  yourLogo jpg    gt       lt  a gt     lt  div gt       add a class  for example myLogo  and an img  your logo    lt a class  navbar-brand myLogo  href     gt  lt img src  yourLogo jpg    gt  lt  a gt   Add CSS   myLogo       padding  10px    Adequate to other sizes    Example

User · Answer

Add the following to the  navbar-brand class   navbar-brand     padding  0px     this allows the image to occupy all the padding space of the navbar--brand     navbar-brand  gt  img      height  100      set height to occupy full height space on the navbar-brand    width  auto     width should be auto to allow img to scale accordingly    max-height  100      optional    mrgin  0 auto     optional

User · Answer

I also implement it via css background property  It works healty in any width value    navbar-brand      float left      height 50px      padding 15px 15px      font-size 18px      line-height 20px      background-image  url     images logo png        background-repeat  no-repeat      background-position  left center

User · Answer

I use the img-responsive class and then set a max-width on the a element   Like this    lt nav class  navbar  gt       lt div class  navbar-header  gt           lt a class  navbar-brand  href     gt               lt img class  img-responsive  src  mylogo png  gt           lt  a gt       lt  div gt   lt  nav gt    and the CSS    navbar-brand       max-width  50

User · Answer

Well I finally got this same problem working  here is my solution and I tested it on my site in all three major browsers  Chrome  Firefox  and Internet Explorer   First of all if you are not using a text based logo then remove  navbar-brand  completely as I found this particular class to be the main cause of my collapsed nav menu doubling up   Shout out to user3137032 for leading me in the right direction   You have to make a custom responsive image container  I called mine  logo   Here is the bootstrap HTML mark up    lt div class  navbar navbar-inverse navbar-fixed-top  role  navigation  gt     lt div class  container  gt       lt div class  navbar-header  gt         lt button type  button  class  navbar-toggle collapsed  data-toggle  collapse  data-target   navbar-collapse  gt           lt span class  icon-bar  gt  lt  span gt           lt span class  icon-bar  gt  lt  span gt           lt span class  icon-bar  gt  lt  span gt         lt  button gt         lt a href   Url Action   Index     Home     class  logo  gt  lt img src    resources images Logo Concept png    gt  lt  a gt       lt  div gt       lt div class  navbar-collapse collapse  gt         lt ul class  nav navbar-nav  gt           lt li gt             lt a href   Url Action   About     Home     gt               lt i class  glyphicon glyphicon-info-sign  gt  lt  i gt  About            lt  a gt           lt  li gt           lt li gt             lt a href   Url Action   Contact     Home     gt               lt i class  glyphicon glyphicon-phone  gt  lt  i gt  Contact            lt  a gt           lt  li gt           lt li gt             lt a href   Url Action   Index     Products     gt               lt i class  glyphicon glyphicon-tag  gt  lt  i gt  Products            lt  a gt           lt  li gt         lt  ul gt       lt  div gt     lt  div gt   lt  div gt    And the CSS code    logo img   width  100   9    Force IE10 and below to size SVG images correctly   max-width  100       media  max-width 480px      logo img       width  70   9    Force IE10 and below to size SVG images correctly       max-width  70   important        media  max-width 400px      logo img       width  75   9    Force IE10 and below to size SVG images correctly       max-width  75         media  max-width 385px      logo img       width  70   9    Force IE10 and below to size SVG images correctly       max-width  70         media  max-width 345px      logo img       width  65   9    Force IE10 and below to size SVG images correctly       max-width  65         media  max-width 335px      logo img       width  60   9    Force IE10 and below to size SVG images correctly       max-width  60         media  max-width 325px      logo img       width  55   9    Force IE10 and below to size SVG images correctly       max-width  55         media  max-width 315px      logo img       width  50   9    Force IE10 and below to size SVG images correctly       max-width  50         The value in  media  max-width  x  may vary depending on your logo images width  mine is 368px   The percentages may need to be changed as well depending on your logo s size   The first  media query should be your threshold and mine was image width  368px    collapsed button size  44px    about 60px and it came out to 480px which is where I start the responsive image scaling   Please be sure to remove my razor syntax from the HTML portions   Let me know if it fixes your problem  it fixed mine   Edit   Sorry  I missed your navbar height issue   There are a couple ways to go about it  personally I compile the Bootstrap LESS with the appropriate navbar height  for my purposes I use 70px  and my image height is 68 px   The second way to do it is in the bootstrap css file itself  search for   navbar  and change min-height  to the height of your logo

User · Answer

Failing to make any of the other answers work in my case  I probably didn t pass the intelligence test  and after some experimentation  this is what I am using  which I believe is very close to the Bootstrap default        lt div class  navbar navbar-default navbar-fixed-top  role  navigation  gt         lt div class  navbar-header  gt            lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar-collapse  gt               lt span class  sr-only  gt Toggle navigation lt  span gt               lt span class  icon-bar  gt  lt  span gt               lt span class  icon-bar  gt  lt  span gt               lt span class  icon-bar  gt  lt  span gt            lt  button gt            lt div class  navbar-logo  gt               lt a class  navbar-brand  rel  home  href   Url Action  Index    Home    title  Home  gt                  lt img src    Images logo png  class  img-responsive  gt               lt  a gt            lt  div gt            lt div class  collapse navbar-collapse  id  navbar-collapse  gt               lt ul class  nav navbar-nav  gt                  lt li gt  Html ActionLink  Home    Index    Home   lt  li gt                  lt li gt  Html ActionLink  Coaching    Coaching    Home   lt  li gt                  lt li gt  Html ActionLink  Resources    Resources    Home   lt  li gt                  lt li gt  Html ActionLink  Contact    Contact    Home   lt  li gt                  lt li gt  Html ActionLink  Blog    Blog    Home   lt  li gt                  lt li gt  Html ActionLink  About    About    Home   lt  li gt               lt  ul gt            lt  div gt         lt  div gt      lt  div gt    And in the CSS file I have added the following    navbar-brand      padding-top  5px      navbar-collapse      float  left      navbar-logo      float  left      Note that  Html ActionLink   is Razor syntax for an  lt a gt  tag  Where it says  Html ActionLink      just replace it with an appropriate  lt a gt  tag  Equally where it says  Url Action      replace it with an appropriate URL  no  lt a gt  tag in that case

User · Answer

You must use code as this    lt div class  navbar-header  gt       lt button type  button  class  navbar-toggle  data-toggle  collapse               data-target   navbar-ex1-collapse  gt           lt span class  sr-only  gt Toggle navigation lt  span gt           lt span class  icon-bar  gt  lt  span gt           lt span class  icon-bar  gt  lt  span gt           lt span class  icon-bar  gt  lt  span gt       lt  button gt       lt a class  logo  rel  home  href     title  Buy Sell Rent Everyting  gt           lt img style                 src   img transparent-white-logo png  gt       lt  a gt   lt  div gt    Class of A tag must be  logo  not navbar-brand

User · Answer

lt div class  navbar-header  gt       lt button type  button  class  navbar-toggle  data-toggle  collapse               data-target   navbar-ex1-collapse  gt           lt span class  sr-only  gt Toggle navigation lt  span gt           lt span class  icon-bar  gt  lt  span gt           lt span class  icon-bar  gt  lt  span gt           lt span class  icon-bar  gt  lt  span gt       lt  button gt       lt a class  navbar-brand  rel  home  href     title  Buy Sell Rent Everyting  gt           lt img style  max-width 100px  margin-top  -7px                src   img transparent-white-logo png  gt       lt  a gt   lt  div gt

User · Answer

You might try using  media query such as below   Add a logo class first  then use  media to specify your logo height and width per device size  In the example below  I am targeting devices which have a max width of 320px  iPhone  You can play around with this until you find the best fit  Easy way to test  Use chrome or Firefox with inspect element  Shrink your browser as far as possible  Observe the logo size change based on the  media max width you specify  Test on iPhone  android devices  iPad etc to get the desired results    logo     height  42px    width  140px      media  max-width 320px      logo     height  33px    width  110px

User · Answer

I had the same problem  I solved it like this    lt a href     class  btn btn-link navbar-btn  gt     lt img class  img-responsive  src     gt   lt  a gt    There is no navbar-brand class  The result looks like logo picture that fits navbar and works like a link  Also I recommend  to use navbar-right class for the menu items so they won t go below the logo    lt div class  collapse navbar-collapse navbar-right  gt     lt ul class  nav navbar-nav  role  navigation  gt       lt li gt  lt a href     gt Item1 lt  a gt  lt  li gt       lt li gt  lt a href     gt Item2 lt  a gt  lt  li gt     lt  ul gt   lt  div gt

User · Answer

Another approach is to implement Bootstrap s built-in  text-hide class alongside of  navbar-brand to replace the brand text content with a background image   CSS     navbar-brand     background  url http   example com your-logo-here png  center   contain no-repeat    width  200px      HTML    lt a class  navbar-brand text-hide  href     gt Navbar Brand lt  a gt    This is a very consistent method and keeps your image centered  To adjust the size of the image all you need to do is adjust  navbar-brand width since the height is already set   Here s a live demo

User · Answer

my working code - bootstrap 3 0 3  when navbar-toggle  hidden-xs original logo image        lt a class  navbar-brand hidden-xs  href   lt    g4  path    gt    gt       lt img src   lt    g4 path   gt  images logo opencode gif  align absmiddle alt  brand logo  gt       lt  a gt        lt a class  navbar-brand navbar-toggle  href   lt    g4  path    gt    style  border 0 margin-bottom 0   gt       lt img src   lt    g4 path   gt  images logo opencode gif  alt  brand logo  style  width 120px   gt       lt  a gt

[css] Bootstrap 3 Navbar with Logo

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to navbar