Bootstrap 3 Navbar with Logo

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.

29 Answers
29

Leave a Comment