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>About it </li>
<li>How to </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?
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>About it </li>
<li>How to </li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
#media screen and (min-width: 0px) and (max-width: 765px)
{
.rowHide { display: none; }
}
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>
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();
});
Related
I am working on an index.html file and inside my head and body tag, I have a nav element. However, in Komodo Edit, version 10.1.1, build 17414, platform linux-x86_64., It red-underlines the nav element and gives me the following erorr message:
HTML: Error: <nav> is not recognized!
This is what my code looks like:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/static/js/script.js"></script>
<script src="/socket.io/socket.io.js"></script>
</head>
<body><div class="sidebar"></div><nav class="main menu">
<ul class = button-container>
<li>
<i class="fa fa-font" style="font-size:6em;"></i>
</li>
...
<li>
<i class="fa fa-picture-o" style="font-size:6em;"></i>
</li>
</ul>
<ul class="export button-container">
<li>
<i class="fa fa-floppy-o" style="font-size:6em;"></i>
</li>
</ul>
</nav>
<nav class="menu font" style="display: none;">
<p>Font</p>
</nav>
...
<nav class="menu picture" style="display: none">
<p>Pictures</p>
</nav>
</body>
</html>
Does anyone know what might be causing this?
Komodo has 2 "Languages" that cover HTML, one is called "HTML" and one is called "HTML5". HTML5 covers the nav element, HTML does not. You need to change your language selection to HTML5.
The language selection is done from the right side of the statusbar, it should currently say "HTML".
Can this Work?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/static/js/script.js"></script>
<script src="/socket.io/socket.io.js"></script>
</head>
<body><div class="sidebar"></div><nav class="main menu">
<ul class = button-container>
<li>
<i class="fa fa-font" style="font-size:6em;"></i>
</li>
...
<li>
<i class="fa fa-picture-o" style="font-size:6em;"></i>
</li>
</ul>
<ul class="export button-container">
<li>
<i class="fa fa-floppy-o" style="font-size:6em;"></i>
</li>
</ul>
</nav>
<nav class="menu font" style="display: none;">
<p>Font</p>
</nav>
...
<nav class="menu picture" style="display: none">
<p>Pictures</p>
</nav>
</body>
</html>
this Might not work but guess Ill try
I've used this tutorial http://tympanus.net/codrops/2013/07/30/google-nexus-website-menu/ to create a Sidebar in my _Layout code. I'm trying to have the sidebar overlap anything in RenderBody(). When the sidebar is open on the mobile, it appear behind the images.
Image depicting issue: http://snag.gy/uN9GF.jpg
My Body example code can be found here
http://codepen.io/anon/pen/NxLvEQ
_Layout.cshtml code
<div class="container">
<ul id="gn-menu" class="gn-menu-main">
<li class="gn-trigger">
<a class="gn-icon gn-icon-menu"><span>Menu</span></a>
<nav class="gn-menu-wrapper">
<div class="gn-scroller">
<ul class="gn-menu">
<li class="gn-search-item">
<input placeholder="Search" type="search" class="gn-search">
<a class="gn-icon gn-icon-search"><span>Search</span></a>
</li>
<li>
<a class="gn-icon gn-icon-download">Popular</a>
</li>
<li><a class="gn-icon gn-icon-cog">Settings</a></li>
<li><a class="gn-icon gn-icon-help">About us</a></li>
</ul>
</div><!-- /gn-scroller -->
</nav>
</li>
<li>Test Sidebar</li>
<li></li>
</ul>
#RenderBody()
</div><!-- /container -->
<script src="../../Scripts/classie.js"></script>
<script src="../../Scripts/gnmenu.js"></script>
<script>
new gnMenu(document.getElementById('gn-menu'));
</script>
Here's how to fix your problem:
Set z-index: 1; on gn-menu-main. Normally, I'd also tell you to set its position to something other than static, or else the z-index will have no effect. Looking at the site you linked, though, it appears you already have it set to fixed, which is fine.
Wrap #RenderBody() in a container div and set position: relative; on it. The relative positioning ensures that none of the container div's child elements can overlap its sibling elements unless the div itself does-- and we know it won't since its only sibling (gn-menu-main) has z-index: 1;.
Try to adjust the z-index of "gn-menu-wrapper" class.
for example:-
.gn-menu-wrapper{z-index:1}
if this is not working add more value to z-index.
.gn-menu-wrapper{z-index:99999}
I have solved your problem.
You just have to add "z-index:1" in
COMPONENT.CSS
line number - 96
class - .gn-menu-wrapper
add - z-index:1
This is working see the screen shot
<div class="container">
<ul id="gn-menu" class="gn-menu-main">
<li class="gn-trigger">
<a class="gn-icon gn-icon-menu"><span>Menu</span></a>
<nav class="gn-menu-wrapper">
<div class="gn-scroller">
<ul class="gn-menu">
<li class="gn-search-item">
<input placeholder="Search" type="search" class="gn-search">
<a class="gn-icon gn-icon-search"><span>Search</span></a>
</li>
<li>
<a class="gn-icon gn-icon-download">Popular</a>
</li>
<li><a class="gn-icon gn-icon-cog">Settings</a></li>
<li><a class="gn-icon gn-icon-help">About us</a></li>
</ul>
</div><!-- /gn-scroller -->
</nav>
</li>
<li>Test Sidebar</li>
<li></li>
</ul>
#RenderBody()
</div><!-- /container -->
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/css/demo.css" />
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/css/component.css" />
<script src="http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/js/classie.js"></script>
<script src="http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/js/gnmenu.js"></script>
<script>
new gnMenu(document.getElementById('gn-menu'));
</script>
This menu code is the first example in http://purecss.io/menus/.
Yet it works bad :(
Each <li> item stays a screenful of distance one another. If you scroll down you see the other items.
But it works in the purecss.io/menus page. I don't know why.
(Here when you run it works fine too… You have to create an html document with this code, then it fails…)
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
</head>
<body>
<div class="pure-menu">
<span class="pure-menu-heading">Yahoo Sites</span>
<ul class="pure-menu-list">
<li class="pure-menu-item">Flickr
</li>
<li class="pure-menu-item">Messenger
</li>
<li class="pure-menu-item">Sports
</li>
<li class="pure-menu-item">Finance
</li>
<li class="pure-menu-heading">More Sites</li>
<li class="pure-menu-item">Games
</li>
<li class="pure-menu-item">News
</li>
<li class="pure-menu-item">OMG!
</li>
</ul>
</div>
</body>
</html>
I've seen that pure-menu-item has a height: 100%, which I think is a bit strange. Is this the problem?
Your HTML is invalid, you need to declare a doctype, for example:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" rel="stylesheet" />
</head>
<body>
<div class="pure-menu">
<span class="pure-menu-heading">Yahoo Sites</span>
<ul class="pure-menu-list">
<li class="pure-menu-item">Flickr
</li>
<li class="pure-menu-item">Messenger
</li>
<li class="pure-menu-item">Sports
</li>
<li class="pure-menu-item">Finance
</li>
<li class="pure-menu-heading">More Sites</li>
<li class="pure-menu-item">Games
</li>
<li class="pure-menu-item">News
</li>
<li class="pure-menu-item">OMG!
</li>
</ul>
</div>
</body>
</html>
See this page for more information on how to structure your HTML file.
I was having the same issue with the usage of pure-menu-item. It has indeed a height of 100%. I overwrote that height by adding style="height:20pt" to the div where the menu was in. I used a horizontal menu btw.
I added in my custom app.css to override pure css
.pure-menu-item { height: inherit; }
Trying to figure out whats causing this space at the top before the nav bar. www.omegadesignla.com There is a random nbsp; nbsp; space charater being generated into the html when you insepect the element, and I can't figure out whats causing it. Here is the beginning html:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Omega Design | LA</title>
<meta name="description" content="Web development and printing services serving the greater los angeles area">
<meta name="keywords" content="web development, printing, graphics design, los angeles, santa clarita">
<link rel="stylesheet" href="stylesheets/app.css" />
<link rel="stylesheet" href="stylesheets/foundation-icons.css" />
<link rel="stylesheet" href="css/normalize.css" />
</head>
<body>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<span><img class="logo" src="img/logofinal.png"><span>
</li>
<li class="toggle-topbar menu-icon">
Menu
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>About us</li>
<li>Contact us</li>
<li class="has-dropdown">
Services
<ul class="dropdown">
<li>Print Media</li>
<li>Web Development</li>
<!-- <li>Promotional Items</li> -->
<!-- <li class="active">Active link in dropdown</li> -->
</ul>
</li>
</ul>
</section>
</nav>
<div class="container">
<header>
<div class="row">
<div class="large-3 medium-3 small-6 small-centered columns"> <!-- large centered -->
<a id="topbutton" href="#" class="button large radius button">Take the tour!</a>
</div>
</header>
I am using bootstrap in my project but when I resize the window my template commix completely.My navbar would explode and some part of my page is not shown and...
Every thing is wrong...
And when I use a mobile to see my website not only the bootstrap is not loaded but also every thing is wrong there too.
I use just the codes in bootstrap site but in their site its working well and in my project its not.
for example I copied this navbar from the site and it has the problem with resizing:
<div class="navbar navbar-inverse" style="position: static;">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-target=".navbar-inverse-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<div class="nav-collapse collapse navbar-inverse-collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>
Link
</li>
<li>
Link
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>
Separated link
</li>
<li>
One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-search pull-left" action="">
<input class="search-query span2" type="text" placeholder="Search">
</form>
<ul class="nav pull-right">
<li>
Link
</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li class="divider"></li>
<li>
Separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
what should I do to solve this problem?
Edit:
The issue is solved for resizing the window but the problem with mobile is remained...
My _Layout header code is like this:
<
head>
<meta charset="utf-8" />
<style type="text/css">
##media (max-width: 767px) {
.search-query {
display: none;
}
}
##-ms-viewport {
width: device-width;
}
</style>
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="~/Content/mosaic.css" />
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/mosaic.1.0.1.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/Site.js"></script>
<script type="text/javascript">
jQuery(function ($) {
$('.bar').mosaic({
animation: 'slide'
});
});
</script>
</head>
I have the codes between <style> tags in my bootstrap-responsive.css too.
Try adding this line in the head section of your html file:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If that doesn't work you can use media queries, like the following:
#media (max-width: 767px) {
.search-query {
display: none;
}
}
More info about media queries is here: http://twitter.github.io/bootstrap/scaffolding.html#responsive