This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.
Welcome back to the fourth and final part of Lesson 10 of the Build Your Own E-Commerce Website tutorial series. In this part of the lesson we are going to configure the navigation tabs so that they are equal size, equally spaced, and sitting in the right spot.
You can see generally what this is going to look like except that we have fewer tabs so we’ll make them all the same width. However, we’ll still have them project up over the green there – kind of a cool effect.
Let’s look at our site. Go ahead and inspect the element to see what it is we’re referring to and remember that we said earlier that it was ul .menu, li .tab so we can actually reference this .menu, .tab and effect how this works. And it’s going to be a little bit of trial and error here because we don’t know exactly how wide this should be.
Test the Menu Tab Width
So we’re going to turn on our web developer, edit the CSS, move over here a bit, go to custom.css and come down to our Menu section. We’re going to start off right off the bat with .custom .menu .tab and opening and closing brackets, indent a little bit and we are going to give it a width. Let’s give it a width of 200 pixels. Obviously that is too big for it to show. If we slide this over you can see that 200 pixels is too large for it to fit within the page size that we have. We’re not going to be able that so let’s try 180. That’s why I said this is going to be a little bit of trial and error.
We have 180 and it doesn’t extend all the way to the end here and it looks like there might be enough room to give us some space in between these things but it does make this Customer Support get a little bit of extra width. I believe that we’re going to adjust for that by cutting down on some of the text spacing here but we’ll look at that in a moment.
Add Spacing to the Navigation Menu Items
Let’s see if we can get an even spacing with 180 pixels. We’ll come back over and we’ve got a width of 180 pixels, let’s give it a margin-left of say 20 pixels. Okay that looks like that was a little bit too much. Let’s give it a margin-left of 10 pixels, let’s try 15 –it looks like 15 is going to work just fine. So you can see we’ve got a nice little even space in between them plus each of these things is evenly spaced. We can call that a win.
Fix the Text with CSS
But now we want this to be only in one line. Let’s check what is keeping this wide – if we inspect this element here for a second it’s the li a and so under menu a you can see that it has a letter-spacing of 2 pixels. If we turn that off and get rid of it entirely it would just fit there but we’re going to try to add some and see if that works. We’re just going to steal this letter-spacing, copy, and we’ve got our custom .menu a here so give ourselves a space and paste, colon, 1 pixel. Yeah it works. It looks like that still fits inside of that.
Now I would like each of these text items to be centered and I’m going to use the .menu, tab to do that centering. Say text-align, on center – okay so that works. I guess the thing that’s left for us to do now is for us to make this submenu as wide as the main menu items which is 180 pixels.
So let’s just go ahead and copy these changes that we’ve made and come back over to our custom.css file. We’ll paste that information in there and then save it. We’ll upload it and test it.
Set the Submenu Width
It works just fine in Firefox – we can move this over so you can see that. We’ve got nice even spacing – that works fine in Firefox. Let’s go ahead and go back to our options here and we are going to scroll down to Fonts, Colors & More! Scroll down here to the Nav Menu and instead of 150 pixels for the submenu we’re going to make that 180. Okay we’ll go ahead and hit Save, we’ll come back over to the page and refresh – that didn’t work. Let’s close web developer – ahh that was it – I just needed to close it because it was holding on to the original CSS.
Raise the Menu
Now if we switch this our submenus are exactly the same width as our main menu items which I think looks better and there we have it. We haven’t completed the styling yet because we still want to shove this menu up. Open up web developer again and we are going to give that a negative margin. Give ul menu a negative margin so let’s start up above that — .custom .menu, opening, closing, space, margin-top, colon, -10 px, and there we have it. It is now nicely lined up – or nicely overlapping which I think looks pretty good. It gives it a nice layered effect which is what we were after.
We’re just going to copy all of it, take it back over to our custom.css file, replace all of the existing, save it, upload it and then we will test it first in Explorer. Look it works perfectly. Then we’ll also test it in Chrome. So the one funky thing we have to deal with in Chrome is the location of this Search button and fixing the search button is something I’m going to have to do outside of the context of the navigation menu. So assuming that the search button is fixed then we have a fairly happy result.
That wraps up this lesson on how to create the floating boxes navigation menu that we are using in our Thesis WP eStore eCommerce website.