Build Your Own Business Website header image

Style the Thesis Classic Responsive Menu

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some protected content!

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

The next thing we are going to do in this Thesis 2.3 for DIY Website Builders seminar is to add styling to the Thesis Classic Responsive menu. Right now that menu spans all the way across.

If you hover your mouse over this you can see that spans all the way across. We are going to use the class of menu and we’re going to add a background color.

Come over here in Custom CSS and say menu styles, dot menu background color. Add the color and that’s it. Then come back over to the site and flush the cache. Something isn’t quite right, let’s look at that again. I just forgot to save Custom CSS. There it is.

This used to be green here too. I think we should make it green also. That is going to be menu A. Let’s check, inspect the element. Yes, it’s menu A. We’re going to say menu a and change the background color. Add a comma and then dot menu space a. Save our Custom CSS.

Go to the site and flush the cache. And now that area has a green background color too.

I’m either going to get rid of these menu lines or I’m going to turn them that same color. Let’s go back and remove borders. Here we can just change the border color rather than making them go away.

So we can either remove the menu colors or we can change them to match the same color. I’m just going to remove them. Let’s see what happens with that when we go responsive. It’s fine. To get rid of them that’s menu A and change those to border none. Save our Custom CSS.

Go to the site and flush the cache. We want to see what it looks like in responsive mode too. Perfect.

0 Comments… add one
0 comments… add one

Leave a Comment