Build Your Own Business Website header image

Thesis 2.1 for Web Design Professionals – Part 9 – Style the Desktop Menu While Retaining the Responsiveness

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 what I want to do is change this menu in the Thesis Classic Responsive skin. We need to change this menu in such a way that it doesn’t mess up the responsiveness. And the point of this whole exercise is to refresh your memory about making changes inside of the reverse media query. Essentially instead of the max width being W total, it’s a min width being W total.

Remove Menu Borders

First off, I don’t want any background color here. The second thing is I need to remove the menu altogether. Last time we changed the color of the menu. But in order to remove the menu borders, what I need to do is this. There we go. Submenu A.

This gets rid of all my menu borders and I only want to get rid of my menu borders in the desktop view and not in any other view so that’s going to go here. Look at how cool that is where it just automatically goes and takes care of the indenting. And let’s save that and take a look at it here. Okay, that’s good.

Add Circles for the Menu Items

Now what I’m going to do is to make these into circles and those circles are going to be 108 pixels in diameter. We’ll do .menu a and then say padding colon. And it’s going to have 47 pixels of padding on the top and bottom and 0 pixels on the sides because we’re going to set a width. And then we’ll say width: 108px and then we are going to align to text center so text align: center.

So I’ve got padding, width, text align center and I think the only other thing I need is border radius. This is how you make this circle, border radius: 50% semi-colon. And then we’re going to put a margin between each one so margin left: 10 px.

How Border Radius Works

So the way this border radius works is if you use a border radius at 50%, as long as the height and width are the same, it’ll become a circle. And I knew through trial and error that based on the height of my text and 47 pixels on top and bottom, that equaled to 108. So that’s how I got to this.

Review the Changes

When I save my custom css, come back over to refresh this, now I’ve got these cool menu items that just kind of go across the top like this. It’s going to fall apart over here because I don’t have the structure set up everywhere. But if we come back over to this page and look at it in the Responsinator, it didn’t have any effect on the responsive menu whatsoever.

Regular Code’s Effect on Responsive CSS

This is one of the biggest issues you’d end up dealing with when you’re making a responsive site is how to cope with creating regular css that doesn’t screw up the responsive css especially code that was really written to be responsive like this menu. And that’s what’s this negative media query is all about. It gives you the ability to specify css rules that will not apply and then you don’t have to overwrite them down here.

We could overwrite everything but that doesn’t make any sense because there’s tons of code associated with that nav menu. So we’re better off putting the nav menu modifications in something that’s simply not going to fire or not be applied to a mobile device. And that’s why we’ve got the negative media query. It’s essentially the media query that’s only going to show on the desktop view.

0 Comments… add one
0 comments… add one

Leave a Comment