Build Your Own Business Website header image

How to Right Align a Menu in Thesis 2.1

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 demonstrate how to right align a menu in Thesis 2.1 where we set an explicit width to top nav and when the browser window gets below that width we reset that to 100% wide.

Video Transcript

Member: Can you please narrow the width of the screen of your browser. Further, further. The menu should go into 2 lines.

Rick: Okay.

Member: But when you come back now, the menu stays in 2 lines. If I wanted it to be in 1 line I need to…

Rick: Refresh your page.

Member: Refresh, yeah, yeah, yeah.

Rick: I wonder why that is, “top_nav”. It must be due to the float:right let’s see. I see, it’s not part of the… Okay so why is this not.. Because what’s happening is your top nav is not respecting its width. Oh, it’s floated right. The “top_nav” is not respecting its width. Let’s see, oh that didn’t even do it. I don’t know. You would expect that as its space gets larger.

Member: Should I said that width or the top nav to be some particular of pixels?

Rick: We could try that, 600px but that didn’t really solve it. Top nav is now 600px but it didn’t.. oh, let’s get rid of the float:right for that then. Okay, so top nav is 600px, see and then when you get down to below 600px you could make the top nav width auto. Let’s see, I can’t get your CSS file. Okay and then we come down to the whoops, where are our… Okay so then we come down to say #top_nav{width:100%;}.

Okay, that didn’t do it either though, did it? That’s working just fine there right up to the point at which we move it into here. Oh, this is a Carta pardon me. Okay, well that is something you could do. So what you would do is this is something interesting associated with the float:right so you could set your top nav to say 600 pixels or however wide your menu is, it’s not quite 600 pixels wide and then in your smartphone landscape media query you could add a .carta #top_nav{width:100%;} and that would override then the custom top nav width you gave it.

Member: Okay.

Rick: Which would then you know, stop the breaking. You know, the other thing you could do instead of floating it right, let’s just refresh this. Instead of using float:right on it at all what you could do is say let’s see where are we now? We say top nav, well you don’t want to say that is display: inline-block.

Get rid of float:right. Without display: inline-block; there you could say let’s see, give me another rule please, #top_nav and what you would say is text-align: right; and then give the ul a display: inline-block; and then when that happens… it didn’t solve it, did it? Why didn’t it solve it? I got text-align: right; but I don’t have any float:right; okay. Okay, you’ve already got text-align: right; in your top nav. Okay, I guess the first solution is really the better one. The first solution is better which is to set it an explicit width to top nav and then when the browser window gets below that width reset it to 100% wide.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one