My SVG hamburger menu is not showing up.

Hello,
I am pretty new to html and css and I am currently working on a navigation bar similar to Kevin's from the video called "Responsive navbar tutorial using HTML CSS & JS".

My code looks like this

    .mobile-nav-toggle {
        position: absolute;
        background: url("../Assets/menu.svg");
        background-repeat: no-repeat;
        width: 4rem;
        z-index: 9999;
        border: 1;
        top: 2rem;
        right: 2rem;
        aspect-ratio: 1 / 1;
    }

    .mobile-nav-toggle {
        position: absolute;
        background: url("../Assets/menu.svg");
        background-repeat: no-repeat;
        width: 4rem;
        z-index: 9999;
        border: 1;
        top: 2rem;
        right: 2rem;
        aspect-ratio: 1 / 1;
    }

but nothing is showing up.

I tried using different svg menus that I found across the internet and it seems like the aspect ratio didn't work on 1 of them and it didn't resize the svg to the width that I set it to.

What am I doing wrong?

Jochem•12/30/22, 11:51 AM

double-check the browser console for a 404 on that asset, depending on how you're serving your website that might not be the right path, but that's impossible to tell without more info and/or a live version of the site

JJochem double-check the browser console for a 404 on that asset, depending on how you'r...

PqterasOP•12/30/22, 11:55 AM

My browser loads the svg, its just not resizing, here look:

Jochem•12/30/22, 11:56 AM

ah, then you're looking for https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

background-size - CSS: Cascading Style Sheets | MDN

The background-size CSS property sets the size of the element's background image.
The image can be left to its natural size, stretched, or constrained to fit the available space.

Jochem•12/30/22, 11:57 AM

with extra info here specific to SVGs https://developer.mozilla.org/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds

Scaling of SVG backgrounds - CSS: Cascading Style Sheets | MDN

Given the flexibility of SVG images, there's a lot to keep in mind when using them as background images with the background-image property, and even more to keep in mind when also scaling them using the background-size property. This article describes how scaling of SVG images is handled when using these properties.

JJochem with extra info here specific to SVGs https://developer.mozilla.org/en-US/docs/W...

PqterasOP•12/30/22, 12:01 PM

Yesss thank you so much, now its scaling as I want it to

Jochem•12/30/22, 12:03 PM

nice, glad I could help!