Build Your Own Business Website header image

How to Create a Dropline Style Menu in Thesis Part 4 – Final Adjustments

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we make final adjustments to the menu style using custom code and our Thesis Nav Menu plugin settings. We center the bullets using the position property, fix the arrow and adjust the margins in the Nav Menu plugin settings.

Video Transcript

Rick: 25 pixels. And this could be the case where we need to work on the centering of this little bullet, right?

Member: Yeah it seems a little bit low, isn’t it?

Rick: Yeah so we could center that little bullet by using the position property. Well, let’s get rid of that top 1 pixel for a second. Let’s just assume that this is an optical illusion associated with that image for a second. And I’m going to open up my custom CSS file for this… oh no, this isn’t my custom CSS file for that.

Okay well, I’m going to cheat here. Please do not do this because this is the wrong way to do it. But I’m going to do it anyway because I don’t have Filezilla set up properly for this site. So I’m going to use a custom file edito here. Anybody who sees me doing this, just ignore it because I strongly advise against doing this. But every once in a while, it’s useful.

Okay so now we’ve got that and obviously, you can tweak these things around a little bit but let’s get this arrow thing fixed. Because the arrow thing, we can fix here under our submenu customization options. Oh, I’m looking at an old version. Okay, our submenu customization options where instead of middle left, our horizontal position will be 0. And our vertical position… well, let’s start off with that. Let’s do 0 and 0 and see what happens. It shouldn’t work the way we want it to work but at least we can see exactly how this… oh, look at that. So really, what we want is 0 and then say -2. I just want to move that up a little bit.

So our link background is going to be 0 and our vertical position is going to be say -2 pixels. Okay so the 0-0 thing didn’t actually kick in that’s why that was like that. So let’s say, 5 pixels. Now the 0-0 thing is kicking in. Okay, it needs to come down another 10 pixels. Well, not quite 10 pixels, okay. We’ll just do it as 10 pixels, see what happens. Obviously, this is little bit of trial and error, right? You’re going to switch it around a little bit, try to get what you want. So 12 pixels you know, it’s close. There we go.

And you know, it does seem like these are not equally spaced apart so you’re going to use some of the you know, left and right stuff for moving these menu items so that they’re nicely equally spaced. But nevertheless, you can see that the thing is working and it’s just with a combination of these various settings and then a little bit of custom code.

Now you can adjust this menu in its location here too, right? This menu could come down relative to the top and that is the overall menu customization options and we can actually set the overall menu margin. So if we come over to their overall menu margin and we’re going to give it a top margin of 40 pixels, there we go. Okay so that was able to move that down.

0 Comments… add one
0 comments… add one

Leave a Comment