Kronus Kronus - 4 months ago 18
CSS Question

Responsive menu - width auto and float left

I have a menu with the following CSS:

.nav {
position: static;
text-align: left;
min-width: 300px;
width: auto;
max-width: 75%;
margin-top: 3%;
padding-bottom: 5%;
float: left;
}


Menu's HTML:

<ul class="nav nav-pills nav-stacked">
<li><a href="ucp.php">Menu</a></li>
<li class="active"><a href="blah.php">Menu</a></li>
<li><a href="purchase.php">Menu</a></li>
<li><a href="logout.php">Logout</a></li>
</ul>


Demo

Next to it (on the right side) I have a form. I'm trying to make this responsive so when a user with lower resolution opens my site, the menu won't be on side, but on top, centered with 75% width. As you can see above, i've tried to do that using width: auto and min-width + max-width, but it refuses to work with float: left; for some reason. Putting images below for better understanding.

My site on smaller resolution

How I want it to be on smaller resolution (changed width: auto to width:75%)

Seems like the float:left is making me problems here, because when I just remove that, width: auto works perfectly (however i need it so the form is aligned properly with the menu).

Thanks in advance for all the answers!

Answer

Wrap your styles in a media query to restrict them to the XS size range, and adjust like so:

@media (max-width: 767px) {
    .nav {
        position: static;
        text-align: left;
        min-width: 300px;
        width: 75%;
        max-width: 75%;
        margin: 3% auto 0;
    }
}

Demo

Comments