Answered toggle bar not responding

[nil14]

hey a total newbie to web development here , I'm just trying to create a "slide menu"/toggle bar(?) in which you get the item list when clicking the on the the 3 lines , anybody could tell me why it's not working for me ? I copied a code from a tutorial but I don't know how to fix the problem / and yes I activated the function in js .

 

[Johna]

Hi @nil14,
Please do not show pictures of code, but copy and paste it into the code feature (</>).

Also, I need to see more than just a portion of your CSS, I need to see HTML and JS too.

 

[nil14]

Hi @nil14,
Please do not show pictures of code, but copy and paste it into the code feature (</>).

Also, I need to see more than just a portion of your CSS, I need to see HTML and JS too.

hi, thanks for the reply , sorry , here's an github link https://github.com/naex96/art-website

 

[Johna]

So both opening and closing doesn't work?

 

[Malcolm]

In addition to what @Johna mentioned can you also provide the .js code?

 

[Johna]

@Malcolm, I think the JS is in the github link.

hi, thanks for the reply , sorry , here's an github link https://github.com/naex96/art-website

 

[Malcolm]

@Malcolm, I think the JS is in the github link.

Odd, it was empty when I tried yesterday. Could be a cache issue, I'll take a look.

 

[Malcolm]

Hey @nil14,

So I was able to get the toggle bar to work, here are the screenshots:



This can be accomplished from within the styles.css file, you need to replace display: grid under .navbar__menu with display: none. Then under .navbar__menu.active add display: grid.

With this change, we are making sure that when the toggle bar is not active we are not displaying any menu items, however when the toggle is pressed then we display it as a grid.

 .navbar__menu {
    display: none;
    grid-template-columns: auto;
    margin: 0;
    width: 100%;
    position: absolute;
    transition: all 0.5s ease;
    height: 50vh;
    z-index: -1;
    background: red;
 }
    
 .navbar__menu.active {
    display: grid;
    background: black ;
    top: 100%;
    opacity: 1;
    transition: all 0.5s ease;
    z-index: 99;
    height: 50vh;
    font-size: 1.6rem;
 }

 

[nil14]

Hey @nil14,

So I was able to get the toggle bar to work, here are the screenshots:

View attachment 1325View attachment 1326

This can be accomplished from within the styles.css file, you need to replace display: grid under .navbar__menu with display: none. Then under .navbar__menu.active add display: grid.

With this change, we are making sure that when the toggle bar is not active we are not displaying any menu items, however when the toggle is pressed then we display it as a grid.

 .navbar__menu {
    display: none;
    grid-template-columns: auto;
    margin: 0;
    width: 100%;
    position: absolute;
    transition: all 0.5s ease;
    height: 50vh;
    z-index: -1;
    background: red;
 }
   
 .navbar__menu.active {
    display: grid;
    background: black ;
    top: 100%;
    opacity: 1;
    transition: all 0.5s ease;
    z-index: 99;
    height: 50vh;
    font-size: 1.6rem;
 }

yeah it looks much better now , thank you very much !!

 

[Malcolm]

yeah it looks much better now , thank you very much !!

No problem! Happy to help 🙂