Sidebar Toggle Menu using HTML & CSS || By doubleA studio

In this tutorial u can learn how to create a sidebar toggle menu using html & css .
plz like and subscribe
Follow me on facebook : / doubleastudiorock

[@uj_101]

I watch more than 10 videos but this was the most useful one . Thanks for the video

[@doubleastudio3323]

Thanks man!
Don't forget to subscribe and share with your friends.

[@chinweezeamama7127]

Thanks, very clear and exact and workable. God bless u.

[@doubleastudio3323]

many many thanks dear

[@mehdiazizrafi5583]

Nice Tutorial. Can you tell me how to create the sidebar like youtube(Toggle Menu Button will be in header and the sidebar will be in body)

[@wxstedwrld2827]

awesome tutorial !
thank you very much

[@anantharamanomkarabindusam3441]

I like very much and I have subscribed you
Pls upload daily tutorial
I'm eagerly waiting Sir,
Really thanks

[@doubleastudio3323]

i m trying my best for u

[@anantharamanomkarabindusam3441]

@@doubleastudio3323 Sir, can you pls give me your whatsapp number for any doubts?👍👍👍
Because your tricks really working

[@doubleastudio3323]

8271437736

[@anantharamanomkarabindusam3441]

@@doubleastudio3323 thanks sir

[@harshikavlog235]

You are not saying any word but I understand everything!!!
Thank you 😊

[@doubleastudio3323]

Thank u. Dont forget to subscribe and share with your friends

[@roachjuice5222]

Awesome video, thanks bro!

[@saipraneethbommana4335]

Thank u bro
I have subscribed u :) :) :)

[@AutomationTank]

Great Job 👍, I found it so useful. Thanks!

[@doubleastudio3323]

thanks man! Don't forget to share with your friends

[@kyleparsotan6799]

@@doubleastudio3323 Can you look at this for me and ask why it it not working either: portfolio-kyp.netlify.app/ when in phone. both the side navbar and the spinning icon not open and closing.

[@shivamsinha5394]

Awesome video 👍

[@shaunthomas1684]

Awesome Video Bro! keep up the educational content

[@doubleastudio3323]

Thanks man.
dont forget to share with your friends and do subscribe

[@shaunthomas1684]

@@doubleastudio3323 done bro

[@supritamurmu2165]

Nice explaination thank you 👍👍

[@doubleastudio3323]

Thank you. Don't forget to share with your friends and family

[@qqwertyzzxcvb1921]

Yeah! , its working, now to make the window move back and forth smooth.

[@sibipatel2227]

Your video was really a very helpful for me ...thnku sir 🙏

[@doubleastudio3323]

dont forget to share with your friends and do subscribe

[@mdrashidhussain7168]

Very nice easy to implement

[@doubleastudio3323]

Thanks man!
don't forget to share with your friends

[@danielmulugeta780]

simple but effective to learn.

[@doubleastudio3323]

Thank you.
Don't forget to subscribe and share with your friends.

[@psboy4434344344]

Great job

[@doubleastudio3323]

Thanks man!
Don't forget to share

[@pkpanchlivlogs2568]

thank u so much .this tutorial is realy helpfull.

[@doubleastudio3323]

don't forget to share with your friends and family.
Best of luck!

[@spaceorama3575]

can you please put the code in the video description? If anyone wants to have it, they can first look up there. Thank you!

[@doubleastudio3323]

Thanks you for a valuable feedback.
I will definitely work on this.
Don't forget to share with your friends
And do subscribe

[@mdrashidhussain7168]

Onclick Transition duration lga sakte hain..?????

[@doubleastudio3323]

Sure, Just add " transition-duration:1s; " on the css file under #sidebar.active and #sidebar

[@harunerdil1596]

İ look for 1 hour for the code didi wrote but i can find the bug pls give me the code sourde , Thanks and keep doing this tutorials

[@doubleastudio3323]

thanks man
give ur mail id for source code

[@pawanrai937]

[e-mail] this is my email id please share source code

[@rimamanjur4428]

awesome.......thkxxxx

[@doubleastudio3323]

Don't forget to share with your friends and family

[@realmcraftplays6743]

Nice music 😍😍😍

[@doubleastudio3323]

Thanks 👍

[@marineoutsource]

it's not working with Microsoft Edge but works fine in othe browser... can this be fixed?

[@hajji384]

Yes. Use Google chrome

[@amjadahmadzai7947]

Great job my respect sir

[@doubleastudio3323]

Thanks man.
Don't forget to subscribe and share with your friends

[@dotto4450]

hey whats the use of the "#". Im currenty practicing. thank you

[@edihadzic1554]

it just means that the path is not defined otherwise you would get a error page not found

[@rekha8678]

Very Well Made !
Mine Java code doesn't work ?
Any idea

[@doubleastudio3323]

Check your code thoroughly, you will find the error

[@rekha8678]

@@doubleastudio3323 checked 4 times

[@doubleastudio3323]

What is not working

[@clairefronda9295]

how to put codes in the navigation bars to function, example if i where put the contact information in the contact bar, what will i do

[@doubleastudio3323]

Can u Explain more clearly what u want!!

[@adaymariatrixied.4644]

Using anchor? Correct me if I'm wrong 😅

[@vikaskumaryadav2015]

Thank u so much dude😊

[@doubleastudio3323]

kindly subscribe and don't forget to share with your friends and family

[@alexlions8633]

great ))

[@doubleastudio3323]

Thanks. Don't forget to share with your friends and family

[@andreutas]

Great tutorial, Can you email me the source code for this one?

[@amruthasumod6930]

Hey, I updated my astra theme and toggle button appeared instead of horizontal navigation menu . Can you please help me to change back to horizontal navigation menu ?

[@doubleastudio3323]

sure. Can U tell me the issue in detail

[@amruthasumod6930]

@@doubleastudio3323 yes. Now I have mobile menu or hamburger menu in desktop version of my site and also on mobile site. It was earlier horizontal menu for desktop and hamburger menu for mobile. I updated the wordpress theme to astra and the menu changed to hamburger. And I can't find the" header builder" option in the customize menu of elementor too. Can you please help me here?

[@ykrodem733]

thank you so much for this

[@doubleastudio3323]

dont forget to share with your friends and family.
Best wishes!

[@devrajpatil3524]

Thank you it is working

[@doubleastudio3323]

Thank u. Dont forget to subscribe and share with your friends and family

[@ultimateprotech8191]

Do we have to write the java script.

[@doubleastudio3323]

Yes man

[@islamictv.990]

Thanks for help

[@doubleastudio3323]

Thank you man.
Don't forget to share with your friends and do subscribe

[@maamomacaan3423]

Thinks teacher

[@usama5619]

great ,
Tnx

[@doubleastudio3323]

thank u
Dont forget to share with your friends and do subscribe

[@mohammedsadhiq5567]

NIce tutorial sir, but how come list doesnt have bullet points ?

[@doubleastudio3323]

there is a css Property called list - Style - type, using this bullet list will not shown

[@surajbadjatiya4925]

Sir right side slidebart par video banawo

[@doubleastudio3323]

Sure, I will never let you down

[@dilpavittarsingh5684]

Thanks yrr

[@doubleastudio3323]

Welcome.
Don't forget to share with your friends and family.

[@maamomacaan3423]

Hind the people increas very learn porogarme cumputer hyker all

[@preranapatil8397]

thank you

[@doubleastudio3323]

Don't forget to share with your friends

[@andromedaanne9251]

how???????? .toggle-btn didn't work even the span

[@doubleastudio3323]

try again , it will definitely work

[@muhammadarifzikirrisky446]

what will happen if we're not use javascript in this video ?

[@doubleastudio3323]

Here if you don't use JavaScript,then the toggle menu will not work.
Thank you for your query!!
Don't forget to share with your friends.
Have a great day

[@sahildudani4658]

I want to use this toggle button in nuxt. Js so i will get error in javascript?

[@doubleastudio3323]

Can you tell me the error

[@sahildudani4658]

@@doubleastudio3323 the error is not showing but the run is not even happening

[@doubleastudio3323]

Check your code thoroughly.It will work

[@vikramchharia3244]

my sidebar is not staying at a place
and is closing itself i have to hold the click to let it open what,s the problem
here is my code:
side bar

function togglemenu(){
document.getElementById('sidebar').classList.toggle('active');
}


*{
margin: 0;
padding: 0;
}
#sidebar{
position: fixed;
width: 30%;
height: 100%;
background-color: black;
left: -30%;
}
#sidebar li{
color: white;
font-size: 30px;
border-bottom: 1px solid gray;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
.toggle-btn{
position: absolute;
left: 105%;
top: 15px;
}
.toggle-btn span{
display: block;
background-color: black;
width: 30px;
height: 5px;
margin: 3px;
}
#sidebar:active{
left: 0;
}








home
home
home
home

[@matthewm3918]

Thanks for pasting this code! For #sidebar.active{left: 0;} you used a colon : instead of a full-stop!

[@glenwarner162]

This was pretty good until I couldn't read the text on the screen anymore (~2:58).

[@doubleastudio3323]

Please do subscribe

[@doubleastudio3323]

Dont forget to share with your friends and family

[@FROVIOFF]

please bro give me this toggle btn source code please it is not working

[@doubleastudio3323]

share your email id

[@vishalanand2936]

my code is not working .... i try it so many times..

[@doubleastudio3323]

It will definitely work, check if there is any mistakes you have done and correct it. Thank you
Don't forget to share with your friends.

[@vishalanand2936]

@@doubleastudio3323 its my code

VISHAL ANAND

*{
margin:0;
padding:0;
}
#sidebar {
position: fixed;
width: 30%;
height: 100%;
background-color: #000;

}
#sidebar li {
color: #fff;
padding: 30px;
color:#fff;
text-align:center;
list-style-type:none;

}
.toggle-btn {
position: absolute;
left: 105%;
top: 15px;
}
.toggle-btn span {
display: block;
background-color: #000;
width: 30px;
height: 3px;
margin: 3px;
}
#sidebar.active {
left: 0;
}



function togglemenu() {
document.getElementById("sidebar").classList.toggle("active");
}











Home
Settlement
Bulk Upload

[@okba3104]

You used js in your vedio leysr

[@romnath604]

I fully copied your content but my sidebar is not working

[@doubleastudio3323]

there is no any error, try again it will definitely work
do subscribe
thanks

[@dilpavittarsingh5684]

Yrr mera to hua nai menu baar ko click krta hun to ata ee nai h content

[@doubleastudio3323]

check your code throughly. It will surely work.

[@aradinac]

My toggle button is also missing is with the sidebar

[@doubleastudio3323]

please check your code thoroughly

[@doubleastudio3323]

lt will surely work

[@dianavagge6351]

i tried this but the output is not appearing

[@doubleastudio3323]

Kindly check your code throughly, there is some mistake. If not solved I will surely help you

[@franciscanayon3215]

Bro mine is not working please send me the codes

[@doubleastudio3323]

send me ur mail id

[@numanqaiser4135]

you are doing all work only in css and html or little bit use of javascript or any other language

[@doubleastudio3323]

yaa, we use html for markup and css for styling and JavaScript for little much animation.

[@doubleastudio3323]

don't forget to share with your friends and family

[@priyaravi3959]

can u please send the code in this video its random process so we cant check the code so pls share the code separately

[@doubleastudio3323]

sure

[@doubleastudio3323]

send ur mail id

[@doubleastudio3323]

chek ur mail

[@centinajoshualemuelz.362]

doubleA Studio hey can ihave the code to? my gmail is [e-mail]

[@doubleastudio3323]

sure man, thanks 4 watching

[@sonidhairya9913]

It's work

[@doubleastudio3323]

don't forget to share with your friends

[@ashwinkachu1450]

Brother mine is not working pls send me the codes

[@doubleastudio3323]

email id??

[@rlnikhilaa3894]

Hello pls can u send the code to mail
[e-mail]

[@doubleastudio3323]

Sure,
Check ur mail
Don't forget to share with your friends
Have a great day!!

[@althafihsan5281]

Bro toggle menu is not working. Will u put your code in the discription

[@doubleastudio3323]

send your mail id. I will send you the codr

[@althafihsan5281]

@@doubleastudio3323 [e-mail]

[@doubleastudio3323]

Check your mail and don't forget to share with your friends and family.
Do subscribe

[@althafihsan5281]

@@doubleastudio3323 bro how to show sidebar over the content

[@althafihsan5281]

Iam building a small website when i cluck the sidebar it lies under the background image

[@guitarwrld7255]

Even error idk why

[@deepakgadwal008]

Not working ...

[@mercyvasquez3634]

it doesn't work, could you send me the code to my gmail?

[@ayushkeshri4k]

Yes right it doesn't work

[@mr.khaliloo8897]

Please Can you give me source code

[@mr.khaliloo8897]

my Email [e-mail]

[@doubleastudio3323]

Check your mail

[@markjhonpradia3726]

can i have the code please

[@doubleastudio3323]

send ur email please

[@markjhonpradia3726]

[e-mail]

[@markjhonpradia3726]

thank you in advnce

[@doubleastudio3323]

Check your mail !
Don't forget to share with your friends

[@Aaysha2594]

Without javascript kaise kre

[@doubleastudio3323]

You have to use css transform property.

[@doubleastudio3323]

If you satisfied than subscribe and share your friends

[@Aaysha2594]

@@doubleastudio3323 pls send u r email id

[@Aaysha2594]

@@doubleastudio3323 without javascript pr video bnaiye pls....🙏🏻🙏🏻🙏🏻🙏🏻

[@doubleastudio3323]

[e-mail]

[@franzedades8126]

Can you send me this codes

[@doubleastudio3323]

sure man, send me ur mail id

[@franzedades8126]

@@doubleastudio3323 I only have gmail account [e-mail]

[@doubleastudio3323]

don't forget to share it with your friends

[@karandeepsingh5978]

u used js but

[@doubleastudio3323]

but ???

[@techplacement6566]

Please send that code to me.

[@doubleastudio3323]

send ur mail id bro

[@techplacement6566]

[e-mail]

[@techplacement6566]

And this all code doesn't work on my system

[@techplacement6566]

Please send it just now.

[@techplacement6566]

Please send earlier.

[@syedrashid2247]

instead of wasting the valuable time of audience by typing on notepad, try to speak and describe the process with your voice.

[@doubleastudio3323]

okkk,nxt tym man

[@MrShann-tf7uf]

Copied from some one else. Same code. Maybe

[@doubleastudio3323]

you are right.dont forget to subscribe and share with your friends

[@mercyvasquez3634]

it doesn't work, could you send me the code to my gmail?

[@doubleastudio3323]

sure, ur email id???

[@ravishkhan8087]

@@doubleastudio3323 [e-mail]

[@chiehjenchuang3838]

@@doubleastudio3323 hi there could you plz send me your code, i did everything but cant find what went wrong. my email is [e-mail] thanks :)

[@gyanganga8441]

@@doubleastudio3323 [e-mail]. Thanks in advance