2

I currently have my navbar styled like this to make its background "shrinkwrap" to the width of the content, and no wider:

        <nav class="navbar fw-bold h5 rounded-5 navbar-expand d-inline-flex">
            <div class="container-fluid">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <NavLink class="nav-link" :to="{ name: 'Home' }">Home</NavLink>
                    </li>
                    [...]
                </ul>
            </div>
        </nav>

The default Bootstrap behaviour is to collapse the navbar at a certain preset pixel width, such as at 992px with .navbar-expand-lg:

navbar-large

However, I'd like the navbar to only collapse when the viewport stops being wide enough to house it, like when the horizontal scrollbar appears in the following capture:

navbar-normal

Can this be done with Bootstrap styling? It seems to only be designed to work with the set of fixed pixel width "breakpoints" rather than breaking at the natural content width.

Jez
  • 27,951
  • 32
  • 136
  • 233

1 Answers1

1

You have to pre-define or use the pre-defined values. You can do so even without compiling the sass files if you're willing to settle for the default break points.

From https://stackoverflow.com/a/36289507/3807365 :

<nav class="navbar fixed-top navbar-expand-sm">..</nav>
  • navbar-expand-sm = mobile menu on xs screens <576px
  • navbar-expand-md = mobile menu on sm screens <768px
  • navbar-expand-lg = mobile menu on md screens <992px
  • navbar-expand-xl = mobile menu on lg screens <1200px
  • navbar-expand = never use mobile menu
  • (no expand class) = always use mobile menu

You can also use a custom breakpoint (???px) by adding a little CSS.

For example here's 888px:

@media (max-width: 887.98px) {

    .navbar-expand-my>.container,
    .navbar-expand-my>.container-fluid,
    .navbar-expand-my>.container-sm,
    .navbar-expand-my>.container-md,
    .navbar-expand-my>.container-lg,
    .navbar-expand-my>.container-xl {
        padding-right: 0;
        padding-left: 0
    }
}

@media (min-width: 888px) {
    .navbar-expand-my {
        flex-flow: row nowrap;
        justify-content: flex-start
    }

    .navbar-expand-my .navbar-nav {
        flex-direction: row
    }

    .navbar-expand-my .navbar-nav .dropdown-menu {
        position: absolute
    }

    .navbar-expand-my .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem
    }

    .navbar-expand-my>.container,
    .navbar-expand-my>.container-fluid,
    .navbar-expand-my>.container-sm,
    .navbar-expand-my>.container-md,
    .navbar-expand-my>.container-lg,
    .navbar-expand-my>.container-xl {
        flex-wrap: nowrap
    }

    .navbar-expand-my .navbar-nav-scroll {
        overflow: visible
    }

    .navbar-expand-my .navbar-collapse {
        display: flex !important;
        flex-basis: auto
    }

    .navbar-expand-my .navbar-toggler {
        display: none
    }
}

Finally, if you do compile your sass files (see above) you can add your breakpoint (or change others) for this variable:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  custom: 888px,
  lg: 992px,
  xl: 1200px
) !default;
IT goldman
  • 14,885
  • 2
  • 14
  • 28
  • The point is, I don't want to specify a specific breakpoint width; I want it to break when it gets to the natural content width of the navbar. – Jez Sep 23 '22 at 19:39
  • In that case, I thought about it also, you can detect using javascript, then apply some styles. Is that something you interested? – IT goldman Sep 23 '22 at 19:44
  • Not really, I want a pure CSS solution. I'm sure it's possible. – Jez Sep 23 '22 at 20:02
  • 1
    It's impossible to do what you want without using JavaScript. – Dimitris Maragkos Sep 25 '22 at 22:07
  • I think it's only possible if you using JavaScript next to CSS code. As I know, it's impossible without using JavaScript @Jez – Alex J Sep 27 '22 at 08:47
  • Yeah, ok. I suppose there is no CSS way. It'd need something like a `:would-overflow` pseudo-class. – Jez Sep 28 '22 at 15:11