intoday's video, we'regoingtocreate a fullyresponsivenabourthatwhenitbecomestoosmall, willshow a hamburgermenuthatwilldropdownouroptionsandexpandingcollapseasneeded.
Let's getstartednowtogetstarted.
I haveanHTMLfilewiththeboilerplateHTMLcodetoimportaredifferentstylesheetswe'regoingtocreateaswellasourjobs.
GoodFather, we'regoingtocreateandinsideofthebody, wejustneedtoputourhtmlfortheknaveAresowe'rejustgoingtouse a knaveelementwiththeclassofnahbarksthatwecanuse.
Giveitthetitleof a classofbrandtitleandinherewe'lljustput a brandnamebecausethisisgoingtobethenameofsectionofourbrandis, asyoucansee, thatpopsupinthetopleft, andthenweneed a secondsectionwhichisgoingtocontainournap.
Bartlinks.
Sowhichpoint?
LeadanotherdeferthatGiveit a classhereofthenabourlinks.
Andtheninsteadofhere, we'regonnaputourdifferentlinksandwe'llputtheminsideof a nordestejustbecausetheyhavelistitem.
Andeachoneofthesewillbe a listitemwithananchortaginsideofthem.
Andinsideofthisanchor, takewehavehomeisour 1st 1 on.
We'lljustgiveithereon a tripofjust a hashtag.
Sinceit's notactuallygoinganywhere, I'm thengoingtocopythisdowntwicemoresothatwehavethreelinksintotalandthisoneisgoingtobeinouraboutlinkandthenfinally, we'llhave a contactlinked.
Andthenlastly, wewanttolineouritemsinthecentersothatourlinkssincethey'regoingtobesmaller, willlineupperfectlyinthecenterofourbrandname, whichisgoingtobe a largerLastly, sincethisisgoingtobeourhavebarthetop, wewanttogiveit a backgroundcolorthat's goingtobedarkersowe'lljustgiveit a reallydarkgraycolor.
Wewanttomakeallthetextinsideofitwhitebydefault.
Sonowifyousaythat, weseethatwehave a brandnameoverhereontheleft, Wet, justcenteredontheright.
Wehaveourlinks, whicharecenteredaswell.
Sonowwecanmoveontoactuallystylein a grandtitlefirst, becausethat'llbetheeasiestofthetwotostyle.
I justwanttoremovetheliststylefromthembecausewedon't wantthatunderlinedtobeappearingorhaveanyofthedotsonitsowecanremovethatliststyle, andthenwecanselecttheactualeighttags, theanchortagsinsideofournabourwingshere.
Wecouldjustdothisbyselecting L I andalltheanchorattacksinsideofit.
Sowhat's firstselect a togglebuttonactuallystylehowwewantthistolook, thefirstthingthey'regoingtodo.
We'regonnawant a positionthisabsolutelysowecanforceittobeallthewayontherightsideofourscreenwithoutmessingwiththeflowoftherestofourelements.
Wealsowanttomakeitsoit's positionednotquiteattheverytopofourscreen, sowe'llpushit 0.75 R E m fromthetopofourscreen, andwe'regoingtodothesamething, butone r e m fromtherightsideofourscreen.
Wewanttogivethem a backgroundcolor, fearofwhitesothattheyshowuplookswhite, andthen, lastly, just a littlebitof a borderradiusaroundthesesothatwecansee a littlebitof a roundingoffthecornerswouldjustsay 10 pixels, forexample, likethisbeforetheradius.
Andifyousaythat, weseewithourhave a hamburgerandyouuphereinthetoprighthandcorner, whichisperfectanditlooksexactlyaswewantedto.
Soifourscreenislessthan 400 pixelswide, weknowthatwewanttorunthecodeinsideofthismediaqueryandyourmediaquery, maybe a differentvaluehere I havemybrowserzoomedin 250% Soit's easierforyoutosee, soyoumayneedtouse a largernumberssuch a 600 asopposedto 400.
All I thinkthatreallyneedstobeleftisIndiatoremovesomeofthepaddingthat's aroundtheseelementsbecausethey're a littlebittoofarspacedout, inmyopinion.
SoitwasGodownhere.
We'regoingtoselectournavbarlinksagain.
We'regonnaselectactualanchortagsthistime.
We'rejustgonnachangeourpattingontheseanchortagstobe 0.5 r e m inone.
Artie.
Um, andif I spelleditcorrectly, youseethatwenowhaveourelementsbeingcloselyspacedouttogetherasopposedtobeingfartherspacedoutaswewantonthelargerdesktopview.
intoday's video, we'regoingtocreate a fullyresponsivenabourthatwhenitbecomestoosmall, willshow a hamburgermenuthatwilldropdownouroptionsandexpandingcollapseasneeded.