Shift designated list item to the right with overflow handling

A current project involves working on a sidebar created in bootstrap, and I've encountered an issue. I can't seem to move a selected item to the right and have it flow over the nav div. I attempted to increase the z-index with no success.

One suggestion I've considered is utilizing flexbox instead. By adding a cell in front and next to the menu item, I could set the width on the first cell when an item is selected and set a width of 0 to the last cell. The other (unselected) items could have a width set on the last cell. This could potentially achieve the desired visual effect.

Any advice or alternative suggestions are greatly appreciated.

HTML: 

<nav class="col-sm-3 col-md-2 d-none d-sm-block bg-faded sidebar vdl-sidebar">
  <ul class="nav nav-pills flex-column">
    <li class="nav-item" ng-reflect-klass="nav-item">
      <a class="nav-link d-flex justify-content-between align-items-center" href="#">
        Item 11
        <span class="badge badge-pill pull-right badge-success">on</span>
      </a>
    </li>
    <li class="nav-item selected">
      <a class="nav-link d-flex justify-content-between align-items-center">
        Item 13
        <span class="badge badge-pill pull-right badge-success">on</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link d-flex justify-content-between align-items-center" href="#">
        Item 14
        <span class="badge badge-pill pull-right badge-success">on</span>
      </a>
    </li>
  </ul>
</nav>

CSS:

/*
     * Sidebar
     */

.sidebar {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: hidden;
    /* Scrollable contents if viewport is shorter than content. */
    border-right: 1px solid #eee;
}

/* Sidebar navigation */

.sidebar {
    padding-left: 0;
    padding-right: 0;
}

.sidebar .nav {
    margin-bottom: 20px;
}

.sidebar .nav-item {
    width: 100%;
    background-color: #f9f9f9;
    border-bottom: 1px solid white;
    border-top: 1px solid white;
}

@media (pointer: fine) {
    nav.vdl-sidebar a.nav-link:hover {
        background-color: lightgreen;
    }
}

.sidebar .nav-item+.nav-item {
    margin-left: 0;
}

.sidebar .nav-item+.nav-item.selected {
    margin-left: 20px;
    z-index: 2000;
}

.sidebar .nav-link {
    border-radius: 0;
}

nav.vdl-sidebar a.nav-link.active {
    background-color: green;
}

nav.vdl-sidebar a.nav-link:not(.active) {
    color: green;
}

.badge-pill {
    padding-bottom: 0.5em;
}

a {
    cursor: pointer;
}

.selected {
    margin-left: 1.5em;
    background-color: lightgreen;
}

Screenshot:

https://i.sstatic.net/JflqX.png

My fiddle link for further reference: https://jsfiddle.net/09ogyde4/

htmlcssbootstrap-4

Answer №1

If you want to make the content overflow horizontally and vertically, you can apply overflow-x: visible; and overflow-y: visible; to the .sidebar class. Alternatively, you can simply delete these lines.

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

hide the scroll button when at the top of the page and hide it when at the bottom

Looking to create a vertical scroll that hides the up button when at the top and hides the down button when at the bottom? Jquery can help with this, but sometimes it's tricky to get it just right. Take a look at an example here. Below is the code sn ...

jqueryhtmlcssscroll

Tips for capturing text input from a Quill rich text editor div

My attempt to retrieve the content entered in Quill editor's editor div using jQuery codes is not proving successful. Although it works for other text inputs, it fails to do so for the editor div. Below is a demonstration of the issue: $(function() ...

javascriptjqueryhtmlquil

Shorten certain text in Vuetify

Here's an example of a basic select component in Vuetify: <v-select :items="selectablePlaces" :label="$t('placeLabel')" v-model="placeId" required ></v-select> I'm looking to apply a specific style to all selec ...

javascriptcssvue.jsvuetify.js

What is the process to replace the image in these templates?

I recently downloaded a template from the internet and am in the process of developing a website. Can someone please guide me on how to change the icons highlighted in the black and red boxes as shown in the image? I am using Visual Studio and ASP.NET fo ...

jquerycssasp.net

Bootstrap dropdown menu fails to expand

I recently attempted to implement a hamburger menu using Bootstrap on my website. After checking and adding the necessary CSS and JS files, I encountered an issue where the menu wasn't expanding as expected. I followed the example code provided on the ...

cssbootstrap-5

Troubles with Placing Image on WordPress

Working on a Wordpress component for a website where I placed a "SOLD OUT" image over text. However, the issue arises when viewing the site on mobile devices, as the images are smaller and not in their correct positions due to using absolute positioning. ...

htmlcsswordpress

Fade out and slide close a div using jQuery

I am creating a new website and incorporating jQuery for animation and simplified JavaScript implementation. My goal is to have a button that, when clicked, will close a div with a fading out and slide up effect. Can this be achieved? Thank you. ...

javascriptjqueryhtmlcss

The color of the button in HTML5 will remain constant and not shift

I have several buttons that function like radio buttons - only one can be selected at a time: <button id="btn-bronze" name="btn-bronze" type="button" class="blue-selected">Bronze</button> <button id="btn-silver" name="btn-silver" type="butt ...

javascriptjqueryhtmlcss

What is the best way to add a "Save to Favorites" link within a modal window

I have integrated the NASA API to showcase images, where clicking on an image reveals a modal containing additional details. There is also a save to favorites functionality in the tutorial that allows users to save images and details to a local storage sec ...

javascripthtmlcsslocal-storage

Unable to access the "Open" status of the Dropdown menu

Having some trouble in my code - I am attempting to display a dropdown with an open state by adding the "show" class, but it's not working. Can anyone assist me? Here is the HTML snippet: <div class="row"> <div class="col-xs-12"> ...

bootstrap-4

"Even when hidden, an HTML Div element still occupies space on the

I encountered an issue with my tabbedPage setup. Even though I have hidden content, it still occupies space on the page. Here is the code snippet that I am using: let tabHeader = document.getElementsByClassName("tabbedpage-header")[0]; let tabIndicator = d ...

javascripthtmlcss

Strategies for creating a clickable dropdown menu

I am currently developing a website that requires 15 HTML files. I have created a navbar with 3 direct links nav-items and 2 dropdowns. How can I make the dropdown menu appear on hover instead of click, and navigate to the dropdown href link when clicked? ...

htmlcssbootstrap-4

Is it possible to utilize the output of a function to determine the styling of a div element in Vue?

Hi, I'm trying to use the v-bind:style in my div to apply the textposit function with the textpos prop as a parameter. The function should adjust the style of the div based on the value of the parameter. <div class="container" :style=&qu ...

javascriptcssvue.jsvuex

Delete the current row in the table before adding a new one with jquery

Having a HTML table and performing updates using Ajax. Everything is functioning properly so far. When clicking on the Edit button, the values are displayed in the textboxes correctly. However, when clicking on the Add button, the table is updated accordin ...

jqueryhtmlajax

Elements in Motion

Working on a parallax effect, I've managed to assign unique scroll speeds to (almost) every element. Moreover, these elements are programmed not to activate their scroll speed until they enter the viewport. Below is the JavaScript code for trigger co ...

javascriptjqueryhtmlcssparallax

Implementing bootstrap columns while displaying individual components one after the other

Here is the html code I am currently working with: <label>Search:</label> <input type="text" id="list_search" class="form-control col-8"> <button class="btn btn-info col-2">Search</button> It's interesting to note that ...

htmlcssbootstrap-4frontend

Crafting a template for mixing up images and quotes without any specific connection - here's how!

I came across some interesting templates that can generate random quotes and others that create random pictures. My goal is to develop a template that generates both a random quote and a random picture, similar to this example, without any relation betwee ...

javascriptandroidcsstemplatesrandom

Scrollbar not displaying on IE when set to overflow: auto

Greetings, all! I am facing yet another design challenge with Internet Explorer. I have a DIV with Overflow:auto on my website that works perfectly fine on Chrome. However, when it comes to IE, the scroll bar doesn't show up and all the images inside ...

htmlcssinternet-explorer

Transfer the div above to the other div

My dynamic set of divs have varying heights generated dynamically even though their widths are fixed. Despite setting them to float:left, they are not aligning perfectly under each other. The divs are forming rows with the height of the row being determine ...

htmlcsscss-floatposition

Using jQuery, wrap two specific HTML elements together

I am working with a set of elements: <div id="one">ONE</div> <div id="two">TWO</div> <div id="three">THREE</div> <div id="four">FOUR</div> <div id="five">FIVE</div> My goal is to wrap a DIV tag ...

jqueryhtmlcss