Transcript

00:06 hey everyone i wanted to do a new video
00:10 for the top bar versus your bar
00:14 menu uh this one is an updated version
00:19 it's going to be the top bar all 2022.
00:23 the reason why i'm doing this video is
00:25 two-fold one i didn't like that the
00:27 other one had
00:29 two parts to it
00:31 that's just because i completely forgot
00:32 to do one simple thing
00:34 but also i've figured out a better more
00:38 efficient way to do it so
00:40 it's a lot less confusing
00:43 so let's uh start out i have a normal
00:46 top bar up here
00:48 and
00:49 i am going to show you what that looks
00:51 like first
00:52 so i mean top bar is a great stack in
00:55 and of itself it allows you to have you
00:57 know the hamburger icon with the logo
01:00 uh if you look this is you know what it
01:02 looks like on
01:04 on desktop but we're we're more
01:06 interested in mobile right now so if i
01:09 click on the hamburger
01:11 it gives me my menu
01:14 sub menu
01:15 back menu and it looks nice right but
01:19 sometimes you know you may want to be
01:21 able to
01:23 make something look exactly
01:26 like you want it to look you know maybe
01:28 you don't like the position of the logo
01:30 or you know that this is you know
01:33 centered vertically you know whatever
01:36 it's it's your menu and you want to be
01:38 able to make it look like you want it to
01:39 look
01:40 so
01:42 i have an alternative
01:44 so let me
01:45 turn that off
01:47 and show you this one so this one is the
01:51 top top bar alternative 202
21:56 and so
01:57 oops i need to turn that on here we go
02:00 so i have my hamburger icon
02:03 and when i click on it i have a light
02:05 box that shows up
02:07 and then i have my menu items yes that's
02:09 a lot of menu items i understand
02:12 i just wanted to show that it does
02:14 scroll and it does work
02:16 there you go so
02:18 that is the alternate to top bar
02:22 and you can
02:24 go in here and place a logo if you want
02:28 so i'm going to go ahead and build this
02:29 out and show you how it's done
02:34 okay so the first thing i want to do is
02:38 i'm just going to put a container in
02:39 here
02:40 actually the first thing i want to do is
02:41 put a pin stack why because we love pin
02:45 all right i'm going to put a
02:47 the container inside the pen
02:50 and then i'm going to
02:53 go ahead and
02:55 i'm going to steal
02:57 a couple things so i'm going to steal
02:59 my button
03:02 yeah just i'm going to steal my button
03:07 all right
03:08 put my
03:10 i did not copy
03:18 there we go
03:20 okay so i have my button
03:22 and i have it inside of visibility stack
03:24 because we only want it to be shown for
03:26 small only
03:28 okay and i have my button
03:30 set to open a light box
03:33 and the light box id is going to be text
03:36 small so i'm just going to that was just
03:38 me playing around
03:39 i'll go ahead and make this
03:41 nav small something more realistic
03:45 so i'm going to copy that and then i'm
03:47 going to get a light box
03:51 okay
03:53 and just put that over here
03:55 make sure it's outside the container
03:58 just for organization purposes
04:00 inside my pen nope
04:04 there we go okay so
04:06 my button was set to open nav small
04:11 my light box is going to be nav small
04:14 i'm not going to do anything else here
04:16 okay so
04:18 me the way i like to do my light box
04:21 is
04:23 have a one container
04:26 give it some padding and gutters
04:29 and then just go find the close button
04:32 and throw that in there
04:34 okay so
04:36 here is my
04:38 simple
04:39 light box nothing in it
04:41 and then
04:42 for this i'm going to use a drill down
04:44 menu
04:47 put that inside my lab box
04:50 okay so i'm going to add a few items
04:53 i'm going to make this guy a sub menu
04:56 his drop down
05:01 and copy copy copy
05:03 okay so
05:06 first of all i want to make sure that's
05:08 off okay so first of all i want to show
05:10 you all something that
05:11 keeps coming up i'm going to preview
05:13 this but i'm going to do it in
05:15 desktop so here's my menu i have
05:20 one two three four items
05:22 and if i hover
05:23 it gets cut off
05:25 now why is that
05:27 couple things
05:29 so first of all
05:32 there's not enough content on the screen
05:33 to show it
05:35 so
05:35 if i have
05:37 if i show you this pin
05:38 in here i have a bunch of content okay
05:41 and right now it's turned off so i'm
05:42 going to turn that on
05:44 and now
05:45 you'll see the menu actually shows up
05:47 it's just getting cut off because
05:48 there's nothing
05:50 below it
05:51 to show
05:52 okay
05:53 so if you have a drop down menu but you
05:56 don't have any content yet you're just
05:57 you know playing around with your menu
06:00 first before anything else and you don't
06:02 see the sub menu drop down that's why
06:04 you need content okay
06:07 so i'm going to close that pin up i'm
06:10 going to leave it
06:11 you know
06:12 leave it unchecked because i just wanted
06:13 to show you all that for
06:15 demonstration purpose
06:18 okay
06:19 so i have my thing i'm gonna go back to
06:22 mobileish
06:23 okay so here's my
06:26 here's my menu okay
06:31 let's see
06:32 okay
06:34 so with the drill down menu
06:37 there are a couple of things that we
06:38 need to
06:40 adjust first of all we need to turn off
06:42 auto height
06:43 okay
06:46 so that is going to allow us to have the
06:48 menu actually work
06:50 properly okay
06:55 what i'm going to do real quick is copy
06:57 this
06:59 quite a few times if you notice before i
07:00 had a lot of sub menu items and this guy
07:04 i'm going to just name it
07:06 last
07:08 menu item last okay
07:11 so if i come in here
07:14 i can see all my menu items right
07:17 okay
07:22 what we want is we just want to have one
07:24 menu
07:25 to deal with at least i do i don't like
07:28 having to
07:29 deal with a desktop version and then a
07:33 a mobile version i like to have one menu
07:35 that i can just play with right
07:38 so
07:38 if i take this menu though and i put it
07:42 inside the container
07:44 it's going to be
07:45 vertical right because it's a drill down
07:47 menu
07:48 so what we want
07:50 is to make it
07:51 horizontal
07:53 and drop down on
07:56 desktop so to do that
07:58 we come over here to the responsive
08:00 behavior
08:01 medium horizontal
08:03 transform medium drop down okay so when
08:06 we do that
08:09 it's going to look like this okay
08:11 so we're gonna have our our menu
08:14 let me
08:17 i think i have my other menu here
08:21 turned on still there we go
08:24 there we go okay
08:27 so
08:34 all right now i'm going to take this
08:35 menu
08:37 and put it back in my live box okay
08:44 so
08:45 it doesn't show because it's inside the
08:46 light box go back to mobile
08:50 okay now where did my menu go it
08:53 disappeared
08:54 there's a couple things that we need to
08:56 do
08:57 so
08:59 gonna get our
09:01 swatches
09:03 pallet over here
09:06 okay first thing we need is a width
09:09 swatch
09:13 and the class we want to put on it is is
09:17 drill down
09:19 okay
09:20 and then what we want to do is go to min
09:23 max
09:24 and do detail
09:26 minimum is pixels max is percent
09:30 0 and then we're going to set this guy
09:31 to 10
09:33 and
09:34 important
09:36 and now if we do this
09:38 we see our menu okay
09:41 but you'll notice something we only have
09:43 three items now
09:45 what's going on
09:47 i have
09:48 a lot i had
09:51 i don't even know how many that is but
09:53 it's more than three
09:55 so how do we fix that okay
09:57 i'm good first of all i'm going to click
09:59 on the drill down
10:00 and i'm going to set a couple other
10:02 things just for you know
10:05 pretty purposes
10:06 so i'm going to leave horizontal to be
10:10 that in the horizontal i'm just going to
10:12 leave inherit
10:13 but for text alignment i'm going to do
10:15 center
10:17 and the reason why is just because i
10:19 like
10:20 a centered menu
10:22 like that
10:23 okay
10:25 so how do we fix the
10:27 only showing three items thing well
10:30 if you have the swatch pack then it's
10:33 pretty easy you can just go in here and
10:35 do
10:36 overflow
10:40 and then do is
10:42 drill down
10:45 spelled properly
10:47 okay
10:48 and then you want to do visible
10:50 actually let's see if that fixes it
10:53 it does there you go
10:56 all right but
10:58 if you are not a cool kid and you don't
11:01 have the swatch pack
11:03 then you can simply put in a css watch
11:08 and then do
11:09 is
11:10 drill down
11:12 and then you can do
11:16 over flow
11:18 colon
11:20 visible visible
11:24 preview that
11:26 and boom there you go
11:29 all the way down to the last item
11:32 okay so then the last thing i guess you
11:35 know
11:36 for a mobile
11:38 menu would be to
11:40 position at least i like to have the the
11:43 hamburger icon
11:45 always visible so i'm going to put a
11:48 you know position class
11:51 or position swatch and do hamburger
11:52 button
11:54 position
11:57 hamburger button to the browser top left
12:01 and then
12:02 preview
12:04 it's always there
12:06 if you wanted to
12:07 you could
12:09 come in here and just kind of like the
12:11 top bar
12:12 we'll go
12:14 to column put the button in there
12:17 and then i'm going to steal
12:20 my logo
12:22 from over here
12:27 put that in here
12:30 okay so
12:32 all right so right now that's going to
12:33 be
12:34 you know centered
12:37 actually since the button is positioned
12:39 with the position swatch you don't even
12:40 need to do that
12:42 you can just put the one column in there
12:49 and then get rid of that
12:51 there you go so now the logo centered
12:55 hamburger is always there
12:58 and if you wanted to obviously you could
13:00 you know align it right and you know
13:03 do whatever you want just remember if
13:05 you align it left it's going to be you
13:08 know
13:09 in front of the hamburger button so
13:11 you'd probably want to put some padding
13:12 on it or you know figure that out but
13:15 you get the idea so so anyway i hope you
13:17 guys found this useful i am sorry for
13:21 um misleading on the last video um i
13:25 thought i had a good solution
13:27 but
13:28 and it was it was a pretty good solution
13:30 but the only problem was and and i
13:32 typically don't have a whole lot of sub
13:34 menu items when i make a menu
13:36 and
13:38 the sub menu items just were not working
13:41 they would only show three or four
13:43 however many uh it wanted to so this
13:47 this solution
13:48 definitely fixes that and makes it for a
13:51 better alternative
13:53 to the top bar so all right
13:56 see you guys at the hangouts"}]