CODEWITHSUNDEEP
jqueryhtmlcss
Ajay Kumar
Ajay Kumar

Reputation: 15

HTML : In mobile menu bar is wide

I am trying to create a menu bar for mobile using materlizecss but when I am opening this in mobile menu bar is very wide. It is taking extra space. Here is the HTML code,

<head>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic|Roboto:400,400italic,500,500italic,700,300italic,300|Roboto+Condensed:400,700' rel='stylesheet' type='text/css'>
<!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script>

$(document).ready(function(){

$(".dropdown-button").dropdown();
 $(".button-collapse").sideNav();

}); 


</script>

<head>
<body>




 <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li><a class="" href="/news/" target="">News</a></li>
  <li><a class="" href="/humor/" target="">Humor</a></li>
  <li><a class="" href="/bollywood/" target="">Bollywood</a></li>
  <li><a class="" href="/hollywood/" target="">Hollywood</a></li>
  <li><a class="" href="/sports/" target="">Sports</a></li>
  <li><a class="" href="/tech/" target="">Tech</a></li>
      </ul>
      <ul class="side-nav" id="mobile-demo">
        <li><a class="" href="/news/" target="">News</a></li>
  <li><a class="" href="/humor/" target="">Humor</a></li>
  <li><a class="" href="/bollywood/" target="">Bollywood</a></li>
  <li><a class="" href="/hollywood/" target="">Hollywood</a></li>
  <li><a class="" href="/sports/" target="">Sports</a></li>
  <li><a class="" href="/tech/" target="">Tech</a></li>
      </ul>
    </div>
  </nav>
</body>

But when I open it in browser it is looking fine and when I resize browser window it adjusts accordingly. But in mobile it is looking really bad.

Upvotes: 0

Views: 66

Answers (1)

Kirstyr
Kirstyr

Reputation: 36

Try adding the viewport meta tag to your 'head' section.

Upvotes: 1

Related Questions