Responsive Portfolio Website Project

Responsive Portfolio Website [4] – Menu Overlay & Responsiveness

alright guys in the last video we went ahead and added our JavaScript to add and remove our classes dynamically for the menu we also created the cool ex

effect here when we click our menu so now what I want to do is work on the overlay okay and we have our our nav links right here and nav items but obviously we don't want these to show by

default so we have quite a bit of CSS to write I should say sass so let's go into our menu dot s CSS I'm gonna close up some of this stuff we don't need these and let's just make this bigger alright

so let's go down we'll go all the way down outside of everything and we want to create our menu overlay and we're gonna grab the class of menu and let's position it to be fixed oops position to

be fixed and we'll say from the top we want 0 and then we want the width of it to be 100% and the opacity and you don't have to add opacity if you don't want it to be see-through I like the see-through

effect and what I mean is if we go here you can kind of see that see the page behind it you know if you don't want to add opacity then don't add this if you want it to be just you know gray without

the background but I like the effect of seeing behind it so we're gonna set that to 0.9 and we want this to by default we want the visibility to be hidden right because we don't want the links and or

anything to show by default so let's say visibility and set that to hidden so if I save now we can no longer see it okay now when we hit the button then we want remember the show class is going to be

applied so we want to add for the show attached to the menu so ampersand thought show then we want to set the visibility to visible so let's save that and now if I click this now it's visit

bull okay if I click it again it goes away so let's take care of like the branding and the nav and stuff like that now since the the class name is menu branding what we could do is instead of

and we're gonna go inside here we're gonna nest instead of doing dot menu – branding we could actually say ampersand and then just add – branding whoops that

shouldn't be a zero should be a – branding so that's going to represent this whatever this is and then it's gonna add on to it – branding so we don't even have to do like class menu

branding just a neat little trick now I also want this styling to go for the menu nav okay so we have a class of menu – nav so I'm gonna put a comma here and we're gonna say ampersand – nav alright

so that'll be menu branding and menu nav so we want this to be displayed as flex okay so we want to display flex and let's do let's make it into a column so if we say flex – flow we want to set it

to a column which means going up and down as opposed to right and left and we also want it to wrap okay so we'll save that and if we click this we're not going to see any difference yet but we

want to align the items to this Center so let's say aligned items to Center we also wanted to we want to justify the content to the center as well so we want to align both vertically and

horizontally to the center and then we want both to float left and let's set the width to 50% because we want each each side to take up 50% of the width and for the height we want the height to

be the whole thing so we're going to use a hundred VH okay so viewport Heights where they said like a hundred slices so it's gonna take up the whole thing and what we're talking about is both of

these sides this styling has has to do with both of these so flex is gonna make it into a column so that's gonna make like these links go this way instead of this way align items will Center it will

Center it this way and then justify that way so that it's in the center we're folding both to the left with this 50% so we want to split it in half and both of them have the height of a hundred

viewport Heights we also want to put an overflow hidden because we never want to have any scroll bars so let's say overflow and set that to hidden all right so now let's go back to our

project and try it out so if we click this you see the nav is now down here it's in the middle of its 50% side and there's no portrait there's no image because we haven't added that yet but it

will we will have that we'll also have the background for each side this is just the styling that I wanted to apply to both the branding side and the nav side so now we need to do each separate

one so within the menu okay but outside of this here we want to do ampersand – nav okay so just the nav side and we're going to just margin we're going to zero out the margin and

padding and let's add a background now the background I want it to be I want it to be the primary color but I want to darken it a little bit so I'm gonna use darken just part of sass and we want to

say primary – color and let's set 5 okay so if we save that and we click and now you can see we have the dark gray and since we set the opacity of the menu to 0.9 we can see through it okay so the

next thing I want to do is get rid of the list the icons I'm sorry not the icons the bullet points here so it's an list – style style and we'll set that to none okay I

get rid of those now notice how when this shows up when we click this it just pops in and I don't want that I want it to slide in from the top so we're gonna use something called translate 3d which

is a value for transform for the transform property so as you can see here if transform translate 3d takes in positioning attributes or parameters and you can see each one of these it just

kind of moves it around because of these values that's the zero position so what I want to do is on the nav I want it to not show until the show class is applied and then we want to basically change the

translate 3d parameters so let me show you what I mean we're gonna say transform and then say translate actually translate 3d we want and we're gonna start off at zero 100% zero and

that's going to just kind of take it off the page it's gonna put it it's going to put it up here and then we want it to transition down so we're gonna also include our mixin of ease out so let's

say include ease out now when the show show class is applied to the nav so we want to go down here we want to say amperes amp and then dot show so when that's applied we want it to slide in

from top and we can do that by changing the translate3d parameters so translate i'm not translate transform and then translate 3d and we want to take the values now and just zero them all out so

now if I click this actually I want that to come in from the top since I want it to come in from the top we need to set this to negative 100 because what 100% is doing is its

pushing it down it's pushing it down if we do negative 100% it should be up so it's do- 100 and now it comes in from the top the other side we want to come in from the bottom so we'll do a hundred

percent there but yeah that's that's good now before I work on like how these links look and stuff like that and how they fly in from the side I want to

handle the branding side so let's go still within the menu you still want to be within the menu but you want to go outside of the nav here so to be right here and let's say branding side so

we'll do an % – branding to target the menu – branding class and let's set the background so this background I just want set to the primary color because remember the other one we darkened so

this one will just have just a regular primary color you'll still be able to see through it because the menu class has the opacity and we also want to set the ease out here so let's say include

he's out and we're gonna do the same thing with the translate3d so let's grab this and actually put that right here except this time remember we wanted to come in from the top so it's

this middle value is gonna be 100% we're pushing it a hundred percent up and then we on show we want it to come down so we're gonna do the same thing we'll grab this and show put that in here except

actually no this is the same exact thing we just wanted to come back to its place so it'll slide in from bottom let's try it let's save and now if I click that there we go alright so let's handle the

portrait because right now it's completely empty remember we have a div with the class of portrait inside the menu branding so we won't you still want to be within the branding and this is

where that bracket colorizer comes in handy so you can tell where you're at see the different colors here so we're gonna go right here and let's say dot portrait and we're gonna set the width

of this to 250 pixels we're going to set the height to 250 pixels and then the background we're gonna set that to a URL you could put this in a variable for easier access but I think it's fine so

dot dot slash into the image folder and then we want portrait dot jpg okay I also want it to be circular so we're going to give it a border radius of 50% which will make it into a circle and

then I'm gonna add a border to it which will be Solid 3 pixels and we want it to be the secondary color so let's put the variable of secondary – color okay let's try it out we'll save and now there we

go get the little portrait so now let's handle the nav items so I'm gonna go say right outside here still within the menu and say dot nav – item so let's see we're gonna do the same

thing with the translate3d we basically want it to be off the screen until we get the show so let's say transform translate3d now we're not going up and down we're going left and right so we're

dealing with the first parameter and I'm gonna say 600 pixels okay so basically we're moving it off the screen to the right 600 pixels to start with and we want to include our ease out

and then when the show class comes we can actually just copy this so when the show class comes we want to slide in from right like that all right so yeah let's save that and see what happens

when we click all right now snow tiss how it is sliding in from the right but it's it's not right the whole entire thing is coming in so what we're actually going to do here is create a

delay okay so for each item when it slides in we're gonna create a delay so we're gonna we're actually going to use a sass for loop here I'm gonna go down to the bottom and let's just put a

comment in here and we'll say delay delay each nav item slide by 0.1 seconds so we want to set we want to do a for loop so at 4 and we basically want to just create like if you do a for loop in

Java Script you'll use like X or Y or X or I or something like that as an iterator so I'm going to just use money sign X and we're gonna say from 1 through 4 because we have 4 links okay

are 4 items so it's like it's like in JavaScript doing 4 and then saying like let's I or in this case let X equal 0 and then saying as long as I is as long as I is less than 4 and then I plus plus

it's kind of like doing that in JavaScript or or any language really any for loop so for each one we want to take the nav item so now I've – item and we want to take the nth child so : nth

child remember we can select each one so and child.and in here like if we look at the links the the first one would be this one second third fourth but we want to loop through and we want a variable

in here now I can't just put money sign X that'll give us an error we have to actually wrap this in a number sign and then curly braces it's kind of like a template literal in Java in es6 so if we

do that for each one for each end child for basically for each link here we want to set a transition delay so we'll say transition – delay and we want to set the delay to whatever the variable is so

X which is going to you know start at one go through four and then we want to multiply it by 0.1 seconds okay we don't want them all to be delayed by 0.1 seconds because it'll still all come in

at the same time we want like 1 times this 2 times this 3 times this so that each one comes in separately okay hopefully that makes sense let's save this and then let's try it out and there

we go so they kind of just fly in awesome alright so the next thing I want to do is style the links because right now they're way too small we need you know a little bit of spacing I also want

them to be all capitalized or uppercase so let's let's style those I'm gonna go right here actually let's see where do I want to go let's go right here so we're still within the menu and we're gonna do

our nav links so dot nav – link and let's see what how do we want to style these let's let's display them as in-line blocks in line block and position them relative and

let's let's increase the font size so we'll say font size and I'm just going to use 30 pixels and then let's do a text transform to make them all uppercase and let's set some padding on

the top and bottom so 15 top and bottom and I'll actually we'll just do one rim I'll use REM units and then 0 on the left and right font weight font weight I'm gonna do 300 color we're gonna for

now just set it to white and then let's also make sure that there's no I know there's no underline but just let's make sure so text decoration we want that set to none and then let's let's add the

transition as well so we want to include ease in our ease out so let's save that there we go so if we click come in from the side good so on hover I want them to be the secondary color also the current

page that we're on should be the second and secondary color so the current page is going to be attached to the nav item if we look at the index.html you'll see we add current did I even do it no I

didn't so this first nav item since this is the index.html page I'm going to add the class of current and save and now we'll go back here and for a nav item let's go

down and say ampersand dot current and we want the link so we're gonna say inside that the link is what we want to actually color so let's see we want to say color which will be secondary color

all right so let's save that and check it out okay so now the home is yellow and again we also want hover which is going to go on nav link so I can actually just I'll just put it in here

so within nav link we're gonna say ampersand : hover and we want the color to be the secondary color so now when I hover we get that yellow alright guys so I think I think that's it for the

overlay as far as this now we do have the responsive version to do because if we look at the responsiveness so you can see this looks like crap and then the overlay really looks like crap so we

want to kind of we want to change this up so we're gonna do a couple things but before we do that let's just make a quick commit because we did do the overlay for for basically for desktops

so I'm gonna go to my other terminal here and let's just say git add all and let's do git commit and whoops let's say we'll just do menu overlay alright so we'll go back to our other terminal here

and now let's create some mix-ins for our media queries I like to put them inside of mix-ins when I use SAS so in our config file let's go down to the very bottom and we'll say media query

mix-ins so to do that we'll say add mix in and we're gonna have small medium large and extra large so let's do mobile not mobile we'll say media SM that'll be the name of our mixin and here we want

to put the actual media query so at media and we're gonna do screen and and then the size so we're gonna say max width of 500 pixels okay so this is how you create a

media query and what this means is that any CSS we put in inside of here will only apply if the screen is 500 pixels or less okay so 500 pixels is I don't know it's like around here or something

so anything we put in here would be in for that size now since this is a mixin we're not gonna actually put our CSS in here I want to be able to use this mix in elsewhere so all we have to do is in

here is put content so anything we put inside this mix in in another file we can just we can just add this mix in and it'll get automatically put inside here where we put content so we're going to

just grab this and we need three more so this one here is gonna be let's say medium action any comments it's obvious so media media MD and this is going to be four screens that are 768 and under

okay so 768 and under and then for large so we'll do LG for large we want to do a range so I'm gonna add let's see let's add right here a set of parentheses and we'll say min width so for screens that

have a min width of 769 pixels and I use 69 because it's one pixel after this so if it's 769 if it's between that and a max width of let's say one one seven zero okay so if it's between that whoops

I should have an end here as well let me just close this up so if it's between this and this then this these styles will apply okay so basically if it's between like 768 which I'd estimate like

right here and then 1 170 which would probably be like I don't know right here or something like that that would be the media large now media extra large we want to

to another range so let's say men actually know we don't want to do a range here we're just gonna say men with I want to same end with of one pixel above this which is one one seven one

okay so anything above that is gonna be this this media query so if you want something to only display or whatever if you want some CSS and only huge screens like this then you would you would use

this media query alright so those are the media queries now we need a place to actually put our responsive CSS so I'm going to create a new file inside s CSS called mobile dot s CSS I'm sorry

underscore mobile it's a partial and before I forget let's just go to main s CSS and import mobile like that alright and I'm also going to just restart down here if I'm going to ctrl C and then NPM

run sass again just in case any time I create a new file I reset that so in our mobile s CSS we want to use the mix-ins we just created so this one let's do extra-large first we'll go kind of top

to bottom so this will be for wide screens so to use the mixin we use include and we want media Excel okay so that will be for wide screens and let's just grab this so we want three more so

the second one here is gonna be for let's say desktops and laptops and this is gonna be our large and then this one here is gonna be for tablets I'll say tablets and maybe some small laptops so

this will be medium MD and then this one here is for let's say smartphones so media SM okay so now anytime you want CSS for a specific screen size you just put it within one of these media queries

so I'm gonna save this and let's let's start with just the before we do the overlay let's go to get this figure it out so I want this to be displayed I want everything like in the middle and

in the the main area here on medium screens and smaller so let's go into the MD and let's add main and let's say align – items we want to align these Center I

also want to text a line text a line when I keep doing that 0 text-align:center and save and let's see what are we getting an error down here no mixin named media Excel wait a minute

let's go into our config oh it has a capital L we only want this that this to be capital I don't save that and there we go so now everything's in the middle good let's see so I also want the

heading I'm going to change the line height because see how much space is in between here so inside the main tag right here let's do a dot LG – heading because that's inside the main tag and

we're gonna set the line height to 1 and let's set margin – bottom – 1 REM and save and there we go so that looks good let's see let's make it really small so like right here this is where it changes

to MD so MD large MD large I also want let's see let's let's actually move this down a bit so for the small inside the small I'm gonna say main let's just do main ID home h1 and I'm gonna say from

margin top I want it to be 10 of viewport heights okay and save so just just so when if this is shorter I always want it to be 10 viewport heights I think that's all I need to do for the

home page responsiveness now we want to deal with the overlay because I mean that that actually looks okay but once it gets really small it just it doesn't so we won't want to fix that so all the

stuff that we're going to do is going to be within that the tablets and small laptops because this affects not only the tablet size but anything below that as well so first thing we'll do is add

let's go below the main make sure you're not within the main and let's say you l dot menu – nav as well as the div dot menu – branding so this will be for both and right now they're floated to the

left so they're side-by-side we don't want that so we're gonna say float none we also don't want a width of 50 percent for each we want a hundred percent because we want if we look at the final

project here and we go to medium you'll see that now there are a hundred percent each because they're not floated so let's say with 100 percent let's see we're also gonna set a min height of

zero and then we want to do for the show okay so when the show like when they come when the overlay comes in we don't want them to come in from the top and bottom we want them to come in from the

left and right so we need to change the transform and translate ID properties so let's go still within here we're gonna say ampersand oh and then say transform translate3d

and we're gonna say zero zero zero so that's when when it shows now when it doesn't show we need to change those values with values as well so let's start with the nav the menu nav so I'm

going to go below let's see we want to go right here just make sure you're still within the media query so still within media MD and let's do dot menu – nav and we're gonna set the height of

the menu navin t5 viewport Heights now if we look at the final project you can see this is the menu now if it's 75 viewport Heights so remember a hundred slices it takes up 75 this will take up

25 so let's do height 75 let's do our transform translate3d now instead of coming in from the top and bottom where we would use the middle parameter now we're coming in from the

left and right so we want to use the first parameter so this is going to be negative 100% and then zero zero okay that's its resting place and then on the show it'll come into view but it'll come

in from the side and then finally I just want to change the font size let's say font size to 24 pixels alright so if we if we look at it now it's gonna its it's messed up right because we need to

finish but for now that's what it looks like for the branding for the menu branding let's go right below the menu nav and let's do that so menu branding

and we want to set that height to 25 viewport Heights okay so then the nav is 75 this the branding is 25 and then we need our transform translate 3d and this is going to come in from the other side

so a hundred percent the other one was negative 100 because we want that to come in from the left this one's coming in from the right so we want a hundred percent okay so if we go ahead and check

this out it looks like that which is we're almost there but the image is too big so in your images file you'll notice a portrait dot jpg and a portrait small dot jpg so we need to change the

portrait to that smaller image so within menu branding let's add the portrait class so let's say portraits and set the background to URL and we want to set that to dot dot / IMG / portrait

underscore small dot jpg and then just set the width to 150 pixels instead of instead of 250 and then also the height set that to 150 pixels and save and there we go all right so now if we make

this really small it still looks good everything still looks good awesome so we now have the the men used on the overlay the homepage and the responsiveness in our config file we can

change colors we can change the if we want the image shown stuff like that the opacity just to test the colors let's say I don't know let's choose like like a dark green and then for the secondary

we'll choose a below this is going to be really ugly but let's save and there we go okay now we're gonna create a mix in we'll do this in the next video we're

going to create a mix in that we'll make it so that when it's on a light background for instance if I make the primary color white and save you'll see it doesn't it doesn't look good because

the Texas is white so we can't read it so we want to mix and that will determine what the color should be of the font based on the background color so what we will do that will also start

on the other pages so let's just put this back to dark gray and yellow and then let's just make our commit real quick again you guys don't have to do this but I'm gonna say get add all and

get commit actually we just need AB so get commit and what do we do we we basically made our site responsive so let's just say added media queries and made an you overlay responsive whatever

it doesn't really matter alright so in the next video like I said we'll get to the detect changing the text and then we'll start to create our other pages as well

In this video we will create the menu overlay with the branding and navigation. We will also add our media query Sass mixins to make the site responsive.

Code For This Project:
https://github.com/bradtraversy/moder…

💖 Become a Patron: Show support & get perks!
http://www.patreon.com/traversymedia

Website & Udemy Courses
http://www.traversymedia.com

Follow Traversy Media:
http://www.facebook.com/traversymedia
Posts by traversymedia
http://www.instagram.com/traversymedia