increase the width of the side menu bar to accommodate more content on the Bootstrap

At the moment, the line that separates the content from the side menu stops at the side menu's content. However, the content is going to be longer than the side menu, causing the page to look uneven. I attempted to adjust the page-content d-flex but did not succeed.

Using a template from

Here is the code for the side menu

  <div class="page-content d-flex align-items-stretch">
   <nav class="side-navbar">
      <!-- Sidebar Navigation Menus-->
      <ul class="list-unstyled">
        <li class="active"><a href="index.html"> <i class="icon-home"></i>Home </a></li>
        <li><a routerLink="/dashboard"> <i class="icon-picture"></i>Dashboard</a></li>
        <li><a routerLink="/tasknotification"> <i class="icon-padnote"></i>Task Management</a></li>
        <li><a routerLink="/candidate"> <i class="icon-user"></i>Candidate Management </a></li>
        <li><a routerLink="/job"> <i class="icon-interface-windows"></i>Job Management</a></li>
        <li><a href="#exampledropdownDropdown" aria-expanded="false" data-toggle="collapse"> <i
              class="icon-interface-windows"></i>Example dropdown </a>
          <ul id="exampledropdownDropdown" class="collapse list-unstyled ">
            <li><a href="#">Page</a></li>
          </ul>
        </li>
      </ul>
  </nav>

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

Answer №1

nav.side-navbar {
    text-align: left;
    min-width: 250px;
}
.page-content {
    min-width: calc(100% - 250px);
}

By following this approach, the side-menu will remain intact and won't collapse. After reviewing your fiddle, I believe this solution could be effective.

Answer №2

Adjusting media query settings

@media (max-width: 1199px)
nav.side-navbar {
    text-align: center;
    overflow: hidden;
}

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

Develop a radio button filter utilizing the "Date of Creation" attribute, implemented with either jquery or JavaScript

I am currently utilizing a customized Content Query Web Part to load a series of list items. Each of these items has an XSLT attribute known as the Created Date. Shown below is an example of the markup: <div class="item" createddate="2014-01-22 13:02 ...

Exploring robot framework methods for class verification

Are there any specific keywords in Robot Framework that can be used to verify if an element has a particular class assigned to it? Perhaps something like Element should have class element className Or I could also check if the element has a specifi ...

Strategies for avoiding overflow-x issues in Safari and mobile devices

I am currently facing an issue where I have a div containing a table with overflow enabled, allowing the whole table to be viewed by scrolling. However, on Safari and mobile Safari browsers, there is a horizontal scroll on the html and body elements. Whil ...

What is the best way to watch a video file (.flv) without the distracting loading image appearing as it buffers during playback

I am looking to incorporate an FLV video file into my website. It is important to me that the video begins playing smoothly, taking into account the internet speed of the user's device. I want to ensure that the video does not pause to buffer, display ...

Tips for creating a web page with rounded screen corners, similar to those on an Android smartphone

I am looking to create rounded screen corners on a website similar to those found on an Android smartphone. Here is an example of what I am trying to achieve: I have searched for tutorials online but haven't had much luck finding the right solution. ...

When the nav-element is clicked, it will load the new content/file.php into the div with the id of "include."

Seeking the most efficient method to load content from a php file into a designated div on my webpage, prioritizing speed, minimal performance requirements, and ease of implementation. Unsure whether it's preferable to utilize php or javascript for t ...

PHP and jQuery creating a three-tiered drop-down navigation menu

My task involves creating a jQuery dropdown menu using PHP-generated HTML from a database table of categories: cats (db table) <ul class="dropdown"> <?php $sql ='SELECT * FROM cats WHERE cat_parent = 0'; $result = $db->s ...

Expand a list item to full width based on the number of items present

Is there a way to make dynamically added list items in a footer stretch across the width of their container? The footer is created in WordPress and the list items are actually widgets. Here is an example: Fiddle I can't manually set the width for e ...

Retain the previously selected option in a PHP combobox even when changing pages

Can someone please assist me with my PHP code? I am having trouble keeping my combobox unchanged after a page reload. It works fine until I change pages in my pagination. Can anyone help? THIS IS MY PHP. PHP ...

What causes the excess spacing in flexbox containers?

Is there a way to remove the padding around the container and between the two columns? I attempted setting margin and padding to 0, but it was not successful. https://i.sstatic.net/i5XJJ.jpg body, html { width: 100%; height: 100%; } main { disp ...

Issue with a responsive CSS circle element that holds an image

I'm struggling to figure out how to create 9 responsive CSS circles in a row, with each circle containing an img tag rather than a background image. The goal is to center the img and resize it based on the size of its parent circle div. These 9 circle ...

jQuery datatable fails to become responsive when nested within another <div> element

My jQuery Bootstrap DataTable is not becoming responsive when placed inside another div. It works fine when the row is outside that div. What adjustments do I need to make for it to be responsive? <div class="tab-pane" id="tables" ro ...

CSS animations are not functioning properly on disabled Bootstrap buttons

One issue I'm facing is with a BootStrap button that I'm rendering in React. The button has a property or a condition that determines if it's disabled: <Button bsClass="fill" disabled={!props.purchaseble} onClick={conso ...

Run a function upon clicking a button in JavaScript

Could someone please help me figure out what I am doing incorrectly in the code below? I am attempting to trigger a function when a button is clicked. The HTML: <button id="btn1">Press me!</button> <input type="button" id="btn2" value="Pr ...

Locating the nearest image within a specific div using jQuery's find method

Here is the HTML I used on my page: <div class="edge-img-sec"> <img src="img1" alt="edge-icon" class="edge-icon1"> <img src="img2" alt="right-icon" class="edge-icon1-right"> </div> <div class="edge-img-sec"> < ...

Ensuring the authenticity of user login credentials

I have a form in my HTML where the user needs to input their name and password. <html> <body> <form action="welcome.php" method="post"> Name: <input type="text" name="name"><br> Password: <input type="text" name="password ...

What could be preventing my state from changing to false when I click the close button on the menu?

Despite initializing my state to false, the problem arises when I open and close my menu. The state never actually becomes false, causing the closing animation of the NavBar to not run as expected. The component: import CloseButton from "./CloseButto ...

These coding languages are becoming more popular; however, the <p> tag is nowhere to be found in the slid

Inspect and Fix the Code: Missing p tag when clicked HTML Slide up/down <div class="slideme" class="center"> <h1>Hello,</h1> <p>Can you see Me</p> </div> <but ...

Enhanced Bootstrap 4 button featuring custom design with text and image aligned on the right side, optimized for flexbox layout

I am looking to design a button-like div that features a flag image alongside the abbreviation of a country. Although I have some code in mind, it doesn't follow Bootstrap's guidelines and I am struggling to adapt it accordingly. <div cla ...

What is the process for updating a particular div element?

I am currently developing a webpage that allows users to select an item, and the relevant information will be displayed. On this page, I have incorporated two buttons: btnBuy0 and btnBuy1. The functionality I am aiming for is that when BtnBuy0 is clicked ...