Creating a Multi-Row Header - Oxygen Builder Site from Start to Finish

welcome to an oxygen build series my name is jonathan with permaslug and today what we're going to be doing is starting a multi-part episode series on rebuilding an oxygen website now what i've done so far in the background on this particular project is had my designer create a mockup in figma that's how we build all of our sites for clients and how i prefer to do it because i find that i'm better when i have something visually to pull from rather than trying to create things on the fly so this client is somebody who i know personally that runs a charitable organization called aletha's legacy they are based in florida where i live but they support children in monrovia liberia so the objective of the organization is to build schools and to give back to where the founder zalman harris is from so they came to me asking to kind of manage their website and i suggested we kind of give it a fresh coat of paint get get it on oxygen so that i could better support it and also so that we just had more flexibility for the site so this isn't a full redesign there'll be things that feel very similar but it is definitely going to be better looking and we're going to have more control over the site for uh you know future enhancements and improvements so if we switch over here what you're looking at now is the actual homepage mockup for the new site so this is just intended to be very clean looking we want to make things easy of course our main call to action here is these donate so we have one right here these little flip boxes will have one and then also there's one up in the main header and you can just kind of see this is what the site will look like so we have a few design cues that will kind of carry through the site so these nice rounded edges with some of the sharp corners on these buttons and like this orange block we're going to have this effect on some of the page headers and as you kind of continue down this is pretty standard looking but i think it looks really nice and clean and gets the point across and then their current site looks like this so of course it feels similar but it's just a lot more cluttered and the important information i don't think comes across quite as easily so essentially most of the layout and the content is good to go we're swapping some photos here and there but you can kind of see we're changing layouts a bit and then like for instance we have these company logos down here that just don't fit all that well but in this particular mock-up they just blend in super nicely so what i'm going to be doing is actually pulling from this figma mock-up so like i mentioned already i had my designer work up this particular mock-up and so figma is really great because it translates really nicely from this actual mock-up on screen into oxygen builder so this is definitely my preferred method for building sites i've had designers in the past that used xd or other tools but figma is just number one and the designer that i use now consistently she is amazing and she has just really taken a liking to figma so it's been great now this isn't as simple as just like clicking an element and you know like copy and pasting it we are going to actually build it directly in oxygen but this gives us the perfect framework to be able to do this so what we can do for instance is like if we click on this text link if you look over here in the right side we can see the type of font we can see the styling the size the spacing all those sorts of things and then we can even go over to the inspect tool and see it in a more consistent way that might make more sense to you in oxygen so you can see font name weight style size line height letter spacing alignment colors even the css of this which is amazing so figma just makes it super super easy then like for instance on this you can see just for a second if i hold the alt key then i get the spacing around these edges so i can see we have 15 pixels left and right and 33 top and bottom i can also get the color for this div that i've now selected so i can just simply click that and it copies as you can see then if i wanted this lighter color of course same thing i could just select this there's that color and the color actually didn't change but it's just because i didn't select this other one properly but these are the little nuances that i'm not going to edit out of this we're going to condense it so that it's not cluttered but i want you guys to see in real time what this process actually looks like now so for what we're going to do to get started over here in cloud ways which i start with every single time you can see i have an install called wp oxygen blank and this has all of my standard plugins that we use for basically every oxygen site build it's going to have acf cpt ui it's going to have some management tools that we use like a seo plugin image compression stuff like that that we're going to use on every single site so i just keep this up to date and what we're going to do is just use the cloudways clone feature i'm just going to go to our development server we're going to continue this and then we will jump into the oxygen install as soon as it's done cloning so while we're waiting for the cloudways install to clone one thing that you can do in figma that's really cool is export things at a 2x resolution kind of like a retina resolution maybe and it does actually have a really big impact on quality especially for logos like this that have some more you know intricate detailing so what you'll do is just select the container that you want to actually export and i need to move myself out of the way here so you can see this over here in your design tab if you scroll down there is this export option so what you can do is go ahead and click on 2x and it's basically going to double the resolution for you but when you shrink it back down to the proper size it's not going to look compressed which is really really nice so what i like to do ahead of time is go ahead and export these assets there might be a way to do it kind of all in one but uh for me i find the easiest thing is just to go ahead and do it there's typically not that many individual assets because most of the stuff we're going to recreate an oxygen so this i'm actually going to swap to jpeg and then some of these the designer probably just chose these at her own discretion and again we're going to export jpeg and i actually chose the outside container so i need to make sure that i have the actual image itself selected i actually just realized i exported the wrong thing which is something you'll probably do in figma but essentially i want to make sure that i have the image selected here and i want to export that so this is the correct photo now one thing you can do is just double click quite a few times and get down into these folders and then in this case there's a photo here so once again i will export these jpeg might not be the best but this is easy to tweak in the future same thing i'm just going to go through and export all these assets and then we're going to jump into wordpress i wanted to quickly just ask if you're not already subscribed please consider doing so it does help me in the channel tremendously and i really appreciate it and now i'll let you get back to the content okay so here we are inside of wordpress this is the install that we just cloned off of cloudways and i did lie there are some updates to be run but that always happens as you can imagine now we are using happy files over here which we might really get into later but i do have another video on the channel here about that but i went ahead and just uploaded some of these media items so we have some stuff to work with and what we're going to do is just quickly take a peek at the plugins on here so as i mentioned there are definitely some updates that need to be run but we have acf pro a couple of wp mu dev plugins that i actually do like even though some people don't the wordpress migrator i can go ahead and deactivate that we're not going to need that right now and then a few others we're going to need to create a custom post type for team we have gravity forms we have happy files like i mentioned oxygen smart crawl for seo smush pro for our image compression and optimization and then the dashboard plug-in so you can run automatic updates and check for uptime and things like that so what we're going to do is just go ahead and leave this as is and come over here to oxygen so i do already have a template set up because i use this on every single site so it just saves a little bit of time rather than having to recreate this so what we're going to do is just simply edit it take a look at where it's set so this is how i always set up master templates there's a few different ways to do it but i prefer it to just basically set the singular post type of pages and that's it so we're just going to go ahead and edit this and get started so a habit i'm trying to get into as soon as i get into oxygen is i'm going to go ahead and set up some global styles here so our fonts i believe we had railway as one of them and it looks like we might actually use railway through the entire site so what we can do that's nice and easy is we can just go ahead in our global fonts here and set this to railway and then we also have some colors so let's go go ahead and add some global colors we are going to call this alitha's colors and then we're going to come in here so our color name let's just come back so of course one of our primary colors is this one right here so this is 289 so we'll just copy this guy we will just go main green and then we'll paste that color in there let's go ahead and add another one we have our darker hover color here so if i can get down to this one so this is 1a so we'll call this one main green hover and then we just got to add the pound sign in in front of that so there we go there's our two primary colors and then let's take a look at some of these other ones some things that we use throughout the site is this orange we have this yellow what else do we have that's about it there's a darker color for the footer why don't we go ahead and grab that color we're going to go with just like footer dark the color names don't actually matter it's just for your own reference and then we're just going to call our next one orange and we will grab this color right here e6 and then last but not least we have a yellow color which we'll just grab from basically anywhere on the site they do look very similar we may need to add some of those in here later on make some adjustments but that will work for now okay so we have our colors in there colors and fonts is all we really need to worry about for the moment one other thing might be changing our width here so our page width on this side is actually 1440 pixels but i'm not sure the exact page container width here i do believe these sections are 1440 and then the actual width of the content is going to be something like probably 1100 ish so that there's some padding on the left and right sides so here's a pretty good visual representation uh this is 1227 pixels wide so i think i'll probably change our page container width to 1220 and then that way we can have a bit of spacing on the left and right edges so we might need to adjust this later this is something that is super easy to adjust and as long as you aren't setting specific widths on containers then it's going to be easy to adjust across your entire site later on okay and i just bumped my camera over so we can see the structure panel as we start to get rolling here now of course remember we are editing our sitewide template at this point so you have this previewing drop down there's only a couple of pages that exist on this site so far it doesn't really matter where we're at but what we're going to do is create a div to start off with now you might be wondering why we're going to use a div instead of a section and that is because in this particular case in the mock-up you'll notice that we actually have a double row header here one with a different color and one with the green so our div there is going to essentially wrap both of these and one thing that's important is changing these tags so if you look down here this is something that is in uh later versions of oxygen i think it showed up in like three five or three six but you have these html semantic tags which are very important to use for accessibility and also for seo so we're going to change this main div here to header as our tag then the other thing i'm going to do just for you know ease of use and continuity sake is i'm going to call this div header wrapper and i'm not going to change anything about the width or any padding or anything like that because this is just simply a container it doesn't need to do anything more than that at this point so what i'm going to do now is actually go ahead and add in another div i'm going to expand this here and rename this we're going to call this guy top row and then i'll just essentially duplicate this div and we're going to rename this guy bottom row now what i can do for this top row is go ahead and set the background color on this one to our dark green and this one is actually called footer dark i want to double check this is the same color so this one is the 264 653 is that the global color we have here let's take a look yes it is okay cool so i called it footer dark but it's the same thing it's okay now let me go back to our structure panel and then our bottom row is going to be our main green i do believe it sure is and so you can start to see the beginnings of this so one of those divs will have all the content in this container and then the other one is going to have all the content in this row so next up we need to add in these elements here for the email address and the phone number so we're going to have essentially one div right here that wraps both of these and then we're going to have another one for each of these now these are actually going to be link wrappers for the icon and the email address and then the phone number so that they're clickable but you'll see what i'm going to do it's going to start to get multi-layered here so bear with me maybe a little bit confusing at first but that's okay now i'm going to switch back over here to oxygen and in my upper div i'm going to add in another one so we're going to rename this one left side container inside of this div let's go ahead and pop in a link wrapper element we're going to first of all change this to horizontal middle align and then we'll just go center and then what i'm going to do is add in an icon we're going to change this to i think it's env for envelope and i want to make this white then what i'm going to do is add in a text element once again we're going to change this to white and then i don't know the phone number off the top of my head but it's probably something with an 850 area code so now we have the beginnings of this but obviously everything is looking really cramped so let's go ahead and take our top row i'm going to set this to 100 width and then also this bottom row i'm going to change to 100 width i got to that percent sign by just simply clicking the unit there and changing it from pixels to percentage as you can see now we're probably going to make some adjustments to this later on in terms of our padding and our spacing because right now what's going to end up happening is that content is going to be to the far edges of the page so let me save this real quick and if i take a look on the front and you can see what i'm talking about so of course we don't want this content all the way over here on the left hand side right here you can see that there is kind of an edge that they butt up against so there's a really cool trick for you to be able to do this now what i'm going to do is switch back over here to oxygen and on my main row elements here what i'm going to do is add in a class we're just going to call this al for aletha's legacy which i usually like to put the identifier of the you know business or the brand in the front and then i'm just going to use the name div and then pw for page width and the reason why i'm doing this in a class is so that we can easily replicate this across our site later on so i'm going to add that as a class i'm going to make sure that i'm editing the class and not the id i'm going to go to advanced size and spacing this width i'm going to change to 100 which we already did and that's okay and then our max width we're going to go to 1220 pixels you can see this kind of works but it leaves us some spacing over here which we're not going to want we want that background color to stretch to the edges of the page regardless of how big your browser window is so for that there's a number of different ways that we could do this one option would be to wrap this row with another div and then have a container inside of that i think the easier option here is going to be just adding in a div that will essentially be our width container we're going to pop that up top here and we're going to add in that class we just did i'm just going to type in pw so i can easily find that class and then i am going to basically just add in a text element so i can drag something inside of this stick our left side container in there now what i need to do is go back over here to our top row i'm going to actually delete this class and then on this top row i want to go ahead and center this so now if we save this and once again go take a look on the front end then you can see we have our icon here on kind of the left edge of this container because we set it to take up 100 of the available space but only up to 120 pixels wide so we are definitely starting to make some progress so we probably should go ahead and rename this i'm going to call this one just like i'll call this one page container and then we need to go ahead and add another div to this guy here we're going to add in that same pw class we're going to go back to our bottom row and we want to just center that as well at this point in our left side container we're going to take this link wrapper and let's just go ahead and duplicate this guy so we're going to change this one to a phone icon and i just realized i put an envelope i meant to put an email address so it's info alethaslegacy.org and then there's a couple of things we need to do so we're going to make this icon smaller if you're going to have a bunch of these you probably want to set a class on your icon here instead of doing them manually in this case because there's only two i'm happy to just basically make these adjustments manually this is probably not the most efficient way to do it but this is probably how i would do it on a real site because there's only a couple of these items the other thing you might want to do is add some margin on the right hand side i'm going to guess it's roughly 8 pixels but we can actually go take a look at our mock-up here so i'm going to click this and it's 7 pixels 7 and 8 is close enough i'm going to do 8 just to keep it consistent same thing on this icon right here we're going to go 8 pixels on the right and then what i actually want to do on our left side container here is i want these this to be stacked horizontally we're going to go with middle align and then now on our link wrapper itself on this first one we're going to set some margin i'm going to guess maybe like 16 pixels let's see what it actually is 34 more than i thought okay i'm gonna go with 32 because i'm using increments of eight so far all right and then we definitely want to add some breathing room to this so what do we have in terms of spacing so it's 14 pixels top and bottom and because i'm using increments of 8 once again i'm going to go with 16. so what we're going to do is our top row here we're going to add eight pixels of padding that looks okay i said i was going to do 16. let's take a peek at that 16 starts to look pretty good let's save this and go look on the front end and there we go so we have the beginnings of our top container here our green one is not showing up and it might actually be because we have caching on in cloud ways so let's go over here to applications turn off varnish cache and while we're here i'm going to rename this so we're going to call this one staging and elita's legacy oh i can't put an apostrophe okay so elita's legacy and then now i bet if we save this our second row is going to pop up here nope don't know why that is of course it's not going to work maybe it's something to do with oxygen's cache so we can take a look at that and maybe once we add an element inside of it it's going to show up before we worry about that second row though there is another element in this upper container if we come over here we have some social icons so in this particular case we're going to come back over here i'm going to minimize this left side container i'm going to click on page container and i'm actually going to add in another div let's go ahead and rename this one i need to move over here in the structure panel i'm going to call this one right side container and then for this one i'm going to add in an icon and i will actually use a class on this one so we'll call this one elito legacy social icons now of course these class names can be whatever you want it's better to keep them consistent but for smaller sites like this i don't typically worry about them being like super organized i just want to take advantage of classes as best i can so that will be this we're going to change this color to white and then i'm assuming these icons are probably like 25 pixels as well we are going to use the facebook and then i'll just simply duplicate this guy and we're going to change this one too i think it was instagram was the other one so in terms of layout we need to do a couple of things so what i'm going to do is expand this container so you can kind of see what's going to happen here this right side container i want to be horizontal i'm going to set it to middle align so nothing wonky happens and then what i'm going to do is go to our page container make sure you're on the id and not the class we're going to go to horizontal and then we're going to go to space between once again just so nothing wonky happens on mobile or in other places i'm going to set this to a vertical alignment of middle now what we want to do as well is on these icons add some spacing so instead of doing it on the class because it would apply to both of these icons i'm going to do it on the id for this first one so we're going to go to size and spacing and i'm going to change this to 16 pixels of margin and it just dawned on me that these need to be clickable so we can go ahead and convert these into link wrappers and i don't actually know what the facebook and the instagram links are at the moment so i'm not going to worry about that but all we need to do is just simply insert that link you need to set it here and then you're still good to go your icons still have the class so now if we go ahead and save and look on the front end you can see that everything is starting to line up pretty consistently with our mock-up if i zoom in a bit here try to get it positioned roughly how it looks on the other tab then there we go now i do have some different icons here so i think i probably will change that the phone one is the one that's not filled in and then our social facebook icon is just the f and the basic instagram logo that one's the full one so i think i will go ahead and swap those out so with this phone we might have to switch to linear icon and there is that one which is perfect and then for this facebook icon we don't want the square one we just want the f okay so it's those little things to me that i definitely take the time to fix because it's important that everything looks consistent and proper so i think it's worth the time to make those changes so now we can go ahead and move into our second div here so the first thing we're going to do is add in an image which of course is going to contain our logo so we already have this one uploaded here now i think this logo is like 220 pixels wide and technically what you should be doing is resizing that in photoshop or lightroom or something upon upload so that's definitely something worth fixing but let's go ahead and just check and see how big this logo actually is so it's 200 pixels wide then we have our menu with this vertical line and we have a donate button so we're actually going to do something very similar here we're going to have a left container for the logo and then we'll probably have a right one with the menu this line and then the donate button now i wanted to take a look at how much padding we have but there's something interesting going on here so if you take a look we do have some spacing of 13 pixels top and bottom here on the logo but we have this hover effect that kind of takes all of the available space so i think what we're going to do instead is space this out based on the height above and below our menu links here so this will take a little bit of nuance so it's going to be a little bit crammed until we get to that point in our container here because of course our logo currently is touching the top and bottom edges right there but that's okay so just bear with me the other thing i want to do is make this image a link we're just going to send this to the home page and that's going to convert it to a link wrapper but that's okay i can go ahead and minimize our top row here in the structure panel to clean this up a bit now what i want to do is go ahead and add in another div i'm just going to rename this one menu container and if you've watched my streams or videos before you'll know that i like to build menus manually unless i have a very specific need for you know drop downs and kind of staggered things like that the oxygen pro menu does work i've come to prefer the oxi extras menu component because their drop downs just seem to work better but for now we're not going to worry about that so what we're going to do is inside of this menu container i'm going to add in a text link element this we're going to add a class we'll call this aletha's legacy main menu our text color is going to be white i think our font weight was 800 of memory serves i do believe we had a letter spacing of one pixel and let's see what else we had so font weight of 800 size of 13. i'm gonna leave it as the default for now letter spacing of one line height is just a little bit over one and so yeah that looks pretty consistent with how we have it right now so we're just going to name this home and then we also want to set our typography to uppercase now what i'm going to do on this class here is add in some margin on the right hand side to give us some spacing so how far is that so it's 33 pixels but i don't think we actually want that because we have this background color i think we're going to want to do 15 pixels left and right and in actuality we're not going to want margin in this case we're going to want padding so let's go with our 32 top and bottom and then we're going to do 16 left and right 32 and then 16 and 16. that looks pretty good and then we can just go ahead and duplicate this a couple of times now of course everything is stacking in the wrong direction this is easy to fix let's expand our menu container here click that div and go with horizontal i like to just always go middle and then center even though it's not going to have much impact then what we need to do is come back here to our container here and just set this guy again not on the clasp but the actual id to horizontal middle and then we're going to go space between so let's go ahead and make our links work so we're going to have home and we don't actually have all the pages so i'm getting a bit of a bit ahead of myself there but we haven't about us we'll change this guy to about us and then our last one will be contact and we can just go ahead and change that so some of the other ones we have are events gallery and projects so let's fix those events gallery and then one more we have projects i think those are a bit out of order but that's okay we'll worry about that later let's go ahead and save and see how this is looking on the front end now right off the bat one thing is because we have that spacing on the class element we have that padding it's not quite butting up to the left and right edges you can see the edge of the instagram icon doesn't quite line up we're not going to worry about that at the moment because we have more to come but what i would typically do is go to the id of this particular text link set the padding on the right hand side of this one to zero and then of course it would butt right up to the edge now we have a hover effect on these so what we're going to do is on this text link on the al menu class we're going to switch to the hover state we're going to change the background color here to our darker green and then what we're also going to do is add in a class for a transition so instead of adding the transition to a particular class we can use this across our site in other places so we're going to go with al transition and then we're going to click the advanced tab we're going to go to effects transition our timing duration will be 0.2 seconds and then the function will be ease in out so now what's going to happen is we're going to hover and you can see it has that nice fade in effect but of course that transition is not on these other elements because we need to add that class to them so it probably would have been better for me to do that at the time before i duplicated everything but not that big of a deal because i can just simply add the class to all of these elements so now if we save this i want to go look on the front end and you can see we have this nice hover effect that changes the background okay so next up we have that vertical line and then the donate button so this vertical line is probably going to be best to just use a div and set like maybe border right to one pixel and then solid and then this color here as you can see okay so i think what i'm going to do is create a div and set the height to 40 pixels and then have a border on the right of one so let's just go ahead and do that so we're going to go with the div inside of our menu container here this is me thinking this out in real time so forgive me for it being a little you know not quite as smooth and elegant as it typically is so we're going to set this to a height of 41 pixels the divs have a default height in the oxygen editor i forget exactly what the number is but that's why the height isn't changing all that much oh i set it with width that's not what i meant to do 41 pixels high but nonetheless it doesn't actually change because there's a default width and height to divs and if your number is lower than that then of course it's not going to manipulate the div now i'm going to go with a border on the right side here and it was our 2 6 color i forget exactly which one that was which i actually it's this one our footer color with the one a solid on the right and then we're probably going to want to add some margin to the right hand side of this div maybe like 16 pixels and then just for the sake of clarity so we can see it i'm going to go to mini container here we're going to add in a link wrapper that will be our button and i'm just going to stick some text inside of it so we can see it that looks terrible obviously but we'll fix this so save and then take a look and there is our line that we are trying to achieve however if you're hovering over the contact it butts right up to that line which we don't want and this has messed up the layout pretty bad because our text is on two lines so let's go ahead and actually make this button so we can see what it really does look like now one thing i'm going to do is create some stacked classes for these buttons and the reason why is because i don't want to have to create this button multiple times instead what i want to do is create one class that is essentially the framework for the button and add one more class that will dictate the color so for example i have a white button here i also have a green button here that all look very similar i believe yeah there's a dark version of it right there there's a yellow version so we have a bunch of different colors to these buttons but they all have the exact same shape and styling so let's jump back up here to our donate button and you can see that this one doesn't have a border radius but every other corner does thankfully oxygen allows us to do individual border radii so this is going to be pretty straightforward so let's see if we go over here to our design tab does it actually tell us what our border radius are yeah okay there we go so it's 0 on the top left and then it's 14 in every other spot so we might go 16 to keep everything consistent but essentially what we're going to do is not on the text but on this link wrapper we're going to add a class that will be al button primary this one doesn't really matter this just needs to be a base class and what we're going to do is go with borders we're going to go to edit individual radii so top left is going to be 0 and everywhere else is going to be 16. then what i'm going to do on this one is set the background to white i believe that one is it's actually not white it's a slightly off-white so we'll go ahead and use this i'm going to set this as a global color so we'll call this off white and then let's take a look at our spacing here so on this text we have 7 pixels top and bottom and 21 left and right so it's going to be 21 and then 7 and then on this we're going to change the typography to i'm assuming it's black no it is our footer color i should check these before i just go spouting off it looks fairly similar so that's okay and then our font weight was definitely higher we have an uppercase style what is our font here so 800 it's basically like those other ones so we have a letter spacing of one we have a weight of 800 and then that's about it so font weight of 800 letter spacing 1 and typography is uppercase we're going to just type this out to say donate and so there we go now let's actually go take a look at the homepage so that's starting to look pretty good we need to set a hover effect to this but that's going to vary by button i'm not sure exactly what we're going to do on that but this is looking fairly reasonable now we do need to add some spacing to the right of that hover effect it's going to add probably too much spacing though if we put 16 more pixels on that to adjust it out so maybe that is the intended behavior because that one's 31 and that one's 25 so if we change that maybe what i'll do is just on that rightmost link here switch to the id and maybe i'll just add 8 pixels of margin so it doesn't quite butt up but it at least has a little bit of breathing room i'm not sure which one i like better i think i'll leave it that way for now but i kind of like the fact that the hover effect butts right up to the line we'll we'll see what would be better on that now in regard to this buttons hover effect one thing that you could do without having to change the background colors on hover is just add a box shadow so what we're going to do on this link wrapper we're going to add in our transition class and then i'm also going to add in a box shadow class so that we can easily add and remove it so we'll just call this one box shadow primary and we're going to go with effects box shadow we're going to set our shadow color maybe to our footer and then we're going to drop this to let's say 15 opacity and we're going to go with 0 4 12 and 0 as our box shadow let's go ahead and save this and then look on the front end and i just set that on the primary so that's not actually a hover effect so that is my mistake here so you're watching me fix this in real time what we need to do is on this box shadow class actually switch over to hover we're going to go to effects and actually i think i will make this black because it was pretty hard to see maybe i'll even bump it up to 20 so we can always change this 0 4 12 and 0. so now we should have is a hover box shadow so if i refresh this there we go it's very minute but you can totally see the effect the effect with the box shadow popping up on hover so perfect okay so now we're going to do is actually make this stuff work on a mobile device so if we were to inspect this in chrome and let's say switch to iphone 678 obviously this looks absolutely terrible so we do need to make some adjustments on our mobile devices so let's start off with our uppermost row here so i am going to go with our top row container and let's just kind of look at what happens as things start to shrink so the top most row is what we're concerned with at the moment everything works on 992 although we don't have the proper spacing in fact once it drops to page container everything butts up against the left and right edges which is exactly why on our page containers here we added a class so if i go ahead and switch to this class for the sake of example if i add 20 pixels of padding to the left and right edges then you can see it pushes them away from the edges which is perfect now i am sitting here thinking would margin or padding actually be preferential it's going to be padding okay so i didn't think about the fact that the margin is going to be essentially off the pages so padding is better but because we use that class on both of our top row and our second row here you can see that it pushes both of those sections away from the edges for us and we don't have to do it in more than one spot okay so let's keep going here now we just added that padding to our page container and below so it's going to apply to everything else so let's keep looking at our other elements here when does everything start to get too crammed so realistically at 768 we're going to want to take this container and not the class but this actual id and we're going to go with vertical and then what i'm going to do is in our left side container let's go ahead and add maybe 8 pixels of margin actually more than that it needs to be like 16 i think and then i think what i'm going to do in this particular case is actually hide the text itself because it should be fairly self-explanatory that these are clickable so what i'm going to do is on this text i'm going to go to advanced layout and display none then i'm going to go to the text over here same thing we're going to go to layout and display none and we actually have some margin on these icons here so what you would do is make sure you're on the id we're going to set this margin to zero on this one and same thing we're going to set this one to zero margin and then on our actual link wrappers we have some spacing as well it looks a little wonky at the moment it might be so our link wrapper actually has 32 pixels of margin on the right side here so i think what i'm going to do is on this icon down here on this actual social icon if we change this to 32 does that push us into the correct territory it almost does but again our icons here our social icons have some margin on the right side so if we go ahead and take that out then it works so those are now aligned properly and what you could even consider doing in this particular case now that we've removed those elements is make these actually stacked horizontally instead so you could go horizontal middle align there's some margin underneath that you would need to take out but this actually doesn't look all that bad to be honest maybe if i go with zero that looks reasonable i'm not sure what's going to be best i think i like that although we are gonna have our mobile menu in just a little bit and inside of that mobile menu we could realistically add all of this stuff so maybe what would be more pressing is the phone number and the email because we wouldn't necessarily want them to click the socials right away generally because it's going to take them away from the site so perhaps what i'm going to do in this particular case actually is just display none this whole container and then maybe on this left side container on this break point we can go with margin left auto which will push it all the way to the right i think that looks fairly reasonable now you could play with this however you want again keep in mind this is applying to our 768 and 480 break points so what's going to happen is if i save this and then i go look at this on the desktop everything that we set up is still in place all we're doing is just hiding it at those break points so if i inspect this you can see that of course it's a little bit difficult to see let me zoom in a bit there's those links that we set up and these are going to take you to a contact page eventually and then the phone number which will be clickable as well i think that actually looks really good i'm very happy with how that looks i think that's good we'll just stick with that for now so that's perfect okay so this next one is going to be manipulating this menu to fit now we are getting that oxygen builder lag which i really hope they will fix so let's go ahead and save this guy and we're going to refresh so it's really easy to make a mobile menu using a modal which i've made videos on in the course before i do not want the model inside of this container i'm going to take it all the way out of our header wrapper so that we can actually see where it should go and then i want to stick it inside of here drag and drop is still really wonky i find it's best to go up from the bottom we do want our model inside our header container but this should be fine for now so we're going to switch this over to live preview and of course there's nothing in it at the moment what we're going to add are menu links and then we'll add that same donate button so what i'm going to do is on our bottom row i'm going to go down to our menu container i'm going to go ahead and duplicate one of these and then i'm going to try to drag it into our modal which of course doesn't work so i need to add in a text element so then i can bring in our menu link so of course it's not visible because it's white up here but in this modal we haven't set a background so as i'm sitting here thinking about it maybe we want to make this background the green color this is just going to make it extremely easy we can set the content styles here to be center and i think i do like the model with that green background to be honest so at this point i am going to just duplicate this a couple of times back in the model content styles let's change this to vertical and then i think we'll probably want to change this padding to be a bit less so what we can do is actually add in a new class before we do that let's go ahead and take a look real quick at what our spacing looks like i think i'm going to invert this on a mobile class so we're going to have 16 top and bottom and 32 left and right so we're going to create a new class here called al main menu mobile and we're going to change this to 16 16 32 32 that's already looking better now we don't have our hover effect for some reason maybe that's just a glitch of the model we'll take a look at that in a bit i'm going to go ahead and delete these other links so we can easily replicate what we just did so let's duplicate this a couple of times so we had about us we're going to take our link wrapper here for the donate and just pull this inside of our modal there and then of course on this we definitely need to add some spacing so let's go with like 32 pixels all the way around that should be more than plenty and we do have this butting up a little bit close it feels like maybe it's not actually all that close it kind of looks like it so that's pretty much situated for the moment what i'm going to go do is inline behavior i'm going to switch back to actually let's just go full on hidden let's just get it out of the way in our menu container what i need to do is go ahead and add in an icon this icon i'm going to change to linear and i think it's just called menu yep i'm going to change this color to white i'm going to change this down to 35 pixels in size leaving it right there is totally fine and you can do one of two things here we're actually creating the trigger for our mobile menu in that modal that we were just working on so you can either add a class if you want multiple buttons to be able to trigger it or you can just simply take this id and then you're going to come over here to the modal you're going to go to trigger switch this to user clicks element we're going to go like this or you can actually click choose make sure to put the little pound sign in front of it and then save this we're going to go refresh on the front end real quick and when i click this now you can see there is our mobile menu we lost our hover effects we need to adjust that and we also need to make this hamburger only pop up at the appropriate break point so what i think i'm going to do is actually take this i'm going to move it inside of our menu here and then what i'm going to do is just take any of these text links make sure you're on the right class which is al main menu and then at our desktop size this works fine page container is where it starts to get crammed so i may even just start hiding it here so we'll go with display none on those let's jump back up to our all devices real quick and we also need to do this to the icon as well so we're going to go with layout display none here but then at 1220 we're going to go with flex and then if we go back to our modal and we click on live preview you'll notice all of our text links are hidden but we can easily fix that by choosing our mobile class and going with layout and we're going to click on display flex and there we go so if we go ahead and click on save let's refresh this guy and our menu link is still there why is our menu links oh i didn't i didn't let it finish saving refresh okay so now our menu is gone and if we go ahead and inspect this this should all work so now it does fit i'm zoomed in at a hundred and fifty percent let's switch to a hundred and this is still cram so we probably need to hide the donate button and this line since that already exists in the model but you'll see there it is and it works perfectly fine now we can actually add an x up here to close but clicking on background by default does work and then of course if you click on one of the links the modal naturally will close and it will take you to the new page but let's go ahead and fix this real quick so we're going to switch over here to say our modal is going to be hidden and then our page container we're going to set this div to layout display none and same thing our link wrapper we're going to go on the id layout and display none now because our menu links are hidden this is actually something interesting i hadn't considered the padding for the you know the whole container here was coming from those menu links so at this break point where you're going to essentially want this to have its own padding so let's actually go with this div right here i'm going to make sure i'm on the id and i'm on the page container break point we're going to go with size and spacing and i believe it was 32 pixels top and bottom that seems massive what was it is it 32 it is 32 but i think i think let's just go with 16 that's going to take up too much screen real estate on mobile so let's save this and here we refresh and it's looking super pretty i think that looks really really nice super clean really easy to understand you want to send them an email you click that one a call you click here here is your menu voila so there is your menu and then of course that's what it looks like on desktop so this looks very consistent with what it looks like on our actual mock-up now the phone number is not real so i want to go ahead and fix that so we're going to just simply copy all this come back over here and this is just the text here so we want to go back to our link wrapper we're going to change this to tell and i personally like to remove the parentheses just to be super clean and we can save this and one more time we're going to refresh so perfect there is our header basically situated including the mobile device optimization next up what we're going to do is work on the footer then after that we're going to actually work on the home page content so keep watching and we'll keep this site rolling

Channel: Permaslug

Views: 3,033

Keywords: oxygen builder sites, oxygen site builds, oxygen builder tutorials, permaslug oxygen tutorials, how to build a website in oxygen, how to create a header in oxygen, multi row header in oxygen builder

Id: Y2VO7EUuK0c

Length: 45min 25sec (2725 seconds)

Published: Mon Aug 30 2021