Build Your Own Business Website header image

Thesis 2.1 for DIY Website Builders – Part 12 – 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.

Now that you know how to add background images and color in Thesis 2.1, the next thing I want to do is style the Thesis Classic Responsive menu.

Change Background Color

Your first inclination might be to remove the border from the menu but what I’m going to do is just change the border color so that it’s the same color as the main menu background and then I want that color to span all the way across.

The first thing to do in order to make it that color is get the site background color, cccc5e. Although it’s also the interior backgrounds color so we’re going to use that one in your backgrounds rather than the site background in our thing. We go to Custom CSS and header, come down here and say .menu, background-color, pick it and background color, close the bracket out. So now, our background color should stretch all the way across, it does.

Change Border Color

Then I’m going to make the border that color as well and I’ve got a snippet here for you that’ll make this a little bit easier because you could get rid of the border, right? You could say .menu and then .menu a border:none. I’m actually going to make it .menu a with this border color specifically because I want to retain the border in the responsive menu. So all I’m going to do here is change the border color so that it matches and again, not using that color but instead, color 2. Save Custom CSS, refresh it, okay and now we have a menu that spans all the way across and that has an accent color.

2 Comments… add one
2 comments… add one
  • Cheryl August 1, 2013, 3:17 pm

    Rick,
    Is it possible with Thesis 2.1 and the skin Thesis Classic Responsive to have the menu color span the full browser width of the page? Like your black menu color that runs the length of the browser page? If so can you point me in the direction as to how I can accomplish this task in the most simplistic fashion. With the update to 2.1 and Classic Response theme seems I am at a bit of a loss how to translate this from 2.0 and agility…..lol
    Thank you

    • Rick Anderson August 3, 2013, 9:12 am

      Cheryl – Classic Responsive isn’t designed to make that particularly easy. You can create a background image that simulates it and place it in the body. Otherwise you would first need to convert Classic Responsive templates into some type if full-width style framework. That is possible.

      On the other hand Agility is designed specifically to make this as easy as specifying a background color.

Leave a Comment