Image that extends beyond navbar

So I am unsure of the exact way to word this so I will give an example.

I am wondering if it is possible to use Bootstrap to create a navbar that has an image that extends beyond the navbar but is fixed and a part of it similar to the Eagle on the site I linked.

Short anwser: Yes

Quick and dirty

  • Search for "nav" in components
  • drag/drop navbar and set to "Fixed to top"
  • drag/drop nav onto navbar
  • select second nav and set it's alignment to right
  • search for "image"
  • drag/drop image before or after the "BRAND" word
  • remove the "BRAND" word
  • double click on the image and import and select the image you want
  • if the image is huge set a width that is reasonable in size (I used 150px for test)


body {

.navbar-brand.navbar-link {
  left:calc(50% - 75px);

#navcol-1 {

Add some Carousel and Heros to fill in body space to test.

You would obviously need to do a bit more for it to be styled how you want but this just shows you it can be done.