Menu problems and display sizes

Question

I have a vertical menu on my website which I want to make horizontal when I shrink the webpage, how can I achieve this?

I leave here the site:

Link

I am using WordPress to create this website if that helps

the only thing the menu has so far is this:

#menu_esquerda{
float: left;

}

#menu-o-menu{
list-style: none;
margin-top: 20px;
}

#menu-o-menu a{
color: white;
text-decoration: none;
font-family: Lato, Arial;
}

#menu-o-menu li{
padding-bottom: 10px;
}

Answer 1

Use media queries to target the css to specific devices.

In your case assuming that you want to make the menus horizontal when you resize the window and the window size is less that 980px, declare the styles to be applied for all the devices with width below 980px within the below declaration

@media screen and (max-width: 980px) {
  // write the css here
}

To make the menu horizontal try this

@media screen and (max-width: 980px) {
  #lateral{
    float:none;
    width:100%;
  }
  #desc_fantas p{
     height:auto; // you have declared 100px height for this initially, i just changed it to reduce the height when the menu is horizontal. Change it as you need.
  }
  #menu-o-menu{
     text-align:center;
  }
  #menu-o-menu li{
     display:inline-block;
  }
}

Answer 2

Use conditionals. At a certain width, the CSS would change and convert the menu into a horizontal one. Something like this. THIS code is no way related to your website. That is up to you to do!

@media screen and (min-width: 600px) {

#header ul {
    display: block;
    margin-right: 1.02048%; /* 10/980 */
}
#header form {
    display: none;
}
#footer p {
    display: block;
    line-height: 30px;
    color: #4e4e4e;
    text-align: left;
    float: left;
    width: 16.3265%; /* 160/980 */
    min-width: 120px;
    margin-left: 1.0204%; /* 10/980 */
}

}

@media screen and (min-width: 1000px) {

#header form {
    display: block;
}
#header ul a {
    display: block;
    float: left;
    width: 74px;
}

#header div > a.mobile {
    display: none;
}
}

Answer 3

you used max-width and max-height.

In such a situation, instead of width and max-width to the browser in a small window, you can improve the way it handles.

Answer 4

You've got a div#lateral on there that has a width="300px" that is confining your whole sidebar area. So, you've only got that much room to work with horizontally.

setting the display="inline-block" on your li elems works, but you'll need to dramatically adjust your font-size and margins, etc to make it look nice.