Proper component for a banner that doesn't cover navbar

Brand new to Bootstrap (and Studio).

I just started a little project that I thought was going to be simple, which I’m sure it is for someone with a little more experience. What I’m trying to do is create this (I just created this mockup in Figma):

This is what I have in Bootstrap Studio so far:

Now this is where I’m stuck. I don’t know what component to use to get the 3 horizontal blue bars. I’m just starting with this 1st one (the large one on top that will have a logo and maybe an icon to the right). What I’ve been trying is various ‘banners’ and ‘navbars’, but there’s always a problem with them.

For instance, with the ‘banners’, I can’t seem to drop them where I want - the very top of the page, and extend all the way to the right, and end on the left where it meets the side navigation bar. This is where it ends up when I drag it onto my page:

Then we have the navbar. It gets put in the proper position and looks great…except that it covers my navigational sidebar:

I’ve watched several Bootstrap Studio videos on YouTube, but I haven’t come across anything that shows how to do what I’m trying to do yet. However, it seems like it should be so simple, but my inexperience in Bootstrap is keeping me from doing this.

Any help would be greatly appreciated.

Thank you,
Jamie

1 post - 1 participant

Read full topic