expanding menu options in a dynamic design

Question

expanding menu options in a dynamic design

My webpage features a logo alongside a menu:

Here's the HTML code:

<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:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="630e02021117060d23000c07">[email protected]</a>?subject=Hello">Contact</a></li>
    </ul>
</div>
</div>

This is the CSS styling applied:

#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 implemented media queries to adjust the menu font size on smaller screens.

However, I'm facing an issue where the menu becomes smaller than the logo. How can I make the logo scale proportionally with the menu? I've already added the following CSS rule:

img {max-width:100%;}

Shown below is an example of how it appears on a smaller screen (notice the oversized logo):

html css responsive-design fluid

Answer 1

Answer №1

Consider adjusting your media queries 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%;
    }
}

Also, modify #logo to something similar to this:

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

View Demo Here

Note: Ensure that you place

@media screen and (max-width: 800px)

before

@media screen and (max-width: 400px)

as shown above.

Refer to Importance of Media Query Order in CSS for more insights on organizing media queries effectively.

Answer 2

Consider adjusting your media queries 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%;
    }
}

Also, modify #logo to something similar to this:

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

View Demo Here

Note: Ensure that you place

@media screen and (max-width: 800px)

before

@media screen and (max-width: 400px)

as shown above.

Refer to Importance of Media Query Order in CSS for more insights on organizing media queries effectively.

Answer 3

Answer №2

Although it may not be the most semantic solution, have you investigated the possibilities of scalable text with FITTEXTJS

By utilizing javascript, FITTEXTJS allows for dynamic scaling of text. While you already have a resolution for images, it seems like the issue lies within the text itself. Using media queries to set break points is one approach, but it may not achieve the fluidity you desire. I will update my post with a demonstration on Fiddle after my workout at the gym. Just wanted to share this potential solution in case it proves to be useful.

Answer 4

Although it may not be the most semantic solution, have you investigated the possibilities of scalable text with FITTEXTJS

By utilizing javascript, FITTEXTJS allows for dynamic scaling of text. While you already have a resolution for images, it seems like the issue lies within the text itself. Using media queries to set break points is one approach, but it may not achieve the fluidity you desire. I will update my post with a demonstration on Fiddle after my workout at the gym. Just wanted to share this potential solution in case it proves to be useful.

Answer 5

Answer №3

To ensure your images scale properly, adjust the width of the image wrapper (#logo in this case) within the mediaqueries or set it globally using percentages (refer to jsfiddle link for example).

Don't forget to include max-width: 100%; for all images.

img { max-width: 100%; }

#logo { 
    width: 14%;
    // you can remove max-width:100 as it is not necessary.
    ...
}

For a demonstration, visit this JSFiddle link and resize your browser window.

Answer 6

To ensure your images scale properly, adjust the width of the image wrapper (#logo in this case) within the mediaqueries or set it globally using percentages (refer to jsfiddle link for example).

Don't forget to include max-width: 100%; for all images.

img { max-width: 100%; }

#logo { 
    width: 14%;
    // you can remove max-width:100 as it is not necessary.
    ...
}

For a demonstration, visit this JSFiddle link and resize your browser window.

Answer 7

Answer №4

It seems like the approach you're taking may not be the most effective. Shrinking text when the screen size is smaller might not be the best solution, especially for mobile devices where touch targets need to be easily clickable. Instead of reducing the text size, consider adding padding or margin to improve the touch target without visually shrinking the menu.

One alternative could be stacking the navigation below the logo on smaller screens and then shifting it next to the logo as the screen size increases. This approach avoids having to adjust text or image sizes while optimizing the design for small screens.

If you'd like, I created a demo for you: Demo Link. Make sure to view the full preview to see how the new menu behavior works when resized.

For the smallest viewport size, you could choose any layout pattern that suits your needs. A simple stacked layout works well for your current menu structure, but you might want to consider an accordion or off-canvas menu if your navigation grows in the future.

For additional insights, you can read Chris Coyier's article on designing for tablets and Trent Walton's post about typography and touch interactions.

Answer 8

It seems like the approach you're taking may not be the most effective. Shrinking text when the screen size is smaller might not be the best solution, especially for mobile devices where touch targets need to be easily clickable. Instead of reducing the text size, consider adding padding or margin to improve the touch target without visually shrinking the menu.

One alternative could be stacking the navigation below the logo on smaller screens and then shifting it next to the logo as the screen size increases. This approach avoids having to adjust text or image sizes while optimizing the design for small screens.

If you'd like, I created a demo for you: Demo Link. Make sure to view the full preview to see how the new menu behavior works when resized.

For the smallest viewport size, you could choose any layout pattern that suits your needs. A simple stacked layout works well for your current menu structure, but you might want to consider an accordion or off-canvas menu if your navigation grows in the future.

For additional insights, you can read Chris Coyier's article on designing for tablets and Trent Walton's post about typography and touch interactions.

expanding menu options in a dynamic design

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Limiting the character input in ion-textarea within Ionic 2: A step-by-step guide

Accumulation of style from various directives in AngularJS on a single element

Using a restricted set of special characters in a jQuery regular expression

The Next.js application is unable to load the combined CSS from a React Component Toolkit

Generating a dynamic triangle within a div while ensuring it fits perfectly with the maximum width

Discovering the meeting point where two dives converge

How can I create a one-column layout in CSS grid where one element automatically fills the remaining space after the other elements have taken their own auto widths?

Is it possible for JavaScript to identify modifications in the HTML, like an input made with Ctrl+Shift+I?

Arranging a div's position in relation to an unrelated div

Automatically add shimmer with CSS styling

Tips for optimizing the placement of div elements for top advertisements on Amazon's website

Conceal the object, while revealing a void in its place

Scrapy and Python data gets corrupted by <br> tags causing issues

Confirming user credentials for every page

What could be causing my CSS to not display properly on GitHub Pages?

Permit users to access downloads upon authorization

Deactivate the focus state when hovering over different items in the navigation bar

Tips for halting click propagation in VueJS

The positioning of the menu icons varies

What steps can I take to ensure that an image does not exceed the size of its parent tag?