Kevin Powell - Community•2y ago

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?

6 Replies

Jochem•2y ago

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

Pqteras•2y ago

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

Jochem•2y ago

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•2y ago

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.

Pqteras•2y ago

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

Jochem•2y ago

nice, glad I could help!

Gaming

Programming

My SVG hamburger menu is not showing up.