Hamburger-Menu | A basic Hamburger Menu Animation using HTML , CSS | Animation library

I ran into a problem as I tried to use the hamburger-menu not only for mobile but for all devices with max 1100px. I am using the shopify debut theme. At first everything went fine. I saw the hamburger-menu and could click on it. But as soon as my window has a pixelcount of 750 to 1100 I can click on the hamburger icon, but nothing shows up. This looks like this (between 750 and 1100px). Instead it should look like this (below 750px).

I already changed the @media only screen and (max-width:750px) to the 1100px and the @media only screen and (min-width:749px) to 1099px inside my theme.css for pretty much every header class. Which made the hamburger icon show up. But now I hit a roadblock. I don't know what I am missing here.

Any help is greatly appreciated. Thanks!

Just in case you need any of these:

My Website URL: www.snow-pearl.com (without any chances to the @media because it is the live version and I dont want to publish something that is not working)

Here is the edited theme.css file (with changes). Here is the used theme.js file. Here is the edited header.liquid file.

when trying to press nav-toggle icon to appear the navbar content, i get this error.

I have been making a burger menu that works on desktop, opens and closes with an event listener.

It works fine but then i wanted to make it so that if the use clicked outside of the burger menu it also closes the menu.

I found a bit of java script that uses some logic to say that if not the navigation then close menu. it works when you click outside the menu but then the problem is that the toggle stops closing the menu.

I split my code up into two sections. The first code block is the code working with the toggle. The second block is the code that i'm using to try and make the click outside the menu work.

I think i have been staring at this for to long and cant seem to find a solution.

thanks in advance for any help.

Given the following:

So my site's navbar shows up differently on Android and iOS phone, on Chrome/Android it looks fine but for some reason, the hamburger icon got stretched out and covers the whole page on Safari/iOS.

I use TailwindCSS and here's my code:

I want to create a chart using "Chartkick" with Vue. But it is not working properly and I am getting some errors. Error:

./node_modules/vue-chartkick/dist/vue-chartkick.esm.js 23:13-14 "export 'h' was not found in 'vue' @ ./node_modules/vue-chartkick/dist/vue-chartkick.esm.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

main.js:

I am running into a problem with making a custom cursor with blend mode exclusion. I have tried a couple techniques but for some odd reason, I added a cursor with blend modes, however it just shows up in the top left of my page and does not move. I want it to be the main cursor but do not know how to fix it.

Codepen: https://codepen.io/ryanforprez/pen/vYyEWyL

I'm a newbie in bootstrap 4 and I'm trying to create a responsive navigation, so far I created a button with class="navbar-toggler-icon" which is supposed to present a hamburger-menu-like icon but it is not and I don't know why. Does anybody have any idea?

Here I'm creating a header with display: flex; for perfect horizontally centering my elements inside that and not vertically centering them. Without using Bootstrap, everything works right, but as soon as I add Bootstrap CSS to my HTML, they just leap into the center of the .container with a little spacing between them, I want my .right-svg and .nike-svg to be placed at the very right and left spaces in their .container.

NOTE: The result f this snippet is exactly what I want it to look like, but please add Bootstrap CSS 3 to this HTML as I did, and the problem will be shown. Any advises is welcome.