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; }
Related
I'm trying to show the active tag on my nav bar. It shows on all tabs EXCEPT one with a drop-down. I can't figure out why its not calling the class on this particular button. I'm obviously placing it in the wrong place. Any help with this issue would be much appreciated!
Code: (The first one is CORRECT - ie - index.php is currently active. Where do I place the code (class="active") to make the next button (WHAT WE DO) the active tab when clicked?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav>
<ul class="list-inline">
<li class="active">
<i class="fa fa-home"> </i>HOME
</li>
<li class="dropdown" role="presentation">
WHAT WE DO <span class="caret"></span>
<ul class="dropdown-menu">
<li>QUALITATIVE</li>
<li>QUANTITATIVE</li>
</ul>
</li>
<li> WHERE WE WORK</li>
<li> OUR CLIENTS </li>
<li> CONTACT US</li>
</ul>
</nav>
If I understand you correctly, you need to check the URL. (In my demo I set it to a specific URL) Then, add a class to the li parent.
var page = 'whatwedo_qualitative.php';
var a = $('[href="' + page + '"]');
$('.dropdown').has(a).addClass('active');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar-default">
<ul class="nav navbar-nav list-inline">
<li>
<i class="fa fa-home"> </i>HOME
</li>
<li class="dropdown" role="presentation">
WHAT WE DO <span class="caret"></span>
<ul class="dropdown-menu">
<li>QUALITATIVE</li>
<li>QUANTITATIVE</li>
</ul>
</li>
<li> WHERE WE WORK</li>
<li> OUR CLIENTS </li>
<li> CONTACT US</li>
</ul>
</nav>
you need a javascript code to add/remove active class to the a link pressed.. something like this:
$("a").click(function() {
//remove all active class from a elements
$(this).addClass("active"); //add the class to the clicked element
});
a similar functionality is here: Add and remove a class on click using jQuery?
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>
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();
});
I'm learning bootstrap for the first time and the dropdown menu seems to be unformatted and doesn't look like the other menu options that I've made. Its also not appearing when clicked, but I followed a tutorial exactly. Any ideas on the problem or mistakes?
<html>
<head>
<title>Bootstrap Testing</title>
<link rel="stylesheet" type="text/css" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class='navbar navbar-inverse'>
<div class='container-fluid'>
<!--Logo-->
<div class='navbar-header'>
<a href="#" class='navbar-brand'>MY LOGO</a>
</div>
<!--Menu Items-->
<div>
<ul class='nav navbar-nav'>
<li class='active'>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<!--drop down menu-->
<li class='dropdown'>
My Profile <span class="caret"></span>
<ul class="dropdown-menu">
<li>Friends</li>
<li>Photos</li>
<li>Settings</li>
</ul>
</li>
</div>
</nav>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js" type="text/javascript"></script>
</body>
You need to place the <li class='dropdown'> within the <ul class='nav navbar-nav'>. (The presence of an <li> element without a parent list element should probably be cause for alarm in any case.)
So that part of your HTML should be shuffled to look like:
<!-- [...] -->
<!--Menu Items-->
<div>
<ul class='nav navbar-nav'>
<li class='active'>Home</li>
<li>About</li>
<li>Contact</li>
<!--drop down menu-->
<li class='dropdown'>
My Profile <span class="caret"></span>
<ul class="dropdown-menu">
<li>Friends</li>
<li>Photos</li>
<li>Settings</li>
</ul>
</li>
</ul>
</div>
<!-- [...] -->
Here's a Bootply of the revised code. Hope this helps! Let me know if you have any questions.
The bootstrap.min.js needs to come after you load jquery. I always like to start my documents with the basic template bootstrap shows here: http://getbootstrap.com/getting-started/#template
It makes it a lot easier to make sure I have everything loading and in the right order.
You will also want to move your dropdown li to be inside your ul with the "nav navbar-nav" class. Like this:
<ul class='nav navbar-nav'>
<li class='active'>Home</li>
<li>About</li>
<li>Contact</li>
<!--drop down menu-->
<li class='dropdown'>
My Profile <span class="caret"></span>
<ul class="dropdown-menu">
<li>Friends</li>
<li>Photos</li>
<li>Settings</li>
</ul>
</li>
</ul>
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