Centered Logo Menu in Oxygen Builder

[Music] in this video i'm going to show you guys how to set up a centered logo within oxygen builder and what we're going to do is set this up with just the standard menu within wordpress which is going to allow us to change our menu items and have drop downs and you'll see i have this really nice logo ipsum something i recently found out about if you go over to logo ipsum.com you can choose from a handful of different placeholder logos which are fun so i just grabbed one from here and do note that they do download as svgs so if you are going to bring them into wordpress you'll have to use a plugin that allows you to upload svgs into your media library in my case and this one i used let's see here svg support otherwise i also use happy files a lot of times but either one works so i already put that in my media library as you can see here and again we're just going to walk through how i set up having our menu here that allows our logo to also be clickable and is also going to be mobile friendly if i go to inspect and we jump all the way down to mobile you can see that i have it transformed here and if we click our mobile menu icon we have our menu there all right so we are going to jump in and create a menu so i'm going to go over to appearance and menus and we're going to click create a new menu and we'll just call this one centered logo and i'll click create over on the right hand side here and i'm going to first add in a custom link and i'm just gonna do a backslash for my home page and we're gonna call it home and click add to menu and then i'm gonna click on my pages and we're going to add in one two three four five six i think that should be good click add to menu and i'm gonna drag this around a little bit i'm gonna put my services up here put my about at the very front i'm going to put my small business and business strategy as sub menu items and we're going to take the home page and put it in the middle so you see we have a total of five main items we're going to set home to be the middle and that's how we're going to be setting our image is going to be on on this so we can go ahead and click save menu now and now let's jump over to oxygen and we're going to build out our template so i'm just going to click on add new and we'll call this centered logo and i'm going to click publish and i'm going to go into oxygen builder all right now that we're in we are going to open our structure i'm going to add in a section followed by our inner content i'm not going to worry about a footer right now because that's not the purpose of this video but you would want to add a footer into your template so from our section since i'm not going to be using our header builder i do want to come over to my tag here and we're going to set it to header here and then inside here i am going to add in a div and i'm going to make it 100 and then i'm going to add in my menu and we're going to set our menu to our centered logo and you'll see we have our home in the center there i'm going to expand over on the structure panel here and now let's get into the fun stuff so first thing i'm going to do is inner div i'm going to center everything just so everything is in the center here and i'm going to stylize my menu a little bit we can play around with this however you want choose a color we're going to go with this dark blue and i think we'll set it to uppercase my spacing i think i like that i think that'll work just fine as is for my hover colors right now we have a actual background color and i don't want that nor do i want the top line on it but we do want our text color to change when we hover so i think i'll go to this lighter color when we hover just like this and we're gonna set an active text color as well i'll go with this green and we can see how that looks if i change my page here to um i'm not exactly sure which one this is i think services will work yep you can see that shows if we do that i forget which one we were just on previously i don't think that matters so we'll just stay here and let's see here anything else we'll do a transition of 0.25 seconds so that way there's a nice little transition on that you can see we're getting our drop down here so next we'll go to our drop downs we have those enabled and we have the arrow showing so i'm going to set a background color and we'll just go with this uh light lightish gray actually i think we could have a better one nope we'll stick with that for now again you can set those to fit your need i don't have many colors pulled in here and since we're doing this we'll go with this lighter color actually that might not work best here let's go to something much darker there we go that should be fine and our padding is good so we're just going to leave that and our mobile responsive and this is where we're actually going to have to do a little bit of playing around so i'm going to come back to this in a little bit i'm going to set this to never for right now i'm going to click my back arrow and we have everything set up here so i'm going to click save just so i have my menu saved i'm going to jump up to my section here and i'm gonna go to advanced sizing and spacing and i'm gonna just set these all to zero because i don't want any spacing in there right now i'm gonna come down to my div and i think here what we're going to do is um just leave that for now i'm going to click onto my menu and what i have here is our selector detector setup so and i'll show this to you when i jump back to the back end here but what i'm going to do is click style output and i'm going to choose my center item here and you see that it highlights a handful of things here what i want to do is we're going to click on the first blue item here to deselect it we're going to do the same on the next one and here we're going to choose our menu item id here and we're going to unselect all of the other ones and we are going to keep the a chosen as well give me one second here and you can either choose the id or the class we'll just go with the class for the sake of this video so we have it set up to only select our class and the a of our home so from there we're going to go to our advanced and we're going to set our background image so as i mentioned earlier i have a logo already in here and i'm just going to add that in you can see it looks a little goofy here so first thing we're going to do is play with our settings here so we are going to set it to contain and no repeat and i'm going to set it to 0 and zero and let's see here next we're going to come down to our css because you'll notice that right now we're getting our home text in there and we don't want that to actually be showing so what i'm going to do is put in some css here and what that is going to be is text indent and we're going to go negative 9999 pixels and you'll see that that disappeared and let me make this a little bit bigger you can see our text is no longer showing there so now i'm going to jump back here and we can play with our actual sizing here so i'm going to go to sizing and spacing and i'm going to set an actual width here let's try 150 and that looks like it should be okay so i'm going to leave that as is and we can even test this out as we go a little bit lower that still looks fine still good there all devices okay so we have our that there and you can see that it is clickable so i'm going to go ahead and just click save here and i'm going to jump to the front end here just so we can take a look here and since i don't actually have that set on a page we're not going to be able to go to the front end so let me jump back to the dashboard quick and as i mentioned earlier if we go into oxygen and settings if you do not have that selector detector already on you will need to enable it right here so you just check this box and click save so i did want to quickly mention that all right so now let's jump back to a page here and we'll just choose our um services page not sure if i have anything set there ready so we'll choose our center logo here i'm gonna click update now if we go to view page you can see that it's showing up here we have all our pages our drop down is showing our logo is here and you can see that it is linking to our home page so if i go ahead and click that it'll take me to my home page so i'm just going to click back just so we can stay by our menu here and you can see i probably want a little bit of spacing around all of this yet so i'm going to jump back to our builder here and on our actual div here i think i'm just going to add just a little bit of padding around here so i'll do let's just do five pixels above and below and we can set um a box shadow on the bottom too if we really wanted to on our section so that we get a little bit of um break from our white background and page throw in a box shadow here do a rgba and i'm just going to go as three zeros which is black and then i'm going to do 0.2 for 20 and for a horizontal offset i'm not going to put anything else but 0 for vertical i'll do 3 blur i'll do let's go up to 10 and our spread will try five so we can come back and you can see now we're getting a little bit of a shadow there makes it easier to see you can't quite see it great on the back end but you can see it here now it differentiates that or you can have a background color on this as well that would work too but for the sake of this i'm just going to leave it as this just because the important part was getting this logo in here so now the important part is figuring out what we do for mobile so if i jump back to my menu item here and we go down to our mobile you can see that yeah it still has everything there but it's pushing it off to the sides and we get our scroll bar so that's not what we want so what i'm going to do is go back to all devices and what i'm going to do first is come back to our back end here and i'm going to create another menu so under appearance and menus i'm going to create a new menu and we'll call this one mobile logo you can call it whatever you see fit but i'm just trying to quickly throw together something for a tutorial here and again i'm going to add in all those same exact things i'm going to click add and then i'm going to get my custom link in my home page and add that to my menu again i'm just gonna put this back in that same order i did all right i'm going to click save and what i need to do now is hit refresh on this just so we can get access to that always save first before you click refresh just so you don't lose anything all right so opening my structure back up and what i'm going to do is inside this div i'm going to add in another div and this one we're also going to set to 100 and we're going to set it to horizontal middle and we're going to go space between and what i'm going to add in here is going to be an image which is going to be our logo so again i'm just going to click browse i'm going to choose our logo again and i'm going to set my width to i think we were at 150 before and i'll do auto here and i would put in alt tux if this was going to be a finished product project but for the case of this tutorial i'm not going to put anything in there and next what i'm also going to do is i'm going to just take this menu and i'm going to duplicate it and i'm going to drag it all the way down here in here and then i'm going to choose my mobile logo and the reason i did that is because we're going to set this under mobile responsive to um i think what we're going to have to do is we'll try this i just want to see how much space we have so it's still fitting there so if we go down one more yeah you can see it squishes there so what i'm going to do is come all the way back up and i'm going to set this to less than 768 is when this is going to show as mobile and now what i'm going to do on my div here making sure i'm on all devices is i'm going to come down to layout and i'm going to click none and you can see that it hides it so next i'm going to come down to my 768 and we're going to click our flex again and now you can see it's stacking it we're going to go back to our row here and now it's picking everything back up that we had in there originally you'll see that we do want a little bit of space here on the sides so i'm just going to throw in we'll do 10 pixels of padding on either side and let's go back up to all devices and one thing i forgot to do on our image is we do want that to be clickable so i'm just going to click on our link icon here and it's going to allow us to set a link so i'm just going to put in a slash for our home page and click add link and again you would put in the proper things you want whether you want to what your target to be and so on and so forth again i'm not going to mess with that stuff right now for this tutorial because the whole point to this is just getting our logo in here to be centered and have the ability to have a drop down using the wordpress menu alright so we have that in there i'm going to jump back up to my initial menu and here what i'm going to do is click on our less than 768 and advanced and now i'm going to hide this one by doing display none and you can see we have just our mobile menu here and when we go ahead and click this it brings that up so we can see everything here but you'll notice we don't have any of our drop down menu items showing so let's go ahead and set that up under mobile responsive on our drop downs we can click include those and you can see those are showing up now and again you can change styling as you need but uh i'm not gonna mess around with this right now all right so i'm gonna click first click my x there and i'm gonna click save go to all devices and we can take a look on the front end so i'm gonna go to my front end here and i think we looked at our services pages where we had that showing so you can see that we have everything working here all our menu items are working we have a drop down all built from the wordpress menu we have a centered logo that's clickable and if i inspect and we go to mobile and let's see if it lets me do responsive nope so i'll go down to just iphone here you can see that we have this in here and as we go into ipad you can see that the main menu comes back so you can see that it is fully responsive here and again if i want to click my menu item here you can see down on the corner here that it is allowing me to do that otherwise i can always just click on my mobile menu and we can click home from there and as you can see that is working so i'm going to exit out of my inspect mode and there we go we are back again i'm going to come back to my services here so you can see that we have our menu here with our centered logo again using the wordpress menu that we set up in the back end here so hopefully that helps you guys out and if you have questions please do leave them down in the comments below and we'll see you in the next video

Channel: LocalSBM

Views: 487

Keywords: Oxygen Builder, WordPress, Menu, Centered Logo

Id: nb6bVJtN_-U

Length: 22min 44sec (1364 seconds)

Published: Tue Oct 05 2021