Menu overlay conceals company logo

On smaller screen sizes, my hamburger menu is blocking part of the logo. I'm struggling to figure out how to ensure that the logo appears in front of the menu before it is clicked. Here's an example.

I attempted setting the background of label .menu to transparent, but the logo only appears after the menu is clicked. This illustrates the issue.

I would greatly appreciate any assistance with this problem.

Also, please excuse the messy code; I am aware and will clean it up later. Thank you for understanding.

.logo {
  position: fixed;
  width: 100%;
  top: -15px;

  left: 50%;
  transform: translate(-50%);
}

.midnight-logo {
  width: 40%;
  margin: 0 auto;
  display: block;
} 

.label .hamburger {
  /* styles here */
}
/* Additional CSS rules */


<img class="logo" src="https://i.ibb.co/xsQHR3Y/midnight-logo.png">

<label>

                <input type="checkbox">

                <span class="menu"> 
                <span class="hamburger"> </span> </span>
                    <ul> 
        
                        <li> <a href="home.html"> Home </a> </li> 
        
                        <li> <a href="about.html"> About </a> </li>
        
                        <li> <a href="contact.html"> Contact </a> </li>

                    </ul>

            </label>
htmlcss

Answer №1

Here are some suggested edits for the .logo class in your CSS:

z-index: 3;
 pointer-events: none;

By implementing these changes, the logo will initially appear above the menu. The pointer-events property allows the menu to remain clickable even when it's positioned beneath the logo. However, after clicking on the menu, the logo will stay on top.

If you prefer the logo not to remain on top after clicking the menu, consider adding a JavaScript onclick event to the menu. This event can revert the logo to a lower z-index value upon clicking the menu. You could add something like 

<span class="menu" onclick="logoBack()">
.

Additionally, insert the following JavaScript code between <script></script> tags. This snippet of code is designed to assist with handling the logo's behavior as described above:

function logoBack() {
var logo = document.getElementsByClassName('logo')[0];
logo.style.zIndex = "0";
};
.logo {
  position: fixed;
  width: 100%;
  top: -15px;
  height: auto;
  left: 50%;
  transform: translate(-50%);
  z-index: 3;
  pointer-events: none;
}

.midnight-logo {
  width: 40%;
  margin: 0 auto;
  display: block;
}

<!-- Additional CSS styles -->


<DOCTYPE! HTML>
<head>
</head>

<body> 
<img class="logo" src="https://i.ibb.co/xsQHR3Y/midnight-logo.png">

<label>
                <input type="checkbox">

                <span class="menu" onclick="logoBack()"> 
        
                <span class="hamburger"> </span> </span>

                    <ul> 
            
                        <li> <a href="home.html"> Home </a> </li> 
            
                        <li> <a href="about.html"> About </a> </li>
            
                        <li> <a href="contact.html"> Contact </a> </li>

                    </ul>

            </label>
            
            </body>

            </html>

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

The scroll bar in the main window vanishes as the popup window expands in size

When the popup expands in size, the bottom portion becomes inaccessible even with a scrollbar present. Ideally, the scrollbar on the parent window should adjust automatically as the popup grows, allowing users to scroll and view the entire content. ...

htmlcss

Troubleshooting a HTML error in Angular: How to pass data from Parent component to Child Component

In this scenario, I am passing data from a parent component to a child component in order to draw graphs using the provided information. The method responsible for drawing the graph is located within the child component and is called createGraph(divName, c ...

htmlangulartypescript

Transform charset X to Unicode using Java

What is the process to convert a specific charset to unicode in Java? We have discussed charsets extensively, but this particular topic has not been covered yet. I have a hex string that follows the criteria length%4==0 (e.g. \ud3faef8e). Typically, ...

javahtmlcharacter-encoding

Removing information from the database using a JSP webpage

Having some issues with my online reservation system. The problem lies in the code where users are unable to cancel their reservations using the cancel button on the jsp page. It seems that the code is not properly deleting data from the database. Any sugg ...

javahtmlmysqljsp

Angular 2 navbar malfunctioning

I'm currently working on creating a navigation bar with images that, when clicked, navigate to specific components. Here is the code snippet I have so far: <nav class="sidenav col-md-1"> <ul class="menu" routerLinkActive="active"> ...

htmlangular

Select the date from the drop-down menu or choose a date from the

How can I implement a date picker with dropdowns for date, month, and year, while also enforcing a minimum age of 18 years with JavaScript and frontend validation? ...

javascriptjqueryhtmlbootstrap-4frontend

Need to ensure that an AJAX form doesn't resubmit without the need for a page

Encountering a peculiar mystery issue here... I have created a button on a webpage that triggers a form submission. The form is enclosed within a DIV, which dynamically updates to display the modified data. (this is embedded in a smarty template) form: ...

javascriptphpjqueryhtmlajax

The subdirectory containing the Rails assets is causing loading issues in the production environment

My event CSS is currently located in app/assets/stylesheets/pages/events.scss. Surprisingly, everything looks perfect in development mode with all the assets loading properly. However, the real issue arises when I switch to production as it seems like thes ...

cssruby-on-railsproduction-environment

Creating a dynamic collection of N triangles in a container using CSS

In my current project, I am developing an Electron+Vue application that features a grid-styled map. Each cell on the map represents a room, and I want to indicate walls within these cells. Specifically, for directions North, South, East, and West, I can us ...

cssvue.js

Getting the dimensions of an image using a path in JavaScript

I am trying to display a div with an image, its name, size, and download link using jQuery. Here is the code I have created: var image = 'image/example.png' $('#download').attr("href", result2); $('.image').attr("src", re ...

javascriptjqueryhtmlimage

Enhance the appearance of the Vaadin Details Expand Icon by customizing the default CSS styling

For my expand/unexpand feature, I am utilizing Vaadin Details. Div contentDiv = new Div(); Label label = new Label("Expand"); Details details = new Details(label, contentDiv); The current output looks like this: https://i.sstatic.net/y8XQC.pn ...

cssvaadinvaadin-flowvaadin14

Mastering the art of creating data tables

Currently, I am working on a table that involves phone numbers, subscription status, and groups. However, I have encountered an issue where the incoming date is not aligning properly in my table. It seems to be a simple HTML problem, but I am struggling to ...

htmlruby-on-railshtml-table

Accelerate Image Preloading速

I am currently in the process of creating a website that features divs with background images. Although I am new to JavaScript, I am eager to learn more about it. My main goal is to preload these images so that visitors do not encounter any delays or bla ...

javascriptjqueryhtmlcss

Internet Explorer does not support the use of a:focus

Unfortunately, the issue with a:focus not working in IE is still unresolved. I have been searching for a solution, but have not been able to find one yet. <div class="city-selection"> <ul> ...

htmlcssinternet-explorerfocus

Troubleshooting: Page Unable to Import/Execute Linked JavaScript on WebStorm with Node.js Backend

I've been following W3School's jQuery tutorial, but I'm encountering some issues with importing scripts to an HTML document hosted on a Node server in WebStorm. I have properly installed and enabled the jQuery libraries under Preferences &g ...

javascriptjqueryhtmlnode.jswebstorm

A Guide to Configuring jQuery UI Slider with Three Distinct Colors

I'm currently implementing the UI Slider on my website. However, I would like to customize the slider with three different colors: Handle Color Previous portion of Handle Next portion of Handle I want it to look something like this: Currently, I h ...

jquerycssjquery-ui-slider

Implementing text wrapping in a dropdown select menu

Is there a way to adjust the text wrapping inside an option menu so that the option value matches the width of the select picker? Short text looks fine, but long text causes issues. I've attempted various solutions on this platform without success. I ...

htmlcss

Storing input field values in JavaScript using the onchange event handler.Would you like a different revision

I am looking to calculate the area by multiplying width and height entered into input fields, and then display the result. Any guidance would be greatly appreciated. Thank you! Here is my current code. const width = document.querySelector("#width"); con ...

javascripthtmlcssonchangeinput-field

Angular has the capability to rewrite URLs in CSS, providing a unique way

An issue arises in Angular when using a base set and html5mode with SVGs. This causes things like filter: url(#url) to be rewritten as filter: url(/base/#url). https://github.com/angular/angular.js/issues/8934 Disabling html5 mode and removing the base d ...

javascriptcssangularjssvgbase-url

The primefaces remoteCommand tag is failing to function properly as it is unable to pass the HTML content of the current page using jQuery to the managed

Utilizing Jquery's .html() method, I am extracting the HTML of my current page in the following manner. <h:outputScript name="js/jquery-1.7.2.js" /> <h:outputScript> function fetchHtml(){ $('#next').click(function(){ ...

javajqueryhtmljsf-2