menu scaling in fluid layout

Question

I have a logo with a menu next to it:

enter image description here

This is the HTML:

<div id="logomenuwrapper">
<div id="logo"><img src="img/logo_light.jpg"/></div>
<div id="menu">
    <ul>
        <li><a href="#">About</a></li>
        <li class="notfirst"><a href="#">Work</a></li>
        <li class="notfirst"><a href="mailto:maarten@codesigner.be?subject=Hello">Contact</a></li>
    </ul>
</div>
</div>

This is the CSS:

#logomenuwrapper{overflow:hidden;}
#logo
{
    padding-right:1.2%;float:left; max-width:100% !important;
    max-height:100% !important;
    display:block;
}
#menu{float:left;padding-left:1.2%;font-size:0.875em;border-left:1px solid #ea4a4a;}
#menu ul li.notfirst
{
    padding-top:0.3225em;
}

I have added some media queries that will make the menu font smaller when screen gets smaller.

At some point, the menu will be smaller than the logo. What should I add to make the logo scale with the menu? I already added:

img {max-width:100%;}

A picture of how it looks like on smaller screen (as you can see the logo is too big):

enter image description here

Your answer is correct for this question, but I chose to give the bounty to Adam for critiquing my method. He is absolutely right. — PoeHaH, Jun 24 '13 at 07:03

score 1 · Accepted Answer · edited May 23 '17 at 12:13

Try changing your media queries to something like this:

@media screen and (max-width: 800px) {
    body {
        font-size: 85%;
    }
    #logo img {
        width:84%;
    }
}
@media screen and (max-width: 400px) {
    body {
        font-size: 75%;
    }
    #logo img {
        width: 75%;
    }
}

and #logo to something like this:

#logo {
    padding-right:12px;
    border-right:1px solid #ea4a4a;
    float:left;
}

Working Example

Note: Be sure to put @media screen and (max-width: 800px) above
@media screen and (max-width: 400px) as seen above.

See Why do the order of media queries matter in CSS? for more information on placing media queries in order.

score 1 · Answer 2 · answered Jun 20 '13 at 14:06

1

It's admittedly not semantic... but have you looked into scalable text - FITTEXTJS

It uses javascript - but it allows the text to scale as well. You already have a solution to the image - But I see the problem lies in the text itself - Using media queries has you define break points, but doesn't make your text as fluid as YOU need it. I'll edit my post with a fiddle as soon as I come back from the gym, just thought I'd post this thinking it MAY be helpful.

answered Jun 20 '13 at 14:06

lloan

1,383
8
23

it's indeed not what I'm looking for, but a nice script for some purposes, so +1 from me :) Thanks for the info! – PoeHaH Jun 24 '13 at 07:04

score 0 · Answer 3 · answered Jun 19 '13 at 23:13

You should set the width of the image wrapper (#logo in your case) inside the mediaqueries to get the image scaled. Or set it globally in percents (see jsfiddle link).

Also add max-width: 100%; for all images.

img { max-width: 100%; }

#logo { 
    width: 14%;
    // remove max-width:100. not needed.
    ...
}

See http://jsfiddle.net/weP7u/ and resize the browser

score 0 · Answer 4 · answered Jun 22 '13 at 21:28

I think your going about this the wrong way. Why make the text smaller when the screen is smaller? This probably occurs on a mobile device where you need to make sure you have touch targets that are big enough to reliably click your menu. You could keep the text the same size, and add padding/margin to make the touch target better, but that makes this menu even "bigger" next to the logo.

Instead at the smallest size, try stacking the nav underneath the logo and then once that looks lost as the screen gets bigger, bring the menu up to the right of the logo like you currently have. This neatly gets around doing any text or image scaling, while enhancing your design for small devices.

I put together a demo for you. Be sure to view the full preview so you can resize and see the new menu behavior.

You could use any pattern you want at the smallest size, I went with a simple stacked pattern because your menu easily fits in one row. If you had more navigation items in the future, you could do an accordion or even move to an off-canvas approach.

Further reading: Check out Chris Coyier's post on making designs tablet friendly, some great tips in there.

Also, check out Trent Walton's short post about type and touch.

menu scaling in fluid layout

4 Answers4