Proper component for a banner that doesn't cover navbar

Bootstrap Studio Help
1

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):

image
image1163×698 18.4 KB

This is what I have in Bootstrap Studio so far:

image
image1876×893 66.6 KB

(Basically just the side navigation bar, which took me a heck of a long time actually)

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:

image
image1889×947 86.2 KB

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

image
image1888×899 80.5 KB

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

2

something like this:

https://domiflichi.bss.design/

I set up an aside and main component, the navbar you have already created would go in the aside, the rest of your page in the main.

The CSS used:

:root {
  --sidebar-width: 80px;
}

body {
  display: flex !important;
  overflow: hidden;
  height: 100vh;
}

aside {
  width: var(--sidebar-width);
  background: var(--bs-secondary);
  height: 100dvh;
}

aside ul {
  padding: 0;
  list-style: none;
}

main {
  min-height: 100dvh;
  width: calc(100vw - var(--sidebar-width));
  overflow-y: auto;
}
3

Hi @richards .

Thank you for the info and example! I was hoping I could avoid getting into CSS too much using Bootstrap Studio, but if that’s what it takes, then I’m fine with that. I’ll dig in, explore and continue learning with your example. Thank you again!

Jamie

4

The BSS file is available to download here.

https://dropover.cloud/bcd2ffc4fdb81f8a277ee8c8c1bd0831

I’ve also added some css so if you want the header to stay fixed. Just uncomment the CSS at the bottom

1 Like
5

Keep in mind that many times, CSS can be added using Bootstrap utility classes. Some things for which there are no utility classes can be done via the appearance panel, which will generate inline CSS (write the code for you) and all you have to do is export the inline CSS to your custom stylesheet(s).

For example, in @richards example you can select the body component, go to the Attributes panel, click in the Class Names field and type d-flex overflow-hidden vh-100 and it will add the same CSS to the body as this…

body {
  display: flex !important;
  overflow: hidden;
  height: 100vh;
}
6

Thank you so much @richards and @printninja for the extra information and tips…every little bit helps me!