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

Using the jquery slider in conjunction with the onchange event

What about a sliding element feature?

Retrieve the 'id' value located within the 'img' tag of HTML code by utilizing Beautiful Soup in Python

Ways to change the CSS styles of components within App

Tips for organizing the contents of nested items in alignment

The makeStyles feature is currently not functioning properly in the latest version of Next.js with Material UI v5

Tips on showcasing information with ng for in Ionic 2

Various image dimensions cause divs to shift unevenly

Ways to make two blocks of text appear side by side and adapt to different screen sizes

problems with verifying your domain in Google apps

Displaying information from a database in an HTML form using PHP

Restoring the style on <a> renders it ineffective

access older siblings, accordion animation

Navigate to the following div, navigate back to the previous div

Broken CSS dropdown menu issue

Interactive pop-up window featuring a top section, main content, and bottom section

Utilize React Material UI Slider to dynamically adjust Border Radius in your web design

Color scheme for navigation bar carousel item background color

Tips on effectively managing sibling nodes with unique behavior on the initial one

Improving the Performance of HTML/CSS Animations - Enhanced Animation Speed