CODEWITHSUNDEEP
htmlcssbootstrap-4
Relja Arandjelović
Relja Arandjelović

Reputation: 497

Bootstrap 4 navbar with fixed-top: text overflows

Sorry, probably a noobie question. I'm trying to have a side navigation bar using bootstrap 4, which will be fixed (i.e. when I scroll the page it remains in the same location). Adding the 'fixed-top' class does do it, but the text in my navbar overflows and goes outside of the navbar, looking very ugly:

With fixed-top

Without 'fixed-top', it looks fine (though of course doesn't do what I want it to):

Without fixed-top

What am I doing wrong?

Please see the very minimal example on jsfiddle, or code here:

  <div class="container-fluid">
    <div class="row">

        <div class="col-sm-2 p-0 bg-dark">
            <nav class="navbar navbar-dark px-0 fixed-top"> <!--remove fixed-top and it's fine-->
                    <ul class="nav flex-column navbar-nav">
<li class="nav-item"><a href="index.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="hello.html" class="nav-link">Hello</a></li>
<li class="nav-item"><a href="howdy.html" class="nav-link">Longword and longword</a></li>
                    </ul>
            </nav>
        </div>


        <div class="col-10 bg-primary">

            blalbllala
            blalbllala
            blalbllala
            blalbllala
            <br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br>
            blalbllala
            blalbllala
            blalbllala
            blalbllala
            blalbllala <br>
        </div>
    </div>
</div>

Thanks!

Upvotes: 0

Views: 1438

Answers (2)

David Taiaroa
David Taiaroa

Reputation: 25495

See if this helps you:

http://jsfiddle.net/panchroma/u29bw8gn/

When the navbar is fixed, it's taken out of normal flow, so it's width isn't constrained by the width of the column sidebar, the solution for this is 

@media (min-width: 576px){
  nav.navbar{
      -ms-flex: 0 0 16.666667%;
      flex: 0 0 16.666667%;
      max-width: 16.666667%;
  }
}

This makes the navbar the same width as your col-sm-2 sidebar.

I've also added the following so that everything works well when the grid collapses to a single column 

@media (max-width: 575px){
     nav.navbar{
        position:relative !important;
     }
}

The above code essentially 'unfixes' the navbar when your bootstrap grid collapses to a single column. The result is that the menu is then above your main content and scrolls with the rest of the page.

Hope this helps!

Upvotes: 2

tao
tao

Reputation: 90013

fixed-top, as the name suggests, is not for "left" navbars, but for "top" navbars.

What you want to achieve is not achievable by adding classes to your navbar. You need to apply:

position: fixed;
top: 0;
min-height: 100vh;

to the column and also to offset the content column by the width of your sidebar, as a position:fixed element is taken out of the document flow so if you don't offset the rest, they will overlap.

Here it is: 

.row {
  background: #f8f9fa;
}

@media (min-width: 575px) {
  #sidebar {
  position: fixed;
  min-height: 100vh;
  top: 0;
  }
}
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

  <div class="container-fluid">
    <div class="row">
    
        <div class="col-sm-2 bg-dark" id="sidebar">
            <nav class="navbar navbar-dark px-0"> <!--remove fixed-top and it's fine-->
                    <ul class="nav flex-column navbar-nav">
<li class="nav-item"><a href="index.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="hello.html" class="nav-link">Hello</a></li>
<li class="nav-item"><a href="howdy.html" class="nav-link">Longword and longword</a></li>
                    </ul>
            </nav>
        </div>


        <div class="col-12 col-sm-10 bg-primary offset-0 offset-sm-2">

            blalbllala
            blalbllala
            blalbllala
            blalbllala
            <br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br>
            blalbllala
            blalbllala
            blalbllala
            blalbllala
            blalbllala <br>
        </div>
    </div>
</div>

Note the offset-0 offset-sm-2 classes on the content column. I also removed p-0 from the sidebar. It made no sense in current context.

Another note is that having a sidebar of variable width is generally regarded as bad UI. Most popular UI frameworks and themes feature a fixed width sidebar (in between 210 and 290px for normal sidebars and a 45 to 95px width for no-text sidebars).

A decent left sidebar template seems to be available here. Do note I'm not supporting it in any way, but in terms of UI quality it looks superior to the "Dashboard" example featured on Bootstrap's examples page. ("Dashboard" example has same UI problem as yours: view it between 768px and 1050px wide) and see how it wraps)

Upvotes: 2

Related Questions