Slide the menu off to the right

Check out these images to see my progress: Main Image. When you click on the menu, everything shifts right.

I've managed to set up the push menu, toggle switch menu, and main divs. Now I need help with centering the 3 lines that are clicked within the div, making the div stretch the length of the page, and aligning the logo in the middle of the div.

Here's the code I'm currently working with:

<html>
<head>
<style>
body {
    font-family: "Lato", sans-serif;

}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #212121;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

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

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav p {
        position: absolute;
        bottom: 100px;
        color: #CACFD2;
        font-size: 12px;
        left:10%;
        }

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

.sidenav a.mail {
        color: #CACFD2;
        font-size: 12px;
        left:10%;
        padding: 0;
    text-decoration: none;

    }


#logozone {
    background-color: #212121;
    transition: margin-left .5s;
    float: left;
    width: 10%;
    height: 100%;
    padding: 2px;
}

 @media screen and (max-height: 450px) {
  .sidenav {padding-top: 2px;}
  .sidenav a {font-size: 18px;}
}

</style>
</head>
<body>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">Home</a>
  <a href="#">Current Projects</a>
   <p>client info</p>

 </div>


<div id="logozone">
   <span style="text-align:center; font-size:30px;color:#CACFD2;cursor:pointer" onclick="openNav()">&#9776; 
   <div><img src="logo.jpg"></div>
   </div>

 <script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("logozone").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("logozone").style.mar...   
</script>

</div>

<div>This is a test</div>

</body>
</html> 

Can someone assist with this new coding challenge? Thank you - it's an area I'm not too familiar with!

Answer №1

Experiment with switching the positioning of #Logomenu and #logo from absolute to relative. No z-index is necessary in the sidenav class; keep it on the same canvas.

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

How can I pass the color hex value from the controller to the view without using quotation marks?

I'm having trouble sending a value and color pair using JSON. The color value needs to be returned to the JavaScript in the view as color: "#FFFFFF". I can send it to the view that way, but once the browser reads it, it turns into color: &quot;#FF ...

Is there a way to achieve element scrolling similar to scrollLeft within a scrollable container without using JavaScript

Looking for a CSS Solution: Is there a way to achieve element.scrollLeft functionality in CSS without using javascript? I want to pre-scroll a scrollable container. Situation Overview: I have a scrollable container that houses various items. Some instanc ...

Utilizing XPath with Selenium in VBA

In my search for a node based on text located within a child or grandchild node of its immediate sibling, I came across the following HTML structure: <div> <div class="searchedDivClass" id="DynamicId1"> </div> <div class=" ...

Incorporate a notification into the Windows notification center without it being visibly displayed on the desktop

I am currently developing an Electron application that includes a custom Notification feature. This feature involves html5 divs appearing and disappearing as necessary on a frameless, transparent, always-on-top window. Although the feature works well, I s ...

Adjust font size using jQuery and CSS styles

I'm currently working on a website where the body has a specified font-size property that is inherited by all elements on the page. Some tags on the page have font-sizes specified in percentages (%). Others are assigned sizes in pixels (px). I&apos ...

What could be causing the undefined status of my checkUser() function?

I have implemented a brief script on my signup page to define the function checkUser(user) at line 6. In the code section at the end of the HTML for the sign up form, I included an inline script onBlur='checkUser(this) within the <input> named ...

Is it possible to apply CSS opacity only to the background color without affecting the text on top of it

Is it possible to set the opacity property specifically for the background of a div, without affecting the text inside it? I attempted to achieve this with the following code: background: #CCC; opacity: 0.6; However, it seems like the opacity change is ...

Choose a HTML element <a> containing a hyperlink reference and a nested child element <li>

Does anyone know of a way in javascript/css to select the (n) <li> in my code, while also specifying that the <li> must have a parent with the current <a> tag containing a specific href link? <a href="www.link.com">CATEGORY NAME& ...

Display or conceal a frame with the help of JavaScript or jQuery

Is there a simple way to hide the "topFrame" and "menu" frames when clicking an image or button, and then unhide them by clicking again? Apologies for not including the "topFrame" and "menu" jsp files, as they are dynamically generated in my application. ...

The contents table remains fixed in the top right corner as you scroll

I have developed an Angular app with a table-of-contents component that only displays two items. The code for the script is as follows: ts import { Component, OnInit } from '@angular/core'; import { pdfDefaultOptions } from 'ngx-extended-p ...

How to implement a pop-up dialog box with multiple input boxes using AngularJS?

If you click on the link below: https://material.angularjs.org/latest/demo/dialog You'll notice that the prompt dialog box features only one input field. I'm curious to know if it's possible to customize this using mdDialog to include mult ...

What is the method to extract the value of $r['id_usr'] from a select tag in PHP and store it in a variable?

Is there a way to retrieve the option value from a select tag using $r['usr_id'] when submitting it in order to utilize that value in a php query? Below is an example of my code : <pre> <div class="form-group"> & ...

How to implement a modal popup in Vue.js using an anchor tag

As a newcomer to Vue.js, I'm facing an issue with creating a link in my navbar component that, when clicked, displays a modal component. I've noticed that the solutions I found are for buttons which use the data target attribute, but this isn&apo ...

Having trouble with installing create-react-app for my_app using npm because it seems to be stuck on f

I've hit a roadblock while trying to create a react app on my 2011 MacBook Pro. To start, I downloaded the latest version of Node from their official website. Following the instructions from React documentation, I ran the following commands: npm uni ...

Tips on eliminating the gap between the dropdown menu in Firefox browser

After testing in Chrome and seeing no issues, I noticed that the input field's position changes and there is spacing between the dropdowns when opening in Firefox. View in Firefox browser: https://i.stack.imgur.com/WYpuy.png View in Chrome browser: ...

Populating a select dropdown menu with options pulled from SQL table entries

Within my database, there is a table named "Registration" which is used for registering into clubs. This table consists of two columns: 'clubName' and 'registrationStatus'. The clubName column contains the names of different clubs, whil ...

CSS navigation bar (background gradient problem)

I have encountered an issue with my multi-tier navigation menu where tiers below tier 1 are displaying an unexpected block to the left of the options. I suspect this problem is related to the background gradient applied, but I haven't been able to fin ...

checkbox toggling event triggering twice

I have been working on an application that allows users to register for university courses. They can select their registration type, course type, batch, and subjects. The subjects are displayed in a table based on the selected course type and batch. Users ...

What is the method to incorporate spread into inner shadow within an SVG file?

Seeking assistance with creating an inset-shadow effect with spread for an SVG rectangle in Figma. Check out this example of a rectangle with inner-shadow and spread. I have successfully added blur and positioned the shadow using x and y coordinates, but ...

Experiencing issues with my site's display due to unwanted code plaguing the

I am currently using the latest Divi theme on my WordPress site, and it is in maintenance mode. Recently, I noticed a strange space between the header and the top of the page that only appears on Chrome and IE, but not on Firefox. After inspecting with dev ...