How can I get the Menu Button to appear in the Nav Bar Materialize CSS?How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?How can I know which radio button is selected via jQuery?How can I get query string values in JavaScript?How can I get the ID of an element using jQuery?How can I transition height: 0; to height: auto; using CSS?How can I remove a style added with .css() function?Cannot display HTML stringBootstrap slide menu navbar-rightIn materializecss, how to open the slide-out menu from right rather than default left?Hoverable nav icons
Why is implicit conversion not ambiguous for non-primitive types?
Why is participating in the European Parliamentary elections used as a threat?
Why doesn't Gödel's incompleteness theorem apply to false statements?
Why didn't Voldemort know what Grindelwald looked like?
Do native speakers use "ultima" and "proxima" frequently in spoken English?
Is there a distance limit for minecart tracks?
Extract substring according to regexp with sed or grep
python displays `n` instead of breaking a line
What properties make a magic weapon befit a Rogue more than a DEX-based Fighter?
C++ lambda syntax
Travelling in US for more than 90 days
Should I be concerned about student access to a test bank?
PTIJ: Which Dr. Seuss books should one obtain?
Highest stage count that are used one right after the other?
What is this high flying aircraft over Pennsylvania?
"Oh no!" in Latin
Pre-Employment Background Check With Consent For Future Checks
What is the meaning of "You've never met a graph you didn't like?"
Recursively move files within sub directories
Connection Between Knot Theory and Number Theory
Derivative of an interpolated function
Can a Knock spell open the door to Mordenkainen's Magnificent Mansion?
Why can't I get pgrep output right to variable on bash script?
Calculate Pi using Monte Carlo
How can I get the Menu Button to appear in the Nav Bar Materialize CSS?
How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?How can I know which radio button is selected via jQuery?How can I get query string values in JavaScript?How can I get the ID of an element using jQuery?How can I transition height: 0; to height: auto; using CSS?How can I remove a style added with .css() function?Cannot display HTML stringBootstrap slide menu navbar-rightIn materializecss, how to open the slide-out menu from right rather than default left?Hoverable nav icons
1
$(document).ready(function()
$('.sidenav').sidenav();
);<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="../js/script.js"></script>
<link rel="stylesheet" href="../css/style.css">
<meta charset="utf-8">
<title>Web Mail</title>
</head>
<body>
<nav id="navBar">
<div class="nav-wrapper">
<ul class="left">
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</li>
</ul>
<ul class="right">
<li><a href="#!"><i class="material-icons right">archive</i></a>
</li>
<li><a href="#!"><i class="material-icons right">delete</i></a>
</li>
<li><a href="#!"><i class="material-icons right">mail</i></a>
</li>
</ul>
</div>
</nav>
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
<div class="background">
<img src="../images/sidePanelBackgroundImage.jpg">
</div>
<a href="#user"><img class="circle" src="../images/profilePicture.png"></a>
<a href="#name"><span class="white-text name">John Doe </span></a>
<a href="#email"><span class="white-text email">test@gmail.com</span></a>
</div>
</li>
<li><a href="#!"><i class="material-icons">mail_outline</i>Notifications On</a>
<li>
<li><a href="#!"><i class="material-icons">local_phone</i>(XXX)-XXX-XXXX</a>
<li>
<li>
<div class="divider"></div>
</li>
<li><a class="subheader">Mail Functions</a></li>
<a class="waves-effect waves-light btn-small" id="sendMail"><i class="material-icons left">mail</i>Send Mail</a>
<a class="waves-effect waves-light btn-small" id="viewMail"><i class="material-icons left">drafts</i>View Mailbox</a>
</ul>
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</body>
</html>I am not sure how to move my menu item which appears below the navbar, learning how to use materialize. I want the side panel to pop out whenever the menu button is clicked in the nav bar (web).
I have tried various things including moving the slideOut into the navBar, but the menu item disappears as a result.
javascript jquery html css3 materialize
edited Mar 7 at 1:13
Dhaval Jardosh
3,92621137
asked Mar 7 at 0:24
supertigersupertiger
172
add a comment |
1
$(document).ready(function()
$('.sidenav').sidenav();
);<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="../js/script.js"></script>
<link rel="stylesheet" href="../css/style.css">
<meta charset="utf-8">
<title>Web Mail</title>
</head>
<body>
<nav id="navBar">
<div class="nav-wrapper">
<ul class="left">
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</li>
</ul>
<ul class="right">
<li><a href="#!"><i class="material-icons right">archive</i></a>
</li>
<li><a href="#!"><i class="material-icons right">delete</i></a>
</li>
<li><a href="#!"><i class="material-icons right">mail</i></a>
</li>
</ul>
</div>
</nav>
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
<div class="background">
<img src="../images/sidePanelBackgroundImage.jpg">
</div>
<a href="#user"><img class="circle" src="../images/profilePicture.png"></a>
<a href="#name"><span class="white-text name">John Doe </span></a>
<a href="#email"><span class="white-text email">test@gmail.com</span></a>
</div>
</li>
<li><a href="#!"><i class="material-icons">mail_outline</i>Notifications On</a>
<li>
<li><a href="#!"><i class="material-icons">local_phone</i>(XXX)-XXX-XXXX</a>
<li>
<li>
<div class="divider"></div>
</li>
<li><a class="subheader">Mail Functions</a></li>
<a class="waves-effect waves-light btn-small" id="sendMail"><i class="material-icons left">mail</i>Send Mail</a>
<a class="waves-effect waves-light btn-small" id="viewMail"><i class="material-icons left">drafts</i>View Mailbox</a>
</ul>
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</body>
</html>I am not sure how to move my menu item which appears below the navbar, learning how to use materialize. I want the side panel to pop out whenever the menu button is clicked in the nav bar (web).
I have tried various things including moving the slideOut into the navBar, but the menu item disappears as a result.
javascript jquery html css3 materialize
edited Mar 7 at 1:13
Dhaval Jardosh
3,92621137
asked Mar 7 at 0:24
supertigersupertiger
172
add a comment |
1
1
1
1
$(document).ready(function()
$('.sidenav').sidenav();
);<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="../js/script.js"></script>
<link rel="stylesheet" href="../css/style.css">
<meta charset="utf-8">
<title>Web Mail</title>
</head>
<body>
<nav id="navBar">
<div class="nav-wrapper">
<ul class="left">
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</li>
</ul>
<ul class="right">
<li><a href="#!"><i class="material-icons right">archive</i></a>
</li>
<li><a href="#!"><i class="material-icons right">delete</i></a>
</li>
<li><a href="#!"><i class="material-icons right">mail</i></a>
</li>
</ul>
</div>
</nav>
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
<div class="background">
<img src="../images/sidePanelBackgroundImage.jpg">
</div>
<a href="#user"><img class="circle" src="../images/profilePicture.png"></a>
<a href="#name"><span class="white-text name">John Doe </span></a>
<a href="#email"><span class="white-text email">test@gmail.com</span></a>
</div>
</li>
<li><a href="#!"><i class="material-icons">mail_outline</i>Notifications On</a>
<li>
<li><a href="#!"><i class="material-icons">local_phone</i>(XXX)-XXX-XXXX</a>
<li>
<li>
<div class="divider"></div>
</li>
<li><a class="subheader">Mail Functions</a></li>
<a class="waves-effect waves-light btn-small" id="sendMail"><i class="material-icons left">mail</i>Send Mail</a>
<a class="waves-effect waves-light btn-small" id="viewMail"><i class="material-icons left">drafts</i>View Mailbox</a>
</ul>
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</body>
</html>I am not sure how to move my menu item which appears below the navbar, learning how to use materialize. I want the side panel to pop out whenever the menu button is clicked in the nav bar (web).
I have tried various things including moving the slideOut into the navBar, but the menu item disappears as a result.
javascript jquery html css3 materialize
edited Mar 7 at 1:13
Dhaval Jardosh
3,92621137
asked Mar 7 at 0:24
supertigersupertiger
172
$(document).ready(function()
$('.sidenav').sidenav();
);<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="../js/script.js"></script>
<link rel="stylesheet" href="../css/style.css">
<meta charset="utf-8">
<title>Web Mail</title>
</head>
<body>
<nav id="navBar">
<div class="nav-wrapper">
<ul class="left">
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</li>
</ul>
<ul class="right">
<li><a href="#!"><i class="material-icons right">archive</i></a>
</li>
<li><a href="#!"><i class="material-icons right">delete</i></a>
</li>
<li><a href="#!"><i class="material-icons right">mail</i></a>
</li>
</ul>
</div>
</nav>
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
<div class="background">
<img src="../images/sidePanelBackgroundImage.jpg">
</div>
<a href="#user"><img class="circle" src="../images/profilePicture.png"></a>
<a href="#name"><span class="white-text name">John Doe </span></a>
<a href="#email"><span class="white-text email">test@gmail.com</span></a>
</div>
</li>
<li><a href="#!"><i class="material-icons">mail_outline</i>Notifications On</a>
<li>
<li><a href="#!"><i class="material-icons">local_phone</i>(XXX)-XXX-XXXX</a>
<li>
<li>
<div class="divider"></div>
</li>
<li><a class="subheader">Mail Functions</a></li>
<a class="waves-effect waves-light btn-small" id="sendMail"><i class="material-icons left">mail</i>Send Mail</a>
<a class="waves-effect waves-light btn-small" id="viewMail"><i class="material-icons left">drafts</i>View Mailbox</a>
</ul>
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</body>
</html>I am not sure how to move my menu item which appears below the navbar, learning how to use materialize. I want the side panel to pop out whenever the menu button is clicked in the nav bar (web).
I have tried various things including moving the slideOut into the navBar, but the menu item disappears as a result.
$(document).ready(function()
$('.sidenav').sidenav();
);<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="../js/script.js"></script>
<link rel="stylesheet" href="../css/style.css">
<meta charset="utf-8">
<title>Web Mail</title>
</head>
<body>
<nav id="navBar">
<div class="nav-wrapper">
<ul class="left">
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</li>
</ul>
<ul class="right">
<li><a href="#!"><i class="material-icons right">archive</i></a>
</li>
<li><a href="#!"><i class="material-icons right">delete</i></a>
</li>
<li><a href="#!"><i class="material-icons right">mail</i></a>
</li>
</ul>
</div>
</nav>
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
<div class="background">
<img src="../images/sidePanelBackgroundImage.jpg">
</div>
<a href="#user"><img class="circle" src="../images/profilePicture.png"></a>
<a href="#name"><span class="white-text name">John Doe </span></a>
<a href="#email"><span class="white-text email">test@gmail.com</span></a>
</div>
</li>
<li><a href="#!"><i class="material-icons">mail_outline</i>Notifications On</a>
<li>
<li><a href="#!"><i class="material-icons">local_phone</i>(XXX)-XXX-XXXX</a>
<li>
<li>
<div class="divider"></div>
</li>
<li><a class="subheader">Mail Functions</a></li>
<a class="waves-effect waves-light btn-small" id="sendMail"><i class="material-icons left">mail</i>Send Mail</a>
<a class="waves-effect waves-light btn-small" id="viewMail"><i class="material-icons left">drafts</i>View Mailbox</a>
</ul>
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</body>
</html>$(document).ready(function()
$('.sidenav').sidenav();
);<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="../js/script.js"></script>
<link rel="stylesheet" href="../css/style.css">
<meta charset="utf-8">
<title>Web Mail</title>
</head>
<body>
<nav id="navBar">
<div class="nav-wrapper">
<ul class="left">
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</li>
</ul>
<ul class="right">
<li><a href="#!"><i class="material-icons right">archive</i></a>
</li>
<li><a href="#!"><i class="material-icons right">delete</i></a>
</li>
<li><a href="#!"><i class="material-icons right">mail</i></a>
</li>
</ul>
</div>
</nav>
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
<div class="background">
<img src="../images/sidePanelBackgroundImage.jpg">
</div>
<a href="#user"><img class="circle" src="../images/profilePicture.png"></a>
<a href="#name"><span class="white-text name">John Doe </span></a>
<a href="#email"><span class="white-text email">test@gmail.com</span></a>
</div>
</li>
<li><a href="#!"><i class="material-icons">mail_outline</i>Notifications On</a>
<li>
<li><a href="#!"><i class="material-icons">local_phone</i>(XXX)-XXX-XXXX</a>
<li>
<li>
<div class="divider"></div>
</li>
<li><a class="subheader">Mail Functions</a></li>
<a class="waves-effect waves-light btn-small" id="sendMail"><i class="material-icons left">mail</i>Send Mail</a>
<a class="waves-effect waves-light btn-small" id="viewMail"><i class="material-icons left">drafts</i>View Mailbox</a>
</ul>
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</body>
</html>javascript jquery html css3 materialize
javascript jquery html css3 materialize
edited Mar 7 at 1:13
Dhaval Jardosh
3,92621137
asked Mar 7 at 0:24
supertigersupertiger
172
edited Mar 7 at 1:13
Dhaval Jardosh
3,92621137
asked Mar 7 at 0:24
supertigersupertiger
172
edited Mar 7 at 1:13
Dhaval Jardosh
3,92621137
edited Mar 7 at 1:13
Dhaval Jardosh
3,92621137
edited Mar 7 at 1:13
Dhaval Jardosh
3,92621137
3,92621137
asked Mar 7 at 0:24
supertigersupertiger
172
asked Mar 7 at 0:24
supertigersupertiger
172
asked Mar 7 at 0:24
supertigersupertiger
172
172
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
Overwrite the style of sidenav-trigger to display:block !important
$(document).ready(function()
$('.sidenav').sidenav();
);<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="../js/script.js"></script>
<link rel="stylesheet" href="../css/style.css">
<meta charset="utf-8">
<title>Web Mail</title>
</head>
<body>
<nav id="navBar">
<div class="nav-wrapper">
<ul class="left">
<a href="#" data-target="slide-out" class="sidenav-trigger" style="display:block !important"><i class="material-icons">menu</i></a>
</li>
</ul>
<ul class="right">
<li><a href="#!"><i class="material-icons right">archive</i></a>
</li>
<li><a href="#!"><i class="material-icons right">delete</i></a>
</li>
<li><a href="#!"><i class="material-icons right">mail</i></a>
</li>
</ul>
</div>
</nav>
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
<div class="background">
<img src="https://static01.nyt.com/images/2018/05/27/sports/27championstrophy/merlin_138716301_7655ceb3-fb5e-4354-821a-bfad8d475786-superJumbo.jpg?quality=90&auto=webp" style="width:100%">
</div>
<a href="#user"><img class="circle" src="https://upload.wikimedia.org/wikipedia/en/thumb/5/56/Real_Madrid_CF.svg/1200px-Real_Madrid_CF.svg.png"></a>
<a href="#name"><span class="white-text name">John Doe </span></a>
<a href="#email"><span class="white-text email">test@gmail.com</span></a>
</div>
</li>
<li><a href="#!"><i class="material-icons">mail_outline</i>Notifications On</a>
<li>
<li><a href="#!"><i class="material-icons">local_phone</i>(XXX)-XXX-XXXX</a>
<li>
<li>
<div class="divider"></div>
</li>
<li><a class="subheader">Mail Functions</a></li>
<a class="waves-effect waves-light btn-small" id="sendMail"><i class="material-icons left">mail</i>Send Mail</a>
<a class="waves-effect waves-light btn-small" id="viewMail"><i class="material-icons left">drafts</i>View Mailbox</a>
</ul>
</body>
</html>answered Mar 7 at 0:55
Dhaval JardoshDhaval Jardosh
3,92621137
Hi Dhaval, I have added the initialization to my JS, but how would I get the side button to appear even if the web page is not collapsed or on mobile?
– supertiger
Mar 7 at 1:02
Please check :)
– Dhaval Jardosh
Mar 7 at 1:09
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55034246%2fhow-can-i-get-the-menu-button-to-appear-in-the-nav-bar-materialize-css%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Overwrite the style of sidenav-trigger to display:block !important
$(document).ready(function()
$('.sidenav').sidenav();
);<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="../js/script.js"></script>
<link rel="stylesheet" href="../css/style.css">
<meta charset="utf-8">
<title>Web Mail</title>
</head>
<body>
<nav id="navBar">
<div class="nav-wrapper">
<ul class="left">
<a href="#" data-target="slide-out" class="sidenav-trigger" style="display:block !important"><i class="material-icons">menu</i></a>
</li>
</ul>
<ul class="right">
<li><a href="#!"><i class="material-icons right">archive</i></a>
</li>
<li><a href="#!"><i class="material-icons right">delete</i></a>
</li>
<li><a href="#!"><i class="material-icons right">mail</i></a>
</li>
</ul>
</div>
</nav>
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
<div class="background">
<img src="https://static01.nyt.com/images/2018/05/27/sports/27championstrophy/merlin_138716301_7655ceb3-fb5e-4354-821a-bfad8d475786-superJumbo.jpg?quality=90&auto=webp" style="width:100%">
</div>
<a href="#user"><img class="circle" src="https://upload.wikimedia.org/wikipedia/en/thumb/5/56/Real_Madrid_CF.svg/1200px-Real_Madrid_CF.svg.png"></a>
<a href="#name"><span class="white-text name">John Doe </span></a>
<a href="#email"><span class="white-text email">test@gmail.com</span></a>
</div>
</li>
<li><a href="#!"><i class="material-icons">mail_outline</i>Notifications On</a>
<li>
<li><a href="#!"><i class="material-icons">local_phone</i>(XXX)-XXX-XXXX</a>
<li>
<li>
<div class="divider"></div>
</li>
<li><a class="subheader">Mail Functions</a></li>
<a class="waves-effect waves-light btn-small" id="sendMail"><i class="material-icons left">mail</i>Send Mail</a>
<a class="waves-effect waves-light btn-small" id="viewMail"><i class="material-icons left">drafts</i>View Mailbox</a>
</ul>
</body>
</html>answered Mar 7 at 0:55
Dhaval JardoshDhaval Jardosh
3,92621137
Hi Dhaval, I have added the initialization to my JS, but how would I get the side button to appear even if the web page is not collapsed or on mobile?
– supertiger
Mar 7 at 1:02
Please check :)
– Dhaval Jardosh
Mar 7 at 1:09
add a comment |
0
Overwrite the style of sidenav-trigger to display:block !important
$(document).ready(function()
$('.sidenav').sidenav();
);<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="../js/script.js"></script>
<link rel="stylesheet" href="../css/style.css">
<meta charset="utf-8">
<title>Web Mail</title>
</head>
<body>
<nav id="navBar">
<div class="nav-wrapper">
<ul class="left">
<a href="#" data-target="slide-out" class="sidenav-trigger" style="display:block !important"><i class="material-icons">menu</i></a>
</li>
</ul>
<ul class="right">
<li><a href="#!"><i class="material-icons right">archive</i></a>
</li>
<li><a href="#!"><i class="material-icons right">delete</i></a>
</li>
<li><a href="#!"><i class="material-icons right">mail</i></a>
</li>
</ul>
</div>
</nav>
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
<div class="background">
<img src="https://static01.nyt.com/images/2018/05/27/sports/27championstrophy/merlin_138716301_7655ceb3-fb5e-4354-821a-bfad8d475786-superJumbo.jpg?quality=90&auto=webp" style="width:100%">
</div>
<a href="#user"><img class="circle" src="https://upload.wikimedia.org/wikipedia/en/thumb/5/56/Real_Madrid_CF.svg/1200px-Real_Madrid_CF.svg.png"></a>
<a href="#name"><span class="white-text name">John Doe </span></a>
<a href="#email"><span class="white-text email">test@gmail.com</span></a>
</div>
</li>
<li><a href="#!"><i class="material-icons">mail_outline</i>Notifications On</a>
<li>
<li><a href="#!"><i class="material-icons">local_phone</i>(XXX)-XXX-XXXX</a>
<li>
<li>
<div class="divider"></div>
</li>
<li><a class="subheader">Mail Functions</a></li>
<a class="waves-effect waves-light btn-small" id="sendMail"><i class="material-icons left">mail</i>Send Mail</a>
<a class="waves-effect waves-light btn-small" id="viewMail"><i class="material-icons left">drafts</i>View Mailbox</a>
</ul>
</body>
</html>answered Mar 7 at 0:55
Dhaval JardoshDhaval Jardosh
3,92621137
Hi Dhaval, I have added the initialization to my JS, but how would I get the side button to appear even if the web page is not collapsed or on mobile?
– supertiger
Mar 7 at 1:02
Please check :)
– Dhaval Jardosh
Mar 7 at 1:09
add a comment |
0
0
0
Overwrite the style of sidenav-trigger to display:block !important
$(document).ready(function()
$('.sidenav').sidenav();
);<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="../js/script.js"></script>
<link rel="stylesheet" href="../css/style.css">
<meta charset="utf-8">
<title>Web Mail</title>
</head>
<body>
<nav id="navBar">
<div class="nav-wrapper">
<ul class="left">
<a href="#" data-target="slide-out" class="sidenav-trigger" style="display:block !important"><i class="material-icons">menu</i></a>
</li>
</ul>
<ul class="right">
<li><a href="#!"><i class="material-icons right">archive</i></a>
</li>
<li><a href="#!"><i class="material-icons right">delete</i></a>
</li>
<li><a href="#!"><i class="material-icons right">mail</i></a>
</li>
</ul>
</div>
</nav>
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
<div class="background">
<img src="https://static01.nyt.com/images/2018/05/27/sports/27championstrophy/merlin_138716301_7655ceb3-fb5e-4354-821a-bfad8d475786-superJumbo.jpg?quality=90&auto=webp" style="width:100%">
</div>
<a href="#user"><img class="circle" src="https://upload.wikimedia.org/wikipedia/en/thumb/5/56/Real_Madrid_CF.svg/1200px-Real_Madrid_CF.svg.png"></a>
<a href="#name"><span class="white-text name">John Doe </span></a>
<a href="#email"><span class="white-text email">test@gmail.com</span></a>
</div>
</li>
<li><a href="#!"><i class="material-icons">mail_outline</i>Notifications On</a>
<li>
<li><a href="#!"><i class="material-icons">local_phone</i>(XXX)-XXX-XXXX</a>
<li>
<li>
<div class="divider"></div>
</li>
<li><a class="subheader">Mail Functions</a></li>
<a class="waves-effect waves-light btn-small" id="sendMail"><i class="material-icons left">mail</i>Send Mail</a>
<a class="waves-effect waves-light btn-small" id="viewMail"><i class="material-icons left">drafts</i>View Mailbox</a>
</ul>
</body>
</html>answered Mar 7 at 0:55
Dhaval JardoshDhaval Jardosh
3,92621137
Overwrite the style of sidenav-trigger to display:block !important
$(document).ready(function()
$('.sidenav').sidenav();
);<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="../js/script.js"></script>
<link rel="stylesheet" href="../css/style.css">
<meta charset="utf-8">
<title>Web Mail</title>
</head>
<body>
<nav id="navBar">
<div class="nav-wrapper">
<ul class="left">
<a href="#" data-target="slide-out" class="sidenav-trigger" style="display:block !important"><i class="material-icons">menu</i></a>
</li>
</ul>
<ul class="right">
<li><a href="#!"><i class="material-icons right">archive</i></a>
</li>
<li><a href="#!"><i class="material-icons right">delete</i></a>
</li>
<li><a href="#!"><i class="material-icons right">mail</i></a>
</li>
</ul>
</div>
</nav>
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
<div class="background">
<img src="https://static01.nyt.com/images/2018/05/27/sports/27championstrophy/merlin_138716301_7655ceb3-fb5e-4354-821a-bfad8d475786-superJumbo.jpg?quality=90&auto=webp" style="width:100%">
</div>
<a href="#user"><img class="circle" src="https://upload.wikimedia.org/wikipedia/en/thumb/5/56/Real_Madrid_CF.svg/1200px-Real_Madrid_CF.svg.png"></a>
<a href="#name"><span class="white-text name">John Doe </span></a>
<a href="#email"><span class="white-text email">test@gmail.com</span></a>
</div>
</li>
<li><a href="#!"><i class="material-icons">mail_outline</i>Notifications On</a>
<li>
<li><a href="#!"><i class="material-icons">local_phone</i>(XXX)-XXX-XXXX</a>
<li>
<li>
<div class="divider"></div>
</li>
<li><a class="subheader">Mail Functions</a></li>
<a class="waves-effect waves-light btn-small" id="sendMail"><i class="material-icons left">mail</i>Send Mail</a>
<a class="waves-effect waves-light btn-small" id="viewMail"><i class="material-icons left">drafts</i>View Mailbox</a>
</ul>
</body>
</html>$(document).ready(function()
$('.sidenav').sidenav();
);<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="../js/script.js"></script>
<link rel="stylesheet" href="../css/style.css">
<meta charset="utf-8">
<title>Web Mail</title>
</head>
<body>
<nav id="navBar">
<div class="nav-wrapper">
<ul class="left">
<a href="#" data-target="slide-out" class="sidenav-trigger" style="display:block !important"><i class="material-icons">menu</i></a>
</li>
</ul>
<ul class="right">
<li><a href="#!"><i class="material-icons right">archive</i></a>
</li>
<li><a href="#!"><i class="material-icons right">delete</i></a>
</li>
<li><a href="#!"><i class="material-icons right">mail</i></a>
</li>
</ul>
</div>
</nav>
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
<div class="background">
<img src="https://static01.nyt.com/images/2018/05/27/sports/27championstrophy/merlin_138716301_7655ceb3-fb5e-4354-821a-bfad8d475786-superJumbo.jpg?quality=90&auto=webp" style="width:100%">
</div>
<a href="#user"><img class="circle" src="https://upload.wikimedia.org/wikipedia/en/thumb/5/56/Real_Madrid_CF.svg/1200px-Real_Madrid_CF.svg.png"></a>
<a href="#name"><span class="white-text name">John Doe </span></a>
<a href="#email"><span class="white-text email">test@gmail.com</span></a>
</div>
</li>
<li><a href="#!"><i class="material-icons">mail_outline</i>Notifications On</a>
<li>
<li><a href="#!"><i class="material-icons">local_phone</i>(XXX)-XXX-XXXX</a>
<li>
<li>
<div class="divider"></div>
</li>
<li><a class="subheader">Mail Functions</a></li>
<a class="waves-effect waves-light btn-small" id="sendMail"><i class="material-icons left">mail</i>Send Mail</a>
<a class="waves-effect waves-light btn-small" id="viewMail"><i class="material-icons left">drafts</i>View Mailbox</a>
</ul>
</body>
</html>$(document).ready(function()
$('.sidenav').sidenav();
);<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="../js/script.js"></script>
<link rel="stylesheet" href="../css/style.css">
<meta charset="utf-8">
<title>Web Mail</title>
</head>
<body>
<nav id="navBar">
<div class="nav-wrapper">
<ul class="left">
<a href="#" data-target="slide-out" class="sidenav-trigger" style="display:block !important"><i class="material-icons">menu</i></a>
</li>
</ul>
<ul class="right">
<li><a href="#!"><i class="material-icons right">archive</i></a>
</li>
<li><a href="#!"><i class="material-icons right">delete</i></a>
</li>
<li><a href="#!"><i class="material-icons right">mail</i></a>
</li>
</ul>
</div>
</nav>
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
<div class="background">
<img src="https://static01.nyt.com/images/2018/05/27/sports/27championstrophy/merlin_138716301_7655ceb3-fb5e-4354-821a-bfad8d475786-superJumbo.jpg?quality=90&auto=webp" style="width:100%">
</div>
<a href="#user"><img class="circle" src="https://upload.wikimedia.org/wikipedia/en/thumb/5/56/Real_Madrid_CF.svg/1200px-Real_Madrid_CF.svg.png"></a>
<a href="#name"><span class="white-text name">John Doe </span></a>
<a href="#email"><span class="white-text email">test@gmail.com</span></a>
</div>
</li>
<li><a href="#!"><i class="material-icons">mail_outline</i>Notifications On</a>
<li>
<li><a href="#!"><i class="material-icons">local_phone</i>(XXX)-XXX-XXXX</a>
<li>
<li>
<div class="divider"></div>
</li>
<li><a class="subheader">Mail Functions</a></li>
<a class="waves-effect waves-light btn-small" id="sendMail"><i class="material-icons left">mail</i>Send Mail</a>
<a class="waves-effect waves-light btn-small" id="viewMail"><i class="material-icons left">drafts</i>View Mailbox</a>
</ul>
</body>
</html>answered Mar 7 at 0:55
Dhaval JardoshDhaval Jardosh
3,92621137
edited Mar 7 at 1:09
answered Mar 7 at 0:55
Dhaval JardoshDhaval Jardosh
3,92621137
answered Mar 7 at 0:55
Dhaval JardoshDhaval Jardosh
3,92621137
answered Mar 7 at 0:55
Dhaval JardoshDhaval Jardosh
3,92621137
3,92621137
Hi Dhaval, I have added the initialization to my JS, but how would I get the side button to appear even if the web page is not collapsed or on mobile?
– supertiger
Mar 7 at 1:02
Please check :)
– Dhaval Jardosh
Mar 7 at 1:09
add a comment |
Hi Dhaval, I have added the initialization to my JS, but how would I get the side button to appear even if the web page is not collapsed or on mobile?
– supertiger
Mar 7 at 1:02
Please check :)
– Dhaval Jardosh
Mar 7 at 1:09
Hi Dhaval, I have added the initialization to my JS, but how would I get the side button to appear even if the web page is not collapsed or on mobile?
– supertiger
Mar 7 at 1:02
Hi Dhaval, I have added the initialization to my JS, but how would I get the side button to appear even if the web page is not collapsed or on mobile?
– supertiger
Mar 7 at 1:02
Please check :)
– Dhaval Jardosh
Mar 7 at 1:09
Please check :)
– Dhaval Jardosh
Mar 7 at 1:09
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55034246%2fhow-can-i-get-the-menu-button-to-appear-in-the-nav-bar-materialize-css%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
