SVG elements are influenced by the `display: none;` property, even when it is specifically applied only under the `nav

header {
    display: flex;
    justify-content: space-between;
}
nav {
    display: none;
}
header svg {
    width: 3em;
    margin-top: -6em;
    cursor: pointer;
}
<div>
        <header>
            <a href="#" class="logo">Footwear<span>Company</span></a>

            <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Boots</a></li>
                <li><a href="#">Athletes</a></li>
            </ul>               
            </nav>
            <svg class="close" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M24 32H0V26.6667H24V32ZM48 18.6667H0V13.3333H48V18.6667ZM48 5.33333H24V0H48V5.33333Z" fill="white"/>
            </svg> 
        </header>

Even though I targeted the ul and li elements within nav, the svg is still not visible. It's puzzling that the cursor property works even when the content is hidden.

I aim to conceal the nav section without impacting the display of the svg.

htmlcsssvgdisplaynav

Answer №1

Please set a fill color for the path element and eliminate the negative top margin.

header {
  display: flex;
  justify-content: space-between;
}

nav {
  display: none;
}

header svg {
  width: 3em;
  cursor: pointer;
}
<header>
  <a href="#" class="logo">Shoe<span>Brand</span></a>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Sneakers</a></li>
      <li><a href="#">Players</a></li>
    </ul>
  </nav>
  <svg class="close" viewBox="0 0 48 32" xmlns="http://www.w3.org/2000/svg">
    <path d="M 24 32 H 0 V 26.6667 H 24 V 32 Z M 48 18.6667 H 0
    V 13.3333 H 48 V 18.6667 Z M 48 5.3333 H 24 V 0 H 48 V 5.3333 Z" fill="black" />
  </svg>
</header>

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

What is the correct method for including the sanitize: false option in a popover?

Struggling to place a button within the Bootstrap Popovers? I attempted but failed. Currently using Bootstrap-Popover and aiming to include a button within the popover. var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-tog ...

htmlbootstrap-5

Ways to troubleshoot the issue of a non-working "Onclick function"

let username; document.getElementById("mySubmit").onclick= function(){ username= document.getElementById("myText").value; document.getElementById("myH1").textContent= `Hello ${username}` } <!DOCTYPE html> <html lang="en"> <head> < ...

javascripthtmlcss

Managing errors within AngularJS in your controller.js file

In my NodeJS + AngularJS single page application, there are fields for inputting text. I need to create a function in controller.js to check if any of the fields are empty so that an error alert can be displayed in the browser. This is my controller.js fi ...

htmlangularjsnode.js

Arrangement of Columns in Bootstrap 4 - Three Columns Aligned Vertically on the Left, One on the Right

My goal is to achieve a Bootstrap 4 layout like the one shown in the image linked below: https://i.sstatic.net/gY6m5.png For large devices, I want the Search Form, CTAs, and Button ads to be arranged vertically in a column that spans 4 units, while the C ...

csshtmlbootstrap-4

Tips for submitting a form with an input type image through ajax to avoid redirects or reloading

I'm curious about how an ajax request would handle input type image. I have a scenario where users need to click on images displayed in a list to add them to their own personalized list at the bottom of the screen. The concept involves having a form w ...

phpjqueryhtml

Adding Text Above a Material Icon in Angular: A Guide

Here is some sample HTML code to consider: <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <mat-icon class="fa fa-folder" style="font-size:48px;"><span style="color: re ...

htmlcssangulariconsmat

Ways to verify the application of CSS hyphens using Chrome's developer tools

I cannot seem to get automatic hyphens to work via CSS. I have applied the following CSS: body { -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } Despite adding this CSS, my text is not being hyph ...

htmlcssgoogle-chromegoogle-chrome-devtoolscss-hyphens

Django just threw a fit, saying 'Cannot assign "u'Wing'": "Truck.MODEL" must be a "MODEL" instance' while trying to add a new object to the database

Database Models: class MODEL(models.Model): ModelName = models.CharField(max_length = 128, unique = True) URL_Slug = models.SlugField(unique = True) ... class Maker(models.Model): maker = models.CharField(max_length = 128, unique = True) ...

pythonhtmldjango

Identifying issues in jQuery code - What could be causing this error?

My jQuery code is not responding at all, not even showing an error! I'm not sure why, but here is the jQuery Code I'm using: /* This part is working fine */ $(".add-blog .blog-add-form .add-article .input-group select").on("change", function() ...

javascriptjqueryhtml

Tips for converting server dates into a readable format in JavaScript

I have been struggling with a seemingly simple problem for quite some time now. I am working with angular.js and specifically using the input type 'time'. The issue arises when the server returns a date in the following format: shiftStarted = " ...

angularjshtmldatetime

"Embrace the power of Bootstrap 3 with a cutting-edge logo,

Looking to design a layout that features a logo on the left and a slogan pane with the navigation bar below it on the right. Check out image #1 for reference. As the screen narrows, the plan is to have the navigation pane move below the logo and slogan. T ...

csstwitter-bootstrap-3navgraphical-logo

Whenever I implement JavaScript validation on my HTML page, it causes the page to become un

Whenever I try to enter more than 30 to 40 characters in the password input field on my HTML page, all web browsers become unresponsive. This issue persists even if I modify the minimum length and other requirements to 50. I am new to JavaScript. <!D ...

javascripthtml

PHP code in Wordpress incorporating an Ajax request

Does anyone know how to fetch user data as a string using ajax in WordPress? I think I understand the basic concept PHP This code goes in my functions.php file add_action('template_redirect', 'edit_user_concept'); function edit ...

javascriptphpjqueryhtmlwordpress

Obtain the current activity

In my code, I have a wrapper div that contains another div. When the inner div is clicked, a message should be displayed. However, the issue arises when the inner divs all share a common class despite having unique IDs generated at runtime. My markup is g ...

jqueryhtml

Searching for all choices within a select dropdown using Selenium and Python

There's a website called noveltop (.net) that hosts web novels, and on each chapter page, there is a dropdown menu where you can select the chapter you want to jump to. I've been using Selenium with Python and the Firefox (or Chrome) driver to e ...

javascriptpythonhtmlselenium

Determine with jQuery whether the cursor is within a specified region

My webpage has a hidden area that is dynamically set to occupy 60% of the window's width and 70% of its height, centered on the page. This means that the area starts at 20% of the window's width and 15% of its height away from the top-left corner ...

javascriptjqueryhtmlcsscursor

What might be causing my CSS animations to fail on Safari for iPhone when they work correctly on all other devices?

I am currently working on developing a website using HTML and CSS (without JavaScript), and I have implemented a keyframes animation in the navigation menu that triggers on :hover and :active states to display a sub-menu. The Issue: The animation function ...

cssioscss-animations

The navigation icon on my website refuses to close

Hey there, I'm having some trouble creating a side navigation menu. The issue I am facing is that the menu opens without any problem, but then I can't seem to figure out how to close it using a second "onclick()" function. If you could take a lo ...

javascripthtmlcss

What is the best way to ensure that the width of dropdown menu items corresponds precisely to the width of the content

I have implemented the Reactstrap drop-down menu: import React from "react"; import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, } from "reactstrap"; export default class DropDownTest extends React.Component { cons ...

htmlcsstwitter-bootstrapbootstrap-4reactstrap

I am trying to replace the buttons with a dropdown menu for changing graphs, but unfortunately my function does not seem to work with the <select> element. It works perfectly fine with buttons though

I am currently working on my html and ts code, aiming to implement a dropdown feature for switching between different graphs via the chartType function. The issue I am facing is that an error keeps popping up stating that chartType is not recognized as a ...

htmlangulartypescriptchart.js