Image that extends beyond navbar

Bootstrap Studio Help
1

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

http://www.gousieagles.com/

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.

2

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)

CSS

body {
  padding-top:50px;
}

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

#navcol-1 {
  padding-left:0;
}

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.

Saj