THREE LINES NOT SHOWING

[seb29chaba]

No description provided.

[MrcoPierre]

Hi, did you find the answer to your issue? I have the same concern. I did exactly what has been shown yet I the toggle bar is still now showing.

[deviedg]

Having the same issue right now

[henryripcord]

Currently facing this issue right now

[MrcoPierre]

Well, I just copy-pasted the source code until on the three lines only so I won't spoil what I'm doing lol. The 3 lines are now showing.

[codebyamber]

This happened to me too. My error was in the first one. Makes sure there is a space in between toggle and .bar from both of these:
.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff;
}
AND
.navbar__toggle .bar {
display: block;
cursor: pointer;
}
AND THESE TOO
#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}

#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45 deg);
}

#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45 deg);
}

[henryripcord]

This happened to me too. My error was in the first one. Makes sure there is a space in between toggle and .bar from both of these: .navbar__toggle .bar { width: 25px; height: 3px; margin: 5px auto; transition: all 0.3s ease-in-out; background: #fff; } AND .navbar__toggle .bar { display: block; cursor: pointer; } AND THESE TOO #mobile-menu.is-active .bar:nth-child(2) { opacity: 0; }

#mobile-menu.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45 deg); }

#mobile-menu.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45 deg); }

thank you

[henryripcord]

This happened to me too. My error was in the first one. Makes sure there is a space in between toggle and .bar from both of these: .navbar__toggle .bar { width: 25px; height: 3px; margin: 5px auto; transition: all 0.3s ease-in-out; background: #fff; } AND .navbar__toggle .bar { display: block; cursor: pointer; } AND THESE TOO #mobile-menu.is-active .bar:nth-child(2) { opacity: 0; }

#mobile-menu.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45 deg); }

#mobile-menu.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45 deg); }

did your toggle work cos mine didn't, although its showing but it isn't toggling

[JoyEdet206]

This happened to me too. My error was in the first one. Makes sure there is a space in between toggle and .bar from both of these: .navbar__toggle .bar { width: 25px; height: 3px; margin: 5px auto; transition: all 0.3s ease-in-out; background: #fff; } AND .navbar__toggle .bar { display: block; cursor: pointer; } AND THESE TOO #mobile-menu.is-active .bar:nth-child(2) { opacity: 0; }

#mobile-menu.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45 deg); }

#mobile-menu.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45 deg); }

did your toggle work cos mine didn't, although its showing but it isn't toggling

Mine also. Did you find a solution to yours?

[lunasymons]

I have been down since after just getting back on my feets today that is why I am able to write here. But I did not succeed and will try out more. Did you succeed on your path?

…

On Wed, 20 Apr 2022, 17:22 MrcoPierre, ***@***.***> wrote: Hi, did you find the answer to your issue? I have the same concern. I did exactly what has been shown yet I the toggle bar is still now showing. — Reply to this email directly, view it on GitHub <#7 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXQGKAT632VGDPOUJNFA7ATVGAVMLANCNFSM5JOGKK4A> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[Tuggummi]

At the first navbar__toggle .bar, make sure there is a dot, not a hashtag before navbar!

It should look like this
.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff;
}

Then the lines will show!

And if it's not showing the menu, make sure there is a dot instead of a colon at .navbar__menu.active

I changed this and now it works!

[Mattay22]

i was missing the px on the line: @media screen and (max-width: 960px) {

[itsvanshchavda]

Paste the code i give you in the media query for 960px

` /Focus on navbar bars we make with span/
.navbar_toggle .bar{
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background:#fff;
}

.navbar_toggle {
    display: block;
    cursor: pointer;
    z-index: 100; /* Set a higher z-index to ensure the icon is on top of other elements */
    position: relative; /* Make sure the position is set to relative or absolute */
}

#mobile-menu .bar {
transition: opacity 0.3s, transform 0.3s;
}

/* Show the middle bar (bar 2) of the close button when the menu is active */
#mobile-menu.is-active .bar:nth-child(2) {
    opacity: 0;
}

/* Rotate and move the top bar (bar 1) to form an X shape */
#mobile-menu.is-active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

/* Rotate and move the bottom bar (bar 3) to form an X shape */
#mobile-menu.is-active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/*Issue is becasue of the trasnsition the three lines are justshow the animation and get rid of that */`

[StardustIsArt]

I have tried all the above and no changes. I also have the logo shifting over to the right when the size of the screen gets smaller.

my css below"

`* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
"Lucida Sans", Arial, sans-serif;
}

.navbar {
background: #110325;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1rem;
position: sticky;
top: 0;
z-index: 999;
}

.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 10px;
}

#navbar__logo {
background-color: #3db7c5;
background-image: linear-gradient(to top, #5608ff 0%, #99ffe9 100%);
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 3.2rem;
font-family: "Acme", sans-serif;
}

.fa-gem {
margin-right: 0.5rem;
}

.navbar__menu {
display: flex;
align-items: center;
list-style: none;
text-align: center;
}

.navbar__item {
height: 80px;
}

.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
}

.navbar__links:hover {
color: #3db7c5;
transition: all 0.4s ease-in-out;
}

@media screen and (max-width: 640px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}

.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 1;
transition: all 0.5s ease-in-out;
height: 30vh;
z-index: -2;
background: #030129;
}

.navbar__menu:active {
background: #030129;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 30vh;
font-size: 1.6rem;
}

.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #fff;
}

.navbar__toggle {
display: block;
cursor: pointer;
z-index: 100;
position: relative;
}

.navbar__item {
width: 100%;
}

.navbar__links {
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}

#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}

.navbar__toggle .bar {
display: block;
cursor: pointer;
}

#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}

#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}

#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}

}
`

[H33T589]

yes, it wasn’t working for me too, i sat and stared and compared the code. there were no errors, an error i found in mine was the space bar in the "toggle .bar" MAKE SURE YOU HAVE SPACE. another thing i screwed up is i forgot to put .navbar in one of the lines. but i fixed it and now the lines work... make sure you have:

.navbar__toggle .bar{
    display: block;
    cursor: pointer;
}

instead of

.navbar__toggle.bar{
    display: block;
    cursor: pointer;
}

[Enock4212]

this is my source code ....i don't know where i went wrong the three lines ain appearing at all
could you be of help please??

*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
}
.navbar{
background: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
}

.navbar__container{
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 50px;
}
#navbar__logo{
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color:transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}

.fa-gem {
margin-right: 0.5rem;
}

.navbar__menu {
display: flex;
align-items: center;
list-style: none;
text-align: center;
}

.navbar__item{
height: 80px;
}
.navbar__links{
color: white;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
}
.navbar__btn{
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100% ;
}
.button{
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 4px;
background: #f77062;
color: #fff;
}

.button:hover{
background: #4837ff;
transition: all 0.3s ease;
}
.navbar__links:hover{
color: #f77062;
transition: all 0.3s ease;

}

@media screen and (max-width: 960px) {
.navbar__container{
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}

.navbar__menu{
    display: grid;
    grid-template-columns: auto;
    margin: 0;
    width: 100%;
    position: absolute;
    top: -1000px;
    opacity: 0;
    transition: all 0.5s ease;
    height: 50vh;
    z-index: -1;
    background: #131313;
}

.navbar__menu.active {
    background: #131313;
    top: 100%;
    opacity: 1;
    transition: all 0.5s ease;
    z-index: 99;
    height: 50vh;
    font-size: 1.6rem;
}

#navbar__logo{
    padding-left: 25px;
}
.navbar__toggle .bar{
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
    background: #fff;
}
.navbar__item{
    width: 100%;
}

.navbar__links{
text-align: center;
padding: 2rem;
width: 100%;
display: table;
}

#mobile-menu{
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}

.navbar__btn{
padding-bottom: 2rem;

}
.button{
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0;

}
.navbar__toggle .bar{
display: block;
cursor: pointer;

}

#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}

#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45 deg);
}

#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45 deg);
}

}