Text overflow happening in Bootstrap 4 fixed-top navbar

Hey there, I have a question that might sound newbie. I want to create a fixed side navigation bar using bootstrap 4. When I add the 'fixed-top' class, it does fix the position but the text in my navbar overflows and looks messy:

https://i.sstatic.net/QT4By.jpg

On the other hand, without the 'fixed-top' class, it looks fine (but doesn't stay in place when scrolling):

https://i.sstatic.net/4fYH6.jpg

Can anyone point out what mistake I am making?

You can check out the simple example on jsfiddle, or see the code below:

<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>

Thank you!

htmlcssbootstrap-4

Answer №1

fixed-top, as the name implies, is designed for navbars positioned on the "top" and not the "left".

If you want to achieve a fixed position for your navbar, simply adding classes won't work. You need to apply the following CSS properties:

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

You also need to offset the content column by the width of sidebar since a position:fixed element is taken out of the document flow, otherwise they will overlap.

Here is an example:

.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>

Take note of the offset-0 offset-sm-2 classes on the content column. Additionally, I removed p-0 from the sidebar as it was unnecessary in this context.

It is generally advised to have a fixed width sidebar for better UI experience, typically ranging between 210 and 290px for regular sidebars, and 45 to 95px for text-less sidebars.

An alternative left sidebar template can be found here. Please note that I am not endorsing it, but in terms of UI design, it appears to be superior to the "Dashboard" example featured on Bootstrap's website which has a similar UI issue to yours when viewed at certain widths.

Answer №2

Check out this solution for your issue:

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

When the navbar is fixed, it no longer follows the normal flow and its width is not limited by the sidebar column. To address this, you can use the following code:

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

This will ensure that the navbar has the same width as your col-sm-2 sidebar.

To handle the situation when the grid collapses to a single column, add the following code:

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

With this code, the navbar will return to its original position when the bootstrap grid collapses to a single column. This will make the menu appear above the main content and scroll with the rest of the page.

I hope this information proves helpful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Loading identical items using jQuery Ajax

I have a situation where an ajax request is returning multiple URLs which I am using to create images like: <img URL="1" /> <img URL="1" /> <img URL="2" /> <img URL="1" /> <img URL="3" /> <img URL="2" /> and so on... ...

javascriptjqueryhtmlajax

What is the process for creating a stationary container positioned on the left side, which extends vertically down the page to showcase a collection of skills?

Hey there, I'm a newcomer to web development. For my very first project, I'm working on a resume page. I'm looking to have a fixed left div where I can showcase my skills, and a larger div on the right side for the main body content containi ...

htmlcssbootstrap-5

JavaScript/HTML5/jQuery Drag-And-Drop Upload - "Error: Unable to access the 'files' property"

Just a heads up, my JavaScript skills are pretty limited. Here is the current JavaScript code I have: $('#xhr-filebox').bind({ "dragover": HandleDragEvent, "dragleave": HandleDragEvent, "drop": HandleDropEvent }); function HandleDr ...

javascriptjqueryhtmlfile-uploaddrag-and-drop

Limiting the style of an input element

How can I mask the input field within an <input type="text" /> tag to restrict the user to a specific format of [].[], with any number of characters allowed between the brackets? For example: "[Analysis].[Analysis]" or another instance: "[Analysi ...

javascriptjqueryhtml

Uncovering website content with Selenium: unlocking the mysterious origins of the text

Currently, I am utilizing Selenium and Python to scrape a website. My goal is to extract specific text from a particular page. Despite successfully navigating to the desired page, every attempt at using methods such as driver.find_elements_by_id(), driver. ...

pythonhtmlseleniumweb-scraping

Allowing the primary content to span the entire width of the mobile screen

I have scoured various forums in search of answers, but unfortunately, I haven't found a solution that fits my specific query. I am looking to ensure that the .main-content (article text and images) occupies the full width of the mobile screen without ...

javascripthtmlcssmobileresponsive

Tips for extracting information from a URL and processing it on a webpage

Looking to pull data from a website using AngularJS. My main project is to create a "shipping cart" page. The resource provided is a URL leading to a webpage with information on a specific product. I need to extract this data and integrate it into my pag ...

javascriptangularjsjsonhtml

Converting form input to JSON and then parsing it into an object

I'm currently working on converting form data to update a JSON object upon submission. Here's my progress so far: var app = { slidePreviews: "", selectedTheme: "", slideDuration: 7000, slides: [] }; $(document).ready(function() ...

javascriptjqueryhtmlforms

Connecting table checkboxes to buttons in Angular 4.x: A step-by-step guide

Exploring Angular 4.x for the first time and faced with a challenge. I have created an HTML table where each row contains a checkbox and buttons. My goal is to link the checkboxes with the buttons in such a way that when a checkbox is checked, the correspo ...

htmlangularcheckbox

Creating HTML or PHP pages using jQuery

Is it possible to generate a file using jQuery? I am creating a website maker. On the left side, I have a list of elements such as: ---------------------------------------------------------------- Elements Attri ...

phpjavascriptjqueryhtml

Transform an array of strings into an array of floating point numbers using AngularJS

Hey everyone! I'm having trouble converting an array of strings into floats. When using map(parseFloat), I'm only getting integer numbers. Could the issue be with the commas in 40,78 causing parseFloat to interpret it as 40 instead of 40.78? Her ...

javascripthtmlangularjsarraysfloating-point

How can you determine the CSS style value based on a different value?

Can I calculate a value based on another value? Here's an example: .my-div { width: 50px; height: calc(width * 2) } Is this doable? ...

css

Filling an HTML template with an $http response in VueJS

After learning about VueJs, I decided to embark on a small project - a nutrition app where food recommendations are made based on specific nutrients. Below is the JavaScript code snippet: recommendFood: function() { this.recs = {}; ...

javascripthtmlhttppromisevue.js

Include a proximity button onto the tabs

Currently, I'm diving into learning Bootstrap and one thing I'd like to implement is having an x next to each tab name for easy closing: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__ ...

htmlcssbootstrap-5

What could be causing the absence of a background image in CSS?

When I try to view my local desktop file, the CSS background image isn't showing up. Here's the code I'm using: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" text="type/css" href="dis ...

htmlcss

Expanding the background color of a Div within a Grid System

Note: Utilizing the skeleton grid system. I'm trying to expand the background color of a specific div beyond the 960px container, but I'm facing some difficulties. Any ideas? Current: Desired outcome: HTML: <!DOCTYPE html> <!--[if l ...

csshtmlgridskeleton-css-boilerplate

Check for the presence of a horizontal scrollbar on the page for both computer and mobile devices

Is there a way to determine if a web page has a horizontal scrollbar using jQuery or pure JavaScript? I need this information to dynamically change the css of another element. I initially tried function isHorizontalScrollbarEnabled() { return $(docum ...

javascriptjqueryhtmlcross-browserscrollbar

Switching between vertical and horizontal div layouts while reorganizing text fields within the top div

function toggleDivs() { var container = document.querySelector(".container"); var top = document.querySelector(".top"); var bottom = document.querySelector(".bottom"); if (container.style.flexDirection === "column") { container.style.flexDirec ...

javascripthtmlcss

Issues persist with jQuery ajax request attempting to retrieve data from database

I attempted to retrieve data from my database using jQuery AJAX. Below is the code snippet I used: <script> $(document).ready(function(){ function fetch_data(){ $.ajax({ type:"POST", url:"http://localhost:88/phpPoint/select.php", success:function(re ...

javascriptphpjqueryajaxhtml

Using `require` in place of `script` tags in a three.js file when working with Node.js environment

Instead of using the html script tag, I have implemented javascript require in my three.js file for node.js. Here is a snippet from an html file: <script src="../build/three.js"></script> <script src="js/controls/DragControls.js"></s ...

javascripthtmlnode.jsthree.jsbrowserify