What is the best way to make the Nav bar overlap instead of shifting content to the right?

Is there a way to open the nav bar and have it overlap on the right without pushing content to the right? I tried experimenting with position and z-index, but it didn't work. Thank you! Link

<div id="mySidebar" class="sidebar" onmouseover="toggleSidebar()" onmouseout="toggleSidebar()">
    <div class="navContent">
  <a href="#">YOUR DASHBOARD</a><br>
  <a href="#">MESSAGE CENTER</a><br>
  <a href="#">IMPACT & OUTCOMES</a><br>
  <a href="#">LEARNERS</a><br>
  <a href="#">PROGRAMS</a><br>
  <a href="#">SETTINGS</a>
  </div>
</div>

.sidebar {
        height: 100%;
        width: 85px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #181633;
        transition: 0.5s;
        padding-top: 120px;
        white-space: nowrap;
        overflow-x: hidden;
}
.sidebar a {
        padding: 3px 8px 3px 32px;
        text-decoration: none;
        font-size: 16px;
        color: #D3D2E4;
        display: block;
}
javascripthtmlcssbootstrap-4nav

Answer №1

Adjust the 

document.getElementById("mySidebar").style.width = "85px";
instead of 
document.getElementById("mySidebar").style.width = "250px";

var mini = true;

function toggleSidebar() {
  if (mini) {
    //console.log("opening sidebar");
    document.getElementById("mySidebar").style.width = "250px";
    /*change this line*/
    document.getElementById("main").style.marginLeft = "85px";
    /*change this line*/
    this.mini = false;
  } else {
    //console.log("closing sidebar");
    document.getElementById("mySidebar").style.width = "85px";
    document.getElementById("main").style.marginLeft = "85px";
    this.mini = true;
  }
}
body {
  font-family: "Lato", sans-serif;
}

.sidebar {
  height: 100%;
  width: 85px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  transition: 0.5s;
  overflow-x: hidden;
  padding-top: 60px;
  white-space: nowrap;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

.sidebar a:hover {
  color: #f1f1f1;
}

main .sidebar {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.material-icons,
.icon-text {
  vertical-align: middle;
}

.material-icons {
  padding-bottom: 3px;
  margin-right: 30px;
}

#main {
  padding: 16px;
  margin-left: 85px;
  transition: margin-left 0.5s;
}

@media screen and (max-height: 450px) {
  .sidebar {
    padding-top: 15px;
  }
  .sidebar a {
    font-size: 18px;
  }
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div id="mySidebar" class="sidebar" onmouseover="toggleSidebar()" onmouseout="toggleSidebar()">
  <a href="#"><span><i class="material-icons">info</i><span class="icon-text">about</span></a><br>
  <a href="#"><i class="material-icons">spa</i><span class="icon-text"></span>services</a></span>
  </a><br>
  <a href="#"><i class="material-icons">monetization_on</i><span class="icon-text"></span>clients</span></a><br>
  <a href="#"><i class="material-icons">email</i><span class="icon-text"></span>contact<span></a>
</div>

<div id="main">
  <h2>Open/Collapse Sidebar on Hover</h2>
  <p>Hover over any part of the sidebar to open it.</p>
  <p>To close the sidebar, move your mouse out of the sidebar.</p>
</div>

Visit the codepen page here

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

Issues persist with debugger functionality in browser development tools following an upgrade from Angular 8 to version 15

After upgrading from Angular version 8 to version 15, I've encountered an issue where the debugger is not functioning in any browser's developer tools. Can anyone provide some insight on what could be causing this problem? Is it related to the so ...

javascriptangulartypescriptpackage.jsonjavascript-debugger

The Oracle Database listener is unaware of the service specified in the connect descriptor for node-oracledb

Having recently transitioned from on-premise databases using Oracle 11g to the Cloud where I needed to connect to Oracle 12c, I encountered an issue with my nodejs application. While it worked fine on-premises, in the cloud it threw the following error: e ...

javascriptnode.jsoraclenode-oracledb

Tips for Maintaining the Execution of a JavaScript Function Within a Class until the Browser Window is Closed (Web Development)

The title might be a little confusing, so let me clarify here: I have implemented a popup that appears in the bottom right corner of a specific page on my website. The popup is working as intended (it shows up when the page is initially opened and can be ...

javascripthtmlcss

Does this information operate on Vue or Node?

I have recently started learning programming and currently working on an HTML project for school. My professor mentioned that we should only use Node.js for this project. However, I am concerned that the function I used below might be Vue instead of Node ...

javascriptnode.jsvue.js

I am looking for a string with this particular format in JavaScript

I am working with a JSON string array that looks like this: var dataMaster = [ {"id":1,"name":"John Doe","age":30}, {"id":2,"name":"Jane Smith","age":28} ] If you want to see how I would like to transform this data, please visit the following lin ...

javascriptjquery

Is left padding appearing mysteriously (supernatural CSS phenomenon)?

While using the Firebug inspector tool, if you hover over #jimgMenu ul, you may notice that it has left padding without any corresponding CSS rule: Where is this mysterious left padding coming from? Why is the origin not visible? EDIT: If you navigate t ...

jquerycss

Exploring the world of digital audio files and understanding the distinction between 'file:/// and '

I'm experiencing an issue with playing MP3 and MP4 files in Firefox and Internet Explorer. Can someone explain the difference between running a page by double-clicking on it (file:///...) compared to using IIS (http://...)? <object data="../../Med ...

htmlmedia

The console is displaying an undefined error for _co.photo, but the code is functioning properly without any issues

I am facing an issue with an Angular component. When I create my component with a selector, it functions as expected: it executes the httpget and renders a photo with a title. However, I am receiving two errors in the console: ERROR TypeError: "_co.photo ...

javascriptangulartypescripthttpfrontend

Please execute the npm install command to install the readline-sync package in order to fix the error in node:internal/modules/c

Having trouble installing npm readline as it keeps showing errors, even after trying different solutions. https://i.sstatic.net/LoX6L.png https://i.sstatic.net/b8b7l.jpg Tried deleting folders and uninstalling nodejs but the issue persists. Need help fi ...

javascriptnode.jsnpm

Show the current phone number with the default flag instead of choosing the appropriate one using the initial country flag in intl-tel-input

Utilizing intl-tel-input to store a user's full international number in the database has been successful. However, when attempting to display the phone number, it correctly removes the country code but does not select the appropriate country flag; ins ...

javascriptlaravelintl-tel-input

Chrome on OSX Mavericks threw a RangeError because the maximum call stack size was exceeded

While attempting to run an Angular app using linemanjs in Chrome on a Mac, I encountered the following error: Uncaught RangeError: Maximum call stack size exceeded An interesting observation is that the site functions properly on Chrome on a Windows mach ...

javascriptmacosangularjsgoogle-chrome

Can we include an option to display all pages in one row on a single page?

Is it possible to include an option to display all rows alongside the current options of 10, 15, and 100? I've been unable to locate this feature in the documentation: Check out the Codesandbox example: https://codesandbox.io/s/muidatatables-custom-t ...

javascriptreactjsmaterial-uimui-datatable

Issues arise with req.body being undefined when using node.js in conjunction with Express version 4.16.X and Body-Parser version

Recently, I began using node.js to construct a RESTFul API. Currently, my focus lies in inserting data through POST requests with JSON in the body. However, I encountered an issue where the req.body always returned as undefined. Upon investigating further ...

javascriptnode.jsexpresshttp-post

Issue with file upload: The view is not refreshing in response to non-angular events

I am having an issue with my upload component where the view is not updating when the onchange event fires. Even though I can see the file names being logged, nothing is happening on the screen. My approach involves using a directive so that I can easily ...

javascriptangularjs

Enter a value into the box by clicking a button that retrieves information from a text file

Below is a box where information needs to be filled: https://i.sstatic.net/wkFEv.png The code used to create the box above is as follows: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> < ...

javascripthtmlangularjsangular-ui-bootstrap

Struggling to get my layout perfectly centered

I've spent the last 35 minutes scouring this site, and I know the answer is probably right in front of me but I can't seem to figure out how to center my layout. It's a straightforward setup with a container div, left div for the menu, and ...

csshtml

Once the form has been submitted, proceed to open a new page following processing

Trying to remove an entry or offer from the database and then return to the page with all entries/offers. Attempted using Javascript, but it successfully deletes the item without redirecting to the overview page. Is this the correct approach with Javascri ...

javascriptphphtml

Nest two div elements within a parent div with varying margins

When trying to nest two divs inside another div with different margins, the second one always aligns according to the first one. For example, if we have divs named 'first' and 'second', we might want a layout like this: seco ...

htmlcss

When using Vue.js, the v-bind:class directive can be applied when an array is present and contains a specific

In my current project with Laravel and Vue.js, I am dealing with the task of creating multiple users. To accomplish this, I am constructing an array of users and populating all the necessary fields in order to store them in a database table. Once all field ...

javascriptvue.js

Error: The function "text.toLowerCase()" is not defined

Whenever I execute the following code, I keep encountering this error message: Uncaught TypeError: text.toLowerCase is not a function const getVisibleExpenses = (expenses, { text, sortBy, startDate, endDate }) => { return expenses.fi ...

javascriptreactjsfunction