Finding the reason for an element format

Bootstrap Studio Help
1

Hi, I’m new to Bootstrap Studio so I apologise if this is a simple question, but I’ve been looking at it for a couple of hours now, trying different things, but I still cannot work it out.

I have a navbar that changes from a list of menu items to a hamburger menu image, a nav-bar-toggler, when the width is small enough. When this happens the toggler box does not sit against the right side of the window, as I want it to do, it sits up to about 1/4 of the way in from the right. As I narrow the window it doesn’t move until the right side gets very close close, then jumps further left.

I’ve looked at the nav-bar-toggler “Styles” section but can see nothing that indicates why it is doing this. It’s clearly not a maximum width issue as the toggler would move as the window is narrowed.

Nor does it seem to be a problem with the navbar itself as that stays at the maximum width of the window, although I haven’t yet ruled out some placement setting attribute.

I suspect that it’s some class that has been applied to the toggler, there’s five classes assigned to it, but I cannot see anything in the displayed attributes that might cause this position.

Finally, I don’t know of a better way of showing you this problem than describing it :frowning:

This brings about a couple of questions, if you would be so kind:

  1. Any suggestions on where to look to resolve this positioning issue?
  2. Any general recommendations for troubleshooting website design while using Bootstrap Studio? I’ve using both the software and Chrome with the developers panel open to try and work out the location of the problem.
  3. How best can I show you the problem I am having, given that I cannot publish the site because if I did I’d wipe out the working version (that isn’t written using Bootstrap Studio?

Thanks for your time and help.

|\/|artin

2

Hiya @Parthe and welcome to the forums!

Bootstrap Studio (BSS) gives you 5 (I think it’s 5, someone will correct me if not lol) sites you can upload to their server for free to use or to test with. If you upload it that way you can provide us a link that we can view the site with and be able to see the code that way too.

Also it would be good to let us know what Navbar you are using, if it’s one of the default ones that is in the UI or if you created it from scratch or if you got it from the online components let us know which one.

And again welcome!

3

Thanks for the response Jo, I have uploaded the site to:

https://mute-hat-0632.bss.design/

The navbar is one of the defaults, or at least it is included in Bootstrap Studio, I am unsure which name you want though.

I can tell you that it is available in the components section, in the UI section, and has the name “Navigation”. The object is titled “navbar”. The HTML classes it uses are:

  • navbar
  • navbar-dark
  • navbar-expand-lg
  • navigation-clean-search

No idea if this information is useful though.

4

The navbar is wrapped around a ‘container’ which gives it a large margin.
Set it to ‘container-fluid’ by selecting your navbar in the ‘Overview’ tab on the left and then select ‘Options’ tab on the right and turn on ‘Fluid’

5

somewhere in your custom css you have:

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
     width: 100%;  
      margin-right: 0;  
      margin-left: 0;  
}

getting rid of this should sort the problem

Also if you want it full width change the container to container-fluid as windy said.

6

Also keep in mind that BSS and Bootstrap work in Mobile First mode so you really don’t need to list all of those container settings. You can do just the .container to be the XS size, and then create a media query for SM size and that’s all you need. The rest will follow the previous size smaller so from MD on up it will be whatever settings you give to the SM size. That’s for anything, not just this container. And as already mentioned you don’t really need this container, but thought I’d point out the Mobile first setup so it would be easier on you as you go. :slight_smile:

7

Windy’s suggestion. Change to container-fluid. :ok_hand:

8

Thank you all for the suggestions. Windy’s response was exactly what I needed.

I will bear your statement in mind BSS @jo-r, I wasn’t actually aware that Bootstrap works in a mobile-first mode so that’s yet another learning curve for me :slight_smile: