Bootstrap full responsive navbar with logo or brand name text

Question

I would like to do a full responsive navbar with specified height in Twitter Bootstrap 3 1 1  where the brand could consists of image  logo  or text    html    lt nav 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  data-toggle  collapse                      data-target   bs-example-navbar-collapse-1  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     gt                   lt img src  http   placehold it 150x50 amp text Logo  alt    gt               lt  a gt           lt  div gt            lt div class  collapse navbar-collapse  id  bs-example-navbar-collapse-1  gt               lt ul class  nav navbar-nav navbar-right  gt                   lt li gt  lt a href     gt About lt  a gt  lt  li gt                   lt li gt  lt a href     gt Services lt  a gt  lt  li gt                   lt li gt  lt a href     gt Contact lt  a gt  lt  li gt               lt  ul gt           lt  div gt       lt  div gt   lt  nav gt    css   body       margin-top  125px      navbar-fixed-top  nav       padding  15px 0      The problem is that after the browser s window size is decreased and menu is collapsed  navbar returns to its original height and logo image is as below       The other problem is that changing  lt img src  http   placehold it 150x50 amp text Logo  alt    gt  into  lt h3 gt AppName lt  h3 gt  makes that AppName is not in the middle     Currently it is centered by setting padding values  but I do not know how to make it independent from it   Does anyone could help me solve this problem   Regards  EDIT   Here are prepared images of effect that I want to achieve   not collapsed navbar with logo image      collapsed navbar  the same height of navbar  the same size of image  but different width od navbar      not collapsed navbar with brand name text     collapsed navbar  everything is the same except width of navbar caused by changing browser s window width

User · Answer

Best approach to add a brand logo inside a navbar-inner class and a container  About the  lt h3 gt  issue  lt h3 gt  has a certain padding given to it in bootstrap as  creimers told  And if you are using a bigger image  increase the height of navbar too or the logo will float outside    lt nav class  navbar navbar-inverse navbar-fixed-top  role  navigation  gt   lt div class  navbar-inner  gt   lt  --changes made here-- gt       lt div class  container  gt            lt div class  navbar-header  gt               lt button type  button  class  navbar-toggle  data-toggle  collapse                      data-target   bs-example-navbar-collapse-1  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     gt                   lt img src  http   placehold it 150x50 amp text Logo  alt    gt               lt  a gt           lt  div gt            lt div class  collapse navbar-collapse  id  bs-example-navbar-collapse-1  gt               lt ul class  nav navbar-nav navbar-right  gt                   lt li gt  lt a href     gt About lt  a gt  lt  li gt                   lt li gt  lt a href     gt Services lt  a gt  lt  li gt                   lt li gt  lt a href     gt Contact lt  a gt  lt  li gt               lt  ul gt           lt  div gt       lt  div gt   lt  div gt   lt  nav gt

User · Answer

If you want to achieve this  you can resize the window to see how it will look for mobile version   all you have to do is to have 2 logo images  1 for desktop and one for mobile  and display them depending of the enviroment using visible-xs and hidden-xs classes   So i used something like this    lt img class  hidden-xs  src  http   placehold it 150x50 amp text Logo  alt    gt   lt img class  visible-xs  src  http   placehold it 120x40 amp text Logo  alt    gt     And ofcourse  i styled the mobile logo using    media  max-width  767px          navbar-brand           padding  0                      navbar-brand img           margin-top  5px          margin-left  5px            You can see all the code here  In case you need a text on mobile version insted of the logo  it s not a big deal  Just replace the logo with a  lt h1 class  visible-xs  gt AppName lt  h3 gt  and change the style inside the media query like this    media  max-width  767px          navbar-brand           padding  0                      navbar-brand h1            here add your style depending of the position you want the text to be placed            EDIT   You need this conditions to make it work    navbar-toggle      margin  23px 0       navbar-nav   navbar-nav li   navbar-nav li a     height  80px    line-height  80px      navbar-nav li a     padding-top  0    padding-bottom 0

User · Answer

I checked and it worked for me    lt div class  collapse navbar-collapse  id  bs-example-navbar-collapse-1  style  margin-top 100px   gt  lt  --style with margin-top according to your need-- gt           lt ul class  nav navbar-nav navbar-right  gt               lt li gt  lt a href     gt About lt  a gt  lt  li gt               lt li gt  lt a href     gt Services lt  a gt  lt  li gt               lt li gt  lt a href     gt Contact lt  a gt  lt  li gt           lt  ul gt       lt  div gt

User · Answer

I set  navbar-brand   min-height  inherit   which solved the issue for me  thanks  creimers for inspiration

User · Answer

Just set the height and width where you are adding that logo  I tried and its working fine

User · Answer

The placeholder image you re including has a height of 50px  It is wrapped in an anchor   navbar-brand  with a padding-top of 15px and a height of 50px  That s why the placeholder logo flows out of the bar  Try including a smaller image or play with the anchor s padding by assigning a class or an id to it wich you can reference in your css   EDIT Or remove the static height  50px from  navbar-brand  Your navbar will then take the height of its highest child   h3 in bootstrap by default has a padding-top of 20px  Again  it is wrapped with that padding-top  15px anchor  That s why it s not vertically centered like you want it  You could give the h3 a class or and id that resets the margin-top  And the same you could do with the padding of the anchor   Here s something to play with  http   jsbin com jelec 1 edit html output

[twitter-bootstrap] Bootstrap full responsive navbar with logo or brand name text

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to responsive-design

Examples related to navbar