THREE LINES NOT SHOWING

[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: .navbartoggle .bar { width: 25px; height: 3px; margin: 5px auto; transition: all 0.3s ease-in-out; background: #fff; } AND .navbartoggle .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: .navbartoggle .bar { width: 25px; height: 3px; margin: 5px auto; transition: all 0.3s ease-in-out; background: #fff; } AND .navbartoggle .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: .navbartoggle .bar { width: 25px; height: 3px; margin: 5px auto; transition: all 0.3s ease-in-out; background: #fff; } AND .navbartoggle .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: .navbartoggle .bar { width: 25px; height: 3px; margin: 5px auto; transition: all 0.3s ease-in-out; background: #fff; } AND .navbartoggle .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 https://github.com/briancodex/html-css-website-v1/issues/7#issuecomment-1104132713, 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; }

.navbaritem{ height: 80px; } .navbarlinks{ 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);
}

}