CODEWITHSUNDEEP
htmlcssmobiledrop-down-menuresponsive-design
Harry White
Harry White

Reputation: 19

Mobile menu bar in css

please can someone help me convert the following into a menu bar for a mobile device, ive been trying for ages. i would like it to be 500px and not use bootstrap if at all possible, or if someone could point me in the right direction.

Thanks in advance

#menu {
    width: 21.4vw;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: normal;
	 font-size: 1vw;
    text-align: left;
    margin-left: 1vw;
    background-color: #CA2A2A;
        border-radius: 0px;
        max-width: 96vw;
    
}
#menu ul {
    height: auto;
    padding: 0.5vw 0vw;
    margin: 0px;
}
#menu li { 
    display: block; 

}
#menu a {
    text-decoration: none;
    color: #FFFFFF;
    padding: 0.5vw 0.5vw 0.5vw 0.5vw;
	font-size: 3vw;
	display:block;
    
}
#menu a:hover {
    color: #000000;
    background-color: #FFFFFF;

}
<!DOCTYPE html>
<html>
  <head>
    </head>
  <body>
<div id="menu">
<ul>
<li><a href="website.html">Home</a></li>
<li><a href="breakingnews.html">Breaking News</a></li>
<li><a href="Sport.html">Sport</a></li>
<li><a href="Hulltoday.html">Hull Today</a></li>
<li><a href="Property.html">Property</a></li>
<li><a href="Social.html">Social Media</a></li>
<li><a href="Music.html">Music</a></li>
<li><a href="Reviews.html">Reviews</a></li>
<li><a href="Movies.html">Movies</a></li>
<li><a href="Weather.html">Weather</a></li>
</ul>
</div>
    
  </body>
  </html>

thanks for the help again.

Upvotes: 0

Views: 491

Answers (1)

Froy
Froy

Reputation: 748

Hello it looks like you are in need of some media queries. Media queries allow you to specify specific css depending on the width of the screen your site is being displayed on. You can add a media query for 500px to your css like so: 

@media (max-width: 500px){
//CSS to be applied to your website when being viewed on screen widths of 500px
}

Let me know if you have any questions.

Upvotes: 1

Related Questions