How do you work with Navbar, two questions

Bootstrap Studio Help
1

For larger widths I have extra space in the margin area (pic is of just a blank page with Navbar added):

image
image1360×768 81.9 KB

So how do I remove the extra space? Translation causes out-of-bounds items such as the navbar brand once the screen shrinks small.

And secondly, how do I adjust when the navbar collapses? Right now it’s set to around:

992px judging by the following screencap:

image
image1360×768 89.4 KB

I tried editing that style by adding a New Stylesheet and changing the number 992px to 450px, and that didn’t do anything.

Does someone have a boilerplate (with nice screensize breakpoints) they can give me? It’s for now an open source project - I’m moving code from Bitbucket to Github for easier deployment to heroku mainly.

Thanks.

2

I think the solution was to check “liquid” on the relevant containers in the options, and then to select an element, Goto Styles > Create Dropdown > Create CSS Block. Then you Click the … in the style and “Add Media Query”.

3

If you target the navbar part of your nav (sometimes it’s the nav, you’ll know when you have the right part of it) you’ll see more Options for your nav such as sticky/fixed/etc., Text Color, Expanded (this is where you tell it what breakpoint you want it to expand), Smart Active State that lets your nave show the active button/link/tab when on that page, Fluid as you already know, and such. This is also where you would change your Background color for the Dark vs. Light, and when you do, you change the Text color to the corresponding color at that time.

Hope that helps, lots of nice settings in the nav area of the Options tab. :slight_smile:

1 Like