Hide menu items on mobile bootstrap nav
Question
I've got this nav element on my webpage header:
<div id="categorymenu">
<nav class="subnav">
<ul class="nav-pills categorymenu container">
<li> <a class="home" href="index.php"><span> Home</span></a></li>
<li><a id='info' href='info.php'>Info</a>
<div>
<ul>
<li><a href="info.php#step1">About it</a> </li>
<li><a href="info.php#step2">How to</a> </li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
I would like to hide the 2 internal <li> elements (the submenu of my menu) when running on mobile.
As mentioned here: Hide one item from menu on mobile I tried to add this class to the 2 <li> elements:
...
<li><a class="dropdown hidden-xs" href="info.php#step1">About it</a> </li>
<li><a class="dropdown hidden-xs" href="info.php#step2">How to</a> </li>
...
but still nothing happens on small devices: the entire menu is always visible.
Any ideas?
3 answers
solution1
0 2015-09-17 10:29:11
Have you tried Media Queries? http://jsfiddle.net/geargio72/0kb8ecea/
<div id="categorymenu">
<nav class="subnav">
<ul class="nav-pills categorymenu container">
<li> <a class="home" href="index.php"><span> Home</span></a></li>
<li><a id='info' href='info.php'>Info</a>
<div>
<ul class="rowHide">
<li><a href="info.php#step1">About it</a> </li>
<li><a href="info.php#step2">How to</a> </li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
@media screen and (min-width: 0px) and (max-width: 765px)
{
.rowHide { display: none; }
}
solution2
0 2015-09-17 10:29:34
See this it will give you idea...
Without using media query...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Bootstrap, from Twitter</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content="" /> <meta name="author" content="" /> <!-- Le styles --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> <link href="style.css" rel="stylesheet" /> </head> <body> <div id="categorymenu"> <nav class="subnav"> <ul class="nav-pills categorymenu container"> <li> <a class="home" href="index.php"><span> Home</span></a> </li> <li><a id='info' href='info.php'>Info</a> <div> <ul> <li><a class="hidden-xs" href="info.php#step1">About it</a> </li> <li><a class="hidden-xs" href="info.php#step2">How to</a> </li> </ul> </div> </li> </ul> </nav> </div> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> <script src="script.js"></script> </body> </html>
solution3
0 ACCPTED 2015-09-17 10:53:52
The problem was with my PHP HTML/CSS theme. There is a custom.js file that manage the mobile menu.
I post the solution that I've found because I think that's pretty common to use this kinds of PHP HTML/CSS themes.
First of all I add the class for hidden-xs to the anchor element:
<li><a class="hidden-xs" href="info.php#step1">About it</a></li>
<li><a class="hidden-xs" href="info.php#step2">How to</a></li>
Then i changed the custom.js of the theme adding the .not('.hidden-xs') on the row after the // Populate dropdown with menu items comment
// Category Menu mobile
$("<select />").appendTo("nav.subnav");
// Create default option "Go to..."
$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Go to..."
}).appendTo("nav.subnav select");
// Populate dropdown with menu items
$("nav.subnav a[href]").not('.hidden-xs').each(function() {
var el = $(this);
$("<option />", {
"value" : el.attr("href"),
"text" : el.text()
}).appendTo("nav.subnav select");
});
// To make dropdown actually work
// To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/
$("nav.subnav select").change(function() {
window.location = $(this).find("option:selected").val();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.