Navbar Centered Option or Boxed Layout Look?

Hello+ I'm new and have a few questions about how to get the navigation to center on the website. I have "navbar" styled to "Default" & position to "Fixed to top" & Fluid un-checked; I have "nav" alignment to "right". This seems to do most of what I would want, however, I would like the Boxed Layout look so I don't want the navigation to extend beyond the left/right sides of the content on the site (in any view: mobile, laptop, etc.) I have used the "container" with CSS to limit the max-width: 940px; this gives everything inside of it that Boxed Layout look...Except the Navigation is not following this rule (everything is inside this container, including all of the navbar, nav, dropdown, etc.)...I'm not sure what I'm missing to get that navigation to center at the top of the page and to not extend beyond the 940px....Please advise. Thank you, +ES

Okay, I asked too soon... I figured it out! :) I made the container for the navbar max-width: 940px and now the navigation does not extend further than the content (left/right)!

I realize you resolved your issue but I just want you to keep in mind that when you set an element's position to "fixed" or "absolute" or you "float" it you set the element to be removed from the normal flow of content. Depending on which you do some or all of the restraining characteristics may no longer apply.

When you set the navbar to "Fixed to top" it no longer is constrained by the width of the .container so you would have to specify CSS to restrict the navbar separately like you said you did.

Just something to help you understand what happened :)

Saj

Hi, Saj+

Thank you for this explanation - very helpful! I had placed a .container.all {max-width: 940px;} around everything to get the boxed layout, but the navigation did not respond. As you indicated that is due to me making it "Fixed to top"... Then I noticed a "container" inside the "navbar" (which I did not create, and I assume that is part of the Navbar code-set), and when I set .container {max-width: 940px;} the navigation was constrained to that boxed layout look as well. I say all of this to lead up to my next few questions - Do I need to have the "navbar" inside that first "container" (.container.all) or is it better coding practices to have it outside? Also, should I name that second "container" as this website is more than one page?

Thank you, +ES

Update: I moved the "navbar" outside of the "container" (.container.all) and it still shows constrained inside the boxed layout. However, on the 768px preview the navigation now double stacks to 2 lines - not what we want. I have Alignment: Left for 1200px and 1024px. I would like to try Alignment: Right for the 768px only to see if that looks better - how do I set it only for that smaller view? (I have watched the YouTube video "Creating a Website with Bootstrap Studio (Tutorial)" a dozen times, but I'm just not seeing how to do this.) Please advise. Thanks.

Ok, I'm glad you got it worked out.

It is fine to have an all encompassing .container for all your site's content with in it. I would say it depends on how you want your page to work out in whether or not you have sections broken out to have separate containers. You only would need just the one though. The navbar though is the only component that appears to need/use one as well. If you use .row elements, those need a .container element but the all encompassing one works for that.

I don't think it's necessary for you to do anything else with the second container.

GOOD

<body>
    <div class="container all">
        <*nav class="navbar navbar-default">
            <div class="container">
                .....
            </div>
        <*/nav>
        <section>
            <div class="row">
                <div class="col-md-12">
                    ....
                </div>
            </div>
        </section>
    </div>
</body>

GOOD

<body>
    <*nav class="navbar navbar-default">
        <div class="container">
            ....
        </div>
    <*/nav>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                ....
            </div>
        </div>
    </div>
</body>

BAD

<body>
    <*nav class="navbar navbar-default">
        <div class="container">
            ....
        </div>
    <*/nav>
    <div class="row">
        <div class="col-md-12">
            ....
        </div>
    </div>
</body>

Saj

Sound like you have to many nav items to fit. It seems tablet size (768px) it can only accommodate 7 nav items using the default wording for Brand/First Item etc... ending with Sixth Item.

For aligning it you could do something like this... but it doesn't effect the Brand item though if you have one.

@media (max-width: 768px) and (min-width: 426px){
 .navbar-nav {
    float: right !important;
 }
}

To do this in the app, in the Design pane on the bottom right of the app. Click on to Styles to expose the stylesheets and double click on your custom css file or the styles.css this will open it up in the Styles pane in the bottom middle right of the app. To the left of that is the HTML pane. Find and select the UL that has the class navbar-nav. Then click in the CSS on the right to create a new rule. It should make a new rule based on the element you have selected in the HTML pane. Enter in the property "float" hit TAB and enter in "right !important" hit ENTER.

** well boo, forgot to tell you how to add the media query **

So after you add the CSS rule etc.. to the right of the rule are three stacked dots, click that and select Add Media Query. Change from "991px" to "768px" and then at the end type in "and (min-width:426px)".

This should cause the nav to shift to the right when in tablet view but not on phones.

Saj

If you have a Brand and you want that to shift to the right as well, I guess you could do this instead.

@media (max-width: 768px) and (min-width: 426px){
    .navbar .container {
        display: flex;
        justify-content:flex-end;
    }
}

Saj

Wonderful! Thank you so much, Saj!