Ensuring col-md-10 takes up the maximum width while including a col-md-2 sidebar in Bootstrap 4

Is there a way to add a background color for the nav-header within col-md-10, so that it takes full width even when the sidebar (col-md-2) is closed? I tried wrapping it inside another div but couldn't override the col-md-10 rules. Any suggestions?

<div class="container-fluid">
    <div class="row d-flex d-md-block flex-nowrap wrapper">
        <div class="col-md-2 float-left col-1 pl-0 pr-0 collapse width hidden" id="sidebar">
            <div class="list-group border-0 card text-center text-md-left">

                <a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fa fa-film"></i> <span class="d-none d-md-inline">Item 2</span></a>
                <a href="#menu3" class="list-group-item d-inline-block collapsed" data-toggle="collapse" data-parent="#sidebar" aria-expanded="false"><i class="fa fa-book"></i> <span class="d-none d-md-inline">Item 3 </span></a><a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fa fa-heart"></i> <span class="d-none d-md-inline">Item 4</span></a>
                <a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fa fa-list"></i> <span class="d-none d-md-inline">Item 5</span></a>

            </div>
        </div>
        <main class="col-md-10 float-left">
            <div class="nav-header bg-color">
                <a href="#" data-target="#sidebar" data-toggle="collapse"><i class="fa fa-navicon fa-2x py-2 p-1"></i></a>
                <a href="/" class="navbar-brand"><img src="img/logo.png" height="45" alt=""></a>
            </div>
            <div class="page-header">
                <h2>Bootstrap 4 Sidebar Menu</h2>
            </div>

            <hr>

        </main>
    </div>
</div>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

One potential solution is to use a positioned pseudo-element to simulate a background.

.col-md-10 .nav-header{
  position: relative;

}

.col-md-10 .nav-header::after {
  content:"";
  position: absolute;
  top:0;
  left:0;
  height:100%;
  background: blue;
  width:calc(100vw - 30px);
}


.col-md-10 .nav-header {
  position: relative;
}

.col-md-10 .nav-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: blue;
  width: calc(100vw - 30px);
  z-index: -1
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row d-flex d-md-block flex-nowrap wrapper">
    <div class="col-md-2 float-left col-1 pl-0 pr-0 collapse width hidden" id="sidebar">
      <div class="list-group border-0 card text-center text-md-left">

        <a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fa fa-film"></i> <span class="d-none d-md-inline">Item 2</span></a>
        <a href="#menu3" class="list-group-item d-inline-block collapsed" data-toggle="collapse" data-parent="#sidebar" aria-expanded="false"><i class="fa fa-book"></i> <span class="d-none d-md-inline">Item 3 </span></a><a href="#" class="list-group-item d-inline-block collapsed"
          data-parent="#sidebar"><i class="fa fa-heart"></i> <span class="d-none d-md-inline">Item 4</span></a>
        <a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fa fa-list"></i> <span class="d-none d-md-inline">Item 5</span></a>

      </div>
    </div>
    <main class="col-md-10 float-left">
      <div class="nav-header">
        Nav header content
        <a href="#" data-target="#sidebar" data-toggle="collapse"><i class="fa fa-navicon fa-2x py-2 p-1"></i></a>
        <a href="/" class="navbar-brand"><img src="img/logo.png" height="45" alt=""></a>
      </div>
      <div class="page-header">
        <h2>Custom Sidebar Menu Example</h2>
      </div>

      <hr>

    </main>
  </div>

Answer №2

It's a bit of a challenge. If you're unable to utilize the sass functions for creating your columns, you may need to override the styles specifically for that .col-md-10. Something along these lines could work:

#sidebar:not(.show) + [class*=col-] {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

Live Example (Please note: I've used jsfiddle as stack snippets is blocking some parts of bootstrap's js, causing issues with executing the menu)

Update

For those interested, using a SCSS mixin would be the ideal approach which can be found here

Your SCSS code might resemble this:

#sidebar + main {
  @include make-col(12);
}
#sidebar.show + main {
  @include make-col(10);
}

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

jQuery is not properly activating menu links

Below is the jQuery code I am using in order to add the class "active" to links within the navigation menu: $('.main__menu li a').click(function(e){ $('.main__menu li a').removeClass("active"); $(this).addClass( ...

htmljquery

CSS3 columns causing <li>s to be cropped

I'm attempting to implement css3 columns with a list (<li>), but I'm running into some issues getting it to function properly. I have wrapped the <ul> in a div like this: .ul-container { -moz-column-width: 310px; -moz-column-gap ...

htmlcssmultiple-columns

Unforeseen Issues Arising from Media Queries

Trying out some new styling for different screen sizes based on the bootstrap grid system dimensions. Facing an issue where only certain styles apply while others don't seem to take effect. Here's a snippet of the CSS: @media only screen and ( ...

htmlcsstwitter-bootstrap

Ways to update the div content without having to reload the page

Upon clicking the save button on the modal form, the data is saved on a temporary page and the modal closes. The values should then be displayed in the div content. Currently, this process works fine, but upon reloading the page, the content is also being ...

javascriptphpjqueryajaxtwitter-bootstrap

Utilize JavaScript to trigger a function depending on the selected options from dropdown menus

I've been working on a fun little project for a web page where users can select two items from a drop-down menu and then click a button to play a sound corresponding to their selections. However, I'm facing some challenges with getting my JavaScr ...

javascripthtmldrop-down-menu

Stop the body from scrolling when the side panel is opened

Whenever I click on my button with the class "cd-btn," it triggers the toggling of my panel with the class "cd-panel.is-visible." jQuery(document).ready(function($){ //open the lateral panel $('.cd-btn').on('click', function(event){ ...

jqueryhtmlcsspanel

If a second instance is hidden, SVG will appear as a mysterious black box

Two separate div elements each contain an identical SVG graphic. If I hide the first div by setting it to "display: none", the SVG in the second div appears as a gray box. This issue is present in both Firefox and Chrome browsers. Any insights into why ...

javascripthtmlcsssvg

What is the best way to smoothly transition an element into view, then make it disappear seamlessly by fading it

Issue My current code features a <button> that, upon a single click, updates the class of a <div> element to "fade-in" and inserts it into the DOM. This action causes the <div> to visually fade in once it's in the DOM. However, if I ...

javascripthtmlcsscss-animations

Changing the width of an SVG path from 0 to 100% using CSS

I have an SVG design of wires that I want to animate the width from "0 to 100%", but I'm having trouble achieving this effect. It's easy to do with a div element, but not with an SVG image. Below is my code snippet: svg path { animation: f ...

htmlcssanimationsvgcss-animations

Using Geolocation in HTML5 and JavaScript

Currently, I am working on my debut mobile web application and have successfully integrated Google Maps into it using Geolocation JavaScript API version 3. Now, I am looking to add a button that, when clicked by the user, centers the map on my location o ...

javascripthtmlgeolocation

Progressing Vertically: Stacked Bars Featuring Dual Hues

I am currently working on developing a progress tracker that displays completion, attempted, and total counts using Bootstrap. However, I am facing difficulty in having two different colors in a single progress bar. https://i.sstatic.net/RrCZ1.png Is the ...

bootstrap-4progress-bar

Looking to retrieve a specific data element within Vue.js?

Here's a thought-provoking query for you. Imagine I have some data stored in an element in the form of an array like this: data: { product: socks, variants: [ { variantId: 2234, variantColor: 'Green', varian ...

javascripthtmlcssvue.js

Using data binding in VueJS to construct a dynamic URL

Exploring VueJS for the first time and it's been a great experience so far. However, I'm facing a couple of challenges with data binding. The requirement is for the customer to input an image URL, and no image should be displayed until a valid ...

javascripthtmldata-bindingvue.jsvuejs2

Can you provide the URL for the mailto function on a webpage?

Is it possible to activate the "mailto" email address directly via URL on a webpage? For example, if you have an email address listed as [email protected], would clicking the URL in the browser open the mail client just like clicking the email address its ...

htmlurlhyperlinkmailto

Using BootstrapValidator for conditional validation

While utilizing the BootstrapValidator plugin for form validation, I encountered a specific issue. In my form, I have a "Phone" field and a "Mobile" field. If the user leaves both fields blank, I want to display a custom message prompting them to enter at ...

javascriptjqueryvalidationtwitter-bootstrap

Using Phonegap with Dreamweaver CS5.5

Can anyone tell me what version of Phonegap is used in Dreamweaver CS5.5? I attempted to update the default phonegap.js file with the newest one, but it resulted in errors. Would it be wise to replace the current phonegap.js file with the latest version? ...

jqueryandroidhtmlcordovadreamweaver

Design a custom cover page before printing using the window.print() method

When it comes to printing, I have a header and footer displayed on each page. However, I want the first page to be clean with just a picture or title, without the header and footer that appear on subsequent pages. I've attempted to use CSS like this ...

htmlcss

employing document.write() specifically for a designated division

This is the coding: $(document).ready(function(){ var Jstr = { "JSON" : [ { "Eid" : 102,"Ename":"", "Ecode" : "<input type ='text'/>", "Eprops": {"name": "", "value":"", "maxlength":""}} ] } ; $(".search").click(funct ...

javascriptjqueryhtml

Toggle between two different functions

Embarking on my journey with HTML, JavaScript, and coding in general, I aim to create a website as part of my learning experience. This website will focus on wedding films and clips. My vision includes a side menu with a menu button (three horizontal line ...

javascripthtml

The React JS textarea's onchange event is not functioning properly when trying to set the value

This is a class component I created for an auto-suggest text area similar to Twitter's feature. import React, { Component, createRef } from 'react'; import { TextArea, List, Triangle } from './Styled'; import ge ...

javascripthtmlreactjs