Element is not being overlapped by higher z-index

#navbarContentHamburger {
    background-image: url(../img/657904-64.png);
    background-size: contain;
    z-index: 3;
    position: fixed;
    width: 22px;
    height: 20px;
    top: 7.7px;
    left:8px;
}

.open {
    width: 4% !important;
    transition: 0.4s;
    z-index: 2;
}

#sidebar {
    transition: 0.4s;
position: fixed;
    height: 100%;
    width: 0%;
    background: red;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    overflow: hidden;
}

#navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
    background-color: #0f9494;
    grid-area: navbar;
  box-shadow: 0 3px 28px rgba(0,0,0,0.25), 0 2px 10px rgba(0,0,0,0.22);
}

I am struggling to get the HTML element navbarContentHamburger to display above ".open" and #sidebar, despite adjusting the z-index. Any tips on how to achieve this?

The concept is to have a blue navbar with a white menu icon. When the icon is clicked, a div will overlay the page with the new navigation menu, while keeping the white icon (navbarContentHamburger) in the corner.

<div id="navbar">
    <div class="navcontainer">
        <div id="navbarContent">
            <div id="navbarContentHamburger" @click="toggleMenu()">

            </div>
            <div id="navbarContentMenu">
                    <h4>MENU</h4>
            </div>
        </div>
    </div>
</div>

Answer №1

You're on the right track, but it seems like your CSS is having trouble accessing the image in the parent directory. To fix this, try using an absolute path for your hamburger icon image file. Here's a sample code snippet to guide you:

#navbarContentHamburger {
    background-image: url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-256.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 3;
    position: fixed;
    width: 22px;
    height: 20px;
    top: 20px;
    right: 20px
}

.open {
    width: 4% !important;
    transition: 0.4s;
    z-index: 2;
}

#sidebar {
    transition: 0.4s;
    position: fixed;
    height: 100%;
    width: 0%;
    background: red;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    overflow: hidden;
}

#navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
    background-color: #0f9494;
    grid-area: navbar;
    box-shadow: 0 3px 28px rgba(0,0,0,0.25), 0 2px 10px rgba(0,0,0,0.22);
}
<div id="navbar">
    <div class="navcontainer">
        <div id="navbarContent">
            <div id="navbarContentHamburger" @click="toggleMenu()">

            </div>
            <div id="navbarContentMenu">
                    <h4>MENU</h4>
            </div>
        </div>
    </div>
</div>

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

Ways to verify the presence of an element in a list

I found this interesting JS code snippet: ;(function ($) { $('.filter-opts .opt').click(function(){ var selectedName = $(this).html(); $('.append').append('<li>' + selectedName + '</li> ...

The fixed-top navigation bar in Bootstrap obscures the links within the #content

As a student studying software development, I am currently working on a web development project for my class. Utilizing Bootstrap, I have implemented a navbar-fixed-top and structured the body as a table-striped table with each row containing a <a href= ...

Dynamic HTML binding with v-model in Vue JS allows for seamless two-way

I recently incorporated Vue Js into my main MVC application. I want to be able to bind a Vue Js v-model to dynamically loaded HTML from a partial view. For example, in my partial view, I have the following: <input type="text" id="firstNam ...

Restrict the input to only allow for parentheses, disallowing any letters or numerical characters

Only parentheses are allowed in the input field; letters and numbers will not be accepted. function checkBrackets() { var inputVal = document.getElementById("input").value; var result = document.getElementById("strong").value; console.log(inputVal, ...

Tips for creating an editable div that can also incorporate a textarea and the option to upload or delete photos

On my website, users can upload images, names, and descriptions which are saved in a MySQL database. The information is then fetched to display on the website. The code below allows users to enter this information and see it displayed when they click the s ...

Using a background image from your own website does not display anything, but using an image from an

It's really strange from where I'm standing. I'm working on a website and trying to set up a banner with a background image using the background-image property. The issue I'm facing is: when I use two images with the same dimensions, ...

How can I position the close button correctly in a bootstrap popup modal?

I have a basic bootstrap popup modal. Currently, the close X button is centered within the popup window, but I would like to align it to the right corner instead. Is there a way to achieve this? <div class="modal fade" id="checkNameSurvey-modal" data ...

"Spinning Effect in CSS with a Pulsating Twist

I am attempting to create a unique CSS animation that involves rotating an image and giving it a pulsing effect similar to the animation seen on Shazam's button. Here is the code that I have so far. While the image is successfully rotating, I am runn ...

Navigating a dynamic table by looping through its generated tr elements

I am currently working with a dynamically created tr table that includes individual rows of data and a fixed total sum at the bottom. The total sum does not change dynamically. var tmp = '<tr id="mytable"> <td id="warenid">'+data1.id ...

Website issues being displayed by Internet Explorer

Greetings! Let me begin by saying how wonderful this page is - I have already found many answers here before. Please forgive any errors in my English :) In my efforts to optimize my website for SEO and increase its speed, I made several changes. The site ...

The style of the button label does not persist when onChange occurs

Encountered an interesting issue here. There is a button designed for selection purposes, similar to a select item. Here's the code snippet: <button class="btn btn-primary dropdown-toggle" style="width: 166%;" type="button" id="dropdownMe ...

D3: Ensuring Map is Scaled Correctly and Oriented Correctly

I am attempting to integrate a map into a website using D3 and topoJSON that resembles the following: https://i.sstatic.net/1brVx.png However, when I create the map with D3/topoJSON, it shows up small and inverted. https://i.sstatic.net/LgQBd.png Even ...

What is the best way to exchange configuration data among Javascript, Python, and CSS within my Django application?

How can I efficiently configure Javascript, Django templates, Python code, and CSS that all rely on the same data? For example, let's say I have a browser-side entry widget written in Javascript that interacts with an embedded Java app. Once the user ...

Ajax calls within nested functions are not being executed in the correct sequence

Currently, I am utilizing the geonames API to retrieve geographical information. My objective is to extract the names of states within a country using the getStateInfo function and subsequently obtain a list of cities in each state through the getCityInfo ...

Tips for incorporating transition animations into route changes in next.js

On the homepage, there are 2 links that I want to have distinct transition animations for. For example, if I click the link on the left, the animation should start from the left and move towards the right when changing routes. ...

PHP - Unable to store the input content

I've encountered an issue with my website where I need to create a form for users to submit new information or news. Below is the code snippet that I have: <?php include "0begin.php"; $title=$_POST["title"]; isset($title) or $title=$_GET["tit ...

Slider Adjusts Properly on Chrome, but Not on Firefox

Visit this URL This link will take you to the QA version of a homepage I've been developing. While testing, I noticed that the slider on the page works perfectly in Chrome and IE, but has layout issues in Firefox where it gets cutoff and moved to th ...

The width of the Chrome iPhone 6 emulator exceeds that of the actual device, stretching to 100

Within the body element, I have a component called app. Even though the app element is set to have a width of 100%, when I check the page using the iPhone 6 emulator in Chrome, I notice that the app component extends beyond the viewport, causing an overfl ...

Tips for arranging HTML image sources to prepare for future updates

Incorporated into the HTML are a series of images, each accompanied by text and/or transitions. To streamline positioning, each image set along with other elements (text, video, etc...) is enclosed within a div. Furthermore, every image is labeled with a n ...

What is the best method for integrating opensea-js using a script tag in a vanilla HTML/JS environment?

Is there a way to incorporate opensea-js into an html/js project that does not rely on node.js? The source code for opensea-js is only available on github and npm at https://github.com/ProjectOpenSea/opensea-js I came across this link: However, when I tr ...