Adjusting the window size to see the responsive sidebar menu in Bootstrap 4

I am attempting to transform the left sidebar into a small icon (=more settings) when the window is resized for smaller devices.

Problem:

My code displays an overlap of two columns when the window is resized to medium size. How can I resolve this overlap issue using primarily Bootstrap 4? Removing the navbar class and collapse eliminates the overlap, but I want to keep these features intact. Thank you for your assistance.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>


<div class="row no-gutters" style="margin-left: 15px;margin-right: 15px;">
        <div class="col-sm-2">
            <nav class="navbar navbar-expand-lg navbar-expand-md navbar-expand-sm">
                <button id="filter_control" class="navbar-toggler" data-target="#filter_container3" data-toggle="collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <p><i class="fas fa-sliders-h" style="padding-right:5px;"></i>=More Settings&nbsp;</p>
                </button>
            <!--collapse for filter and flex-column to make narrow column-->
                <div id="filter_container3" class="collapse navbar-collapse" style="margin-top:50px;">
    
                    <div class="list-group text-secondary">
                        <a class="list-group-item list-group-item-action" href="404.html"><span>Account</span></a>
                        <a class="list-group-item list-group-item-action" href="account.html"><span>Subject</span></a>
                        <a class="list-group-item list-group-item-action"><span>Class</span></a>
                        <a class="list-group-item list-group-item-action"><span>Schedule</span></a>
                        <a class="list-group-item list-group-item-action"><span>Log</span></a>
                        <a class="list-group-item list-group-item-action"><span>Billing</span></a>
                    </div>
                </div>
            </nav>
        </div>
    
    
    <!--mid col-->
        <div class="col-12 col-sm-10">
            <div class="row no-gutters" style="margin-top:25px;">
...

cssbootstrap-4navbar

Answer №1

If your content is overflowing the parent column, you can adjust the font size, padding, or both to fit better. Consider adding these adjustments within a media query for specific screen widths. Here's an example:

nav .list-group-item {font-size:12px; padding:.75rem .75rem;}

You could also give the .list-group and .list-group-item a width of 100% for a cleaner look. This step is optional but can enhance the layout visually. Here's how you could do that:

nav .list-group {width:100%;}
nav .list-group-item {width:100%; font-size:12px; padding:.75rem .75rem;}

Here's your snippet with the updated styling:

nav .list-group {width:100%;}
nav .list-group-item {width:100%; font-size:12px; padding:.75rem .75rem;}

To improve responsiveness, consider adjusting the column widths at smaller screen sizes. Instead of using just col-sm-2 and col-sm-10, you could try col-md-2 col-sm-3 and col-md-10 col-sm-9. Here's an updated snippet with this change:

<div class="row no-gutters" style="margin-left: 15px;margin-right: 15px;">
    <div class="col-md-2 col-sm-3">
        <nav class="navbar navbar-expand-lg navbar-expand-md navbar-expand-sm">
            <!-- navigation content -->
        </nav>
    </div>
    
    <div class="col-12 col-md-10 col-sm-9">
        <!-- main content columns -->
    </div>
</div>

I hope these suggestions help you achieve the desired layout and responsiveness.

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

Is Glyphicons functional in Bootstrap 4?

Yesterday, I downloaded the latest version of bootstrap (version 4) and to my surprise, I noticed that the fonts folder was nowhere to be found. Additionally, I realized that glyphicon was not included in the css. ...

twitter-bootstraptwitter-bootstrap-3bootstrap-4glyphicons

jQuery's draggable and resizable functionality with containment provisions is designed to

I'm struggling to create a resizable and draggable div using jQuery, but it's proving to be quite buggy in its implementation. Despite finding similar questions, I haven't come across a solution yet. How can I fix the containment bug when ...

javascriptjquerycssjquery-ui

Is there a way to retrieve text from within a div using code behind in asp.net with c#?

I am currently developing a SQL QUERY editor where users can enter queries. The entered text is then passed to a SQL COMMAND for execution, and the results are displayed to the user in a GRIDVIEW. However, I am facing an issue in retrieving the text entere ...

javascriptc#htmlcssasp.net

An unusual visual glitch is spotted in a complex parallax image with multiple layers

Currently, I am working on a section featuring a parallax scrolling effect with multiple layers of PNG images. Check it out here: As you scroll down the page, you can observe a cool 3D effect. Users on Chrome, Opera, or Edge browsers may notice a graphi ...

htmlcssparallaxastrojs

Utilizing the default validation in Bootstrap 4 to ensure proper email format in form submissions

Can anyone assist with validating an email form field using Bootstrap 4 without the need for any additional libraries? I believe it might require a simple JavaScript function at the end of the document to check if the fields match. Any guidance on this mat ...

javascriptbootstrap-4

Transforming the primary image to the thumbnail image when hovering over it with JSON objects

Currently, I am facing an issue with my single-page web application project that involves using jQuery, JSON Bootstrap. So far, I have successfully created a category page, product selection page, and item page. The problem arises on the item page where ...

javascriptjqueryjsonajaxbootstrap-4

Troubleshooting Vue.js rendering problems on Safari_BROWSER

I'm encountering a strange issue with my portfolio website, which is built using Vue and Laravel. The problem arises specifically in Safari - the project thumbnails don't display until the browser window is resized. Here's the relevant code ...

htmlcsslaravelvue.js

Add content to the beginning of the input with the assistance of bootstrap. However, ensure that when utilizing "form-group row", the content is shifted

I am experiencing an issue with my Bootstrap 4 form. I am using the 'form-group row' class to display labels and inputs on the same line, but when I try to prepend a $ sign before an input, it shifts the input to the next line. Below is the code ...

htmlcssbootstrap-4

Enhance your horizontal stacked bar chart in chart.js by incorporating inner labels with the help of the 'chartjs-plugin-labels' plugin

Currently, I have integrated a package that allows me to incorporate labels into my charts - import * as pluginDataLabels from "chartjs-plugin-labels"; While it works perfectly fine with line charts, pie charts, and normal bar charts, I am facin ...

javascripthtmlcsschartsstacked-chart

Is there a way for me to incorporate a feature that lets the user specify the URL based on their input in a search box?

Currently, I am working on a project that involves creating two text fields for user input, along with a "View Report" button. My goal is to have the button redirect users to a specific URL structured like this: http://example.com/reports/example/reports/ ...

javascriptjqueryhtmlcss

Display one div and conceal all others

Currently, I am implementing a toggle effect using fadeIn and fadeOut methods upon clicking a button. The JavaScript function I have created for this purpose is as follows: function showHide(divId){ if (document.getElementById(divID).style.display == ...

javascriptajaxhtmlcss

Tips for selecting specific regions on an Angular SVG map

For my Angular TypeScript project, I included a map. Does anyone know how to create a select region on the map? Click here for StackBlitz Here is the jsFiddle code link CSS styles here p { font-size: 12px; } #core { fill: #ff4f81; animatio ...

htmlcssangulartypescript

Switch out either even or odd divs within a container

I need help figuring out how to alternate the background colors of divs within a container. I want the first one to have a red background, the second to have blue, the third red again, and so on... Here is the code I currently have: <div>...</di ...

jquerycss

Customizing active-class in Vuetify

How do I customize the appearance of my v-list-item-group when it is in the active state? <v-list> <v-list-item-group v-model="day" color="green"> <v-list-item v-for="(item, i) in items" :key="i"> <v-list-item-content& ...

cssvue.jsvuejs2vuetify.js

Utilize Flexbox to occupy the rest of the available space

I would like the center row to occupy the entire browser width just like typical websites. Even if there is minimal content, I want the middle row to fill up the whole space. Below is the CSS code: @import "compass/css3"; .wrapper { display: -webkit-b ...

cssflexbox

Switch the style of the anchor tag using JavaScript

I need assistance with modifying a list on my webpage. Here is the current structure: <ul id="breadcrumbs" class="breadcrumbs-two"> <li><a href="#" class="current" id="a1">Step1</a></li> <li><a href ...

javascriptjqueryasp.netcss

Creating a custom CSS clip to apply a rounded path on an image

I have been experimenting with applying a "clip path" to an image using a rounded path. While I am aware that SVG clip paths are an option, I found them to be less responsive. As an alternative, I attempted to place the SVG graphic under the image within a ...

htmlcsssvg

Is it possible to activate the :active pseudoclass by pressing the 'enter' key on the keyboard using solely CSS?

The CSS: a:focus { opacity: .75 } a:active { transform: translateY(4px) } The purpose: When keyboard users tab to the link, the :focus style serves as a visual indicator Upon pressing the enter key to activate the link, the :active style provides ...

javascriptjquerycssaccessibility

Utilize a combination of two distinct font styles in TCPDF

Within the following code snippet, I am utilizing two fonts: "fruit" and "fruit bold." However, when I apply both fonts, the entire page appears in bold text. What I actually want is to use them selectively - for example, displaying "hello" in the "fruit ...

phphtmlcsstcpdf

Having trouble getting your Raspberry Pi web server to display the background image?

Recently, I successfully set up a LAMP server on my raspberrypi which was quite exciting. One of the first things I did was configure an FTP server to transfer webpage files to the Pi. I managed to create a basic form of the final webpage and transferred i ...

htmlcsswebwebserver