I've been trying to figure out a way to change the html structure of my web app using media queries so that my nav collapses into a drop down on the mobile site. It seems that the only way to change the actual markup is to use jquery, but I'd like to avoid that if possible.
I've looked all over but all of the suggestions ive tried online just cause more problems than it solves bc im using the materialize css framework for the site. Hopefully someone here has worked with materialize before and has solved the problem already.
Here is the html:
<nav class="nav">
<div class="nav-wrapper">
<a href="#" class="brand-logo left">Game Swap</a>
<ul id="nav-mobile" class="right">
<li><a id="homeMenu" href="#">Home</a></li>
<li><a id="searchMenu" href="#">Matches</a></li>
<li><a id="profileMenu" href="#">Profile</a></li>
<li><a id="loginMenu" href="#">Login</a></li>
<li><a id="logoutMenu" href="#">Logout</a></li>
</ul>
</div>
</nav>
As of now, the nav works pretty well as all res until you get to about 620px wide, then the nav items start overlapping the logo.
Here's the materialize documentation if helpful.
Thanks for any help in advance.
UPDATE: I have succesfully used materialize to replace my nav with a hamburger nav. However, when clicked on desktop, there is no dropdown. It has occurred to me that maybe this hamburger nav is merely a button for mobile for side navigation to animate from the side onto the screen. If not, then there is somethign else wrong with the code. The documentation claims there is an "example below" but I dont see it. See here: http://materializecss.com/navbar.html#mobile-collapse
I have also initialized the jquery line at the end of document ready, so that shouldnt be the issue.
updated HTML:
<nav class="nav">
<div class="nav-wrapper">
<a href="#" class="brand-logo left">Game Swap</a>
<a href="#" data-activates="mobile-demo" class="button-collapse right"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a id="homeMenu" href="#">Home</a></li>
<li><a id="searchMenu" href="#">Matches</a></li>
<li><a id="profileMenu" href="#">Profile</a></li>
<li><a id="loginMenu" href="#">Login</a></li>
<li><a id="logoutMenu" href="#">Logout</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a id="homeMenu" href="#">Home</a></li>
<li><a id="searchMenu" href="#">Matches</a></li>
<li><a id="profileMenu" href="#">Profile</a></li>
<li><a id="loginMenu" href="#">Login</a></li>
<li><a id="logoutMenu" href="#">Logout</a></li>
</ul>
</div>
</nav>
UPDATE 2: I decided to make the whole thing a drop down, using a different component altogether. See solution below for anyone with the same issue.
<ul id="dropdown1" class="dropdown-content">
<li><a id="homeMenu" href="#">Home</a></li>
<li><a id="searchMenu" href="#">Matches</a></li>
<li><a id="profileMenu" href="#">Profile</a></li>
<li><a id="loginMenu" href="#">Login</a></li>
<li><a id="logoutMenu" href="#">Logout</a></li>
</ul>
<nav class="nav">
<div class="nav-wrapper">
<a href="#" class="brand-logo left">Game Swap</a>
<ul class="right">
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Menu<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
Yes it is for mobile, and hidden in desktop view, but you can show it but changing the view to block from none, check the following code:
@media only screen and (min-width: 993px){
nav a.button-collapse {
display: block;
}
}
Originally the display of .button-collapse on(min-width: 993px) is none;
Check the codepen I created, this is working fine.