I created a navbar, the navbar items collapse on small devices and can be seen through pressing a button that shows the items as a sidenav, the issue i'm having is that I'm not able to click any of the links, it shows the sidenav but everything is disabled, I'm going to show the snippet to explain this better.
<!-- This is a free template created by the github user NeutronBlast, please don't erase this -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper teal">
<!-- Your logo here! -->
<a href="#" class="brand-logo ml-nav-4 mt-2">L
</a>
<!-- Trigger button for collapsible menu on phone view -->
<a href="#" data-target="menu-responsive" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>ABOUT US</li>
<li>FEATURES</li>
<li>SERVICES</li>
<li>PROJECTS</li>
<li>TESTIMONIALS</li>
<li>CONTACT</li>
</ul>
<!-- Menu that will be shown on small devices -->
<ul class="sidenav" id="menu-responsive">
<li>ABOUT US</li>
<li>LINK</li>
<li>SERVICES</li>
<li>PROJECTS</li>
<li>TESTIMONIALS</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
</div>
<!-- Compiled and minified JavaScript -->
<script type="application/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
M.AutoInit();
});
</script>
</body>
</html>
Note: I realized that removing the div with the class navbar-fixed solves the problem of the sidenav being disabled but I need the navbar to be fixed on desktop, so simply removing that it's not enough of a solution for me.
You'll want to keep the sidenav markup outside of the navbar markup...
<!-- Navbar -->
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper teal">
<!-- Your logo here! -->
L
<!-- Trigger button for collapsible menu on phone view -->
<a href="#" data-target="menu-responsive" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>ABOUT US</li>
<li>FEATURES</li>
..
</ul>
</div>
</nav>
</div>
<!-- Menu that will be shown on small devices -->
<ul class="sidenav" id="menu-responsive">
<li>ABOUT US</li>
<li>LINK</li>
...
</ul>
https://codeply.com/p/IsB0HvAEJy
Related
My app requires Bootstrap. Hoping to override the default Bootstrap style, I am loading Bootstrap first followed by my custom CSS. Still end result differs. What am I missing? Here is an MWE.
demo.css
html, body {
background:#fbf3e8;
}
body {
margin:0;
padding:2em 5px;
}
#media (min-width: 640px) {
body {
padding:2em;
font-size:112.5%;
}
}
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>SmartMenus jQuery Website Menu - jQuery Plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<!-- jQuery -->
<script type="text/javascript" src="../libs/jquery/jquery.js"></script>
<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>
<!-- SmartMenus jQuery init -->
<script type="text/javascript">
$(function() {
$('#main-menu').smartmenus({
subMenusSubOffsetX: 1,
subMenusSubOffsetY: -8
});
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- SmartMenus core CSS (required) -->
<link href="../css/sm-core-css.css" rel="stylesheet" type="text/css" />
<!-- "sm-blue" menu theme (optional, you can use your own CSS, too) -->
<link href="../css/sm-blue/sm-blue.css" rel="stylesheet" type="text/css" />
<!-- My custom CSS -->
<link href="../libs/demo-assets/demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav id="main-nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
<ul id="main-menu" class="sm sm-blue" data-smartmenus-id="14772210106692266">
<li>Home</li>
<li>
<span class="sub-arrow">+</span>About
<ul id="sm-14772210106692266-2" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-1" aria-expanded="false">
<li>Introduction to SmartMenus jQuery</li>
<li>Themes</li>
<li>The author</li>
<li>
<span class="sub-arrow">+</span>The company
<ul id="sm-14772210106692266-4" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-3" aria-expanded="false">
<li>About Vadikom</li>
<li>Projects</li>
<li>Services</li>
<li>Privacy policy</li>
</ul>
</li>
</ul>
</li>
<li>
<span class="sub-arrow">+</span>Sub test
<ul id="sm-14772210106692266-6" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-5" aria-expanded="false">
<li>Dummy item</li>
<li>Dummy item</li>
<li>Disabled menu item</li>
<li>Dummy item</li>
<li>
<span class="sub-arrow">+</span>more...
<ul id="sm-14772210106692266-8" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-7" aria-expanded="false">
<li>Dummy item</li>
<li>
<span class="sub-arrow">+</span>more...
<ul id="sm-14772210106692266-10" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-9" aria-expanded="false">
<li>Dummy item</li>
<li>A 'current' class item</li>
<li>Dummy item</li>
<li>
<span class="sub-arrow">+</span>more...
<ul id="sm-14772210106692266-12" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-11" aria-expanded="false">
<li>subMenusMinWidth</li>
<li>10em</li>
<li>forced.</li>
</ul>
</li>
<li>Dummy item</li>
<li>Dummy item</li>
</ul>
</li>
<li>Dummy item</li>
</ul>
</li>
</ul>
</li>
<li>
<span class="sub-arrow">+</span>Mega menu
<ul class="mega-menu" id="sm-14772210106692266-14" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-13" aria-expanded="false">
<li>
<!-- The mega drop down contents -->
<div style="width:400px;max-width:100%;">
<div style="padding:5px 24px;">
<p>This is a mega drop down test. Just set the "mega-menu" class to the parent UL element to inform the SmartMenus script. It can contain <strong>any HTML</strong>.</p>
<p>Just style the contents as you like (you may need to reset some SmartMenus inherited styles - e.g. for lists, links, etc.)</p>
</div>
</div>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
If I don't load Bootstrap by deleting line #24, the result looks like Figure 1 (expected) where as the actual view is figure 2 (with Bootstrap loaded)
Figure 1
Figure 2
In other words, I wan't the extra padding surrounding the menu bar on all sides. However, the menubar contains no padding either on top or both the sides.
.navbar-fixed-top sets (position:fixed;left:0;top:0;right:0) to your element. so delete this class from your nav tag
add rules to #navbar id or .navbar class to add the padding rules you want to extend the css from Bootstrap in your demo.css file.
If you want to overwrite the bootstrap css property or any other just give "!important"
html, body {
background:#fbf3e8 !important;
}
body {
margin:0 !important;
padding:2em 5px !important;
}
My app requires Bootstrap. Hoping to override the default Bootstrap style, I am loading Bootstrap first followed by my custom CSS. Still end result differs. What am I missing? Here is an MWE.
demo.css
html, body {
background:#fbf3e8;
}
body {
margin:0;
padding:2em 5px;
}
#media (min-width: 640px) {
body {
padding:2em;
font-size:112.5%;
}
}
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>SmartMenus jQuery Website Menu - jQuery Plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<!-- jQuery -->
<script type="text/javascript" src="../libs/jquery/jquery.js"></script>
<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>
<!-- SmartMenus jQuery init -->
<script type="text/javascript">
$(function() {
$('#main-menu').smartmenus({
subMenusSubOffsetX: 1,
subMenusSubOffsetY: -8
});
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- SmartMenus core CSS (required) -->
<link href="../css/sm-core-css.css" rel="stylesheet" type="text/css" />
<!-- "sm-blue" menu theme (optional, you can use your own CSS, too) -->
<link href="../css/sm-blue/sm-blue.css" rel="stylesheet" type="text/css" />
<!-- My custom CSS -->
<link href="../libs/demo-assets/demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav id="main-nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
<ul id="main-menu" class="sm sm-blue" data-smartmenus-id="14772210106692266">
<li>Home</li>
<li>
<span class="sub-arrow">+</span>About
<ul id="sm-14772210106692266-2" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-1" aria-expanded="false">
<li>Introduction to SmartMenus jQuery</li>
<li>Themes</li>
<li>The author</li>
<li>
<span class="sub-arrow">+</span>The company
<ul id="sm-14772210106692266-4" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-3" aria-expanded="false">
<li>About Vadikom</li>
<li>Projects</li>
<li>Services</li>
<li>Privacy policy</li>
</ul>
</li>
</ul>
</li>
<li>
<span class="sub-arrow">+</span>Sub test
<ul id="sm-14772210106692266-6" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-5" aria-expanded="false">
<li>Dummy item</li>
<li>Dummy item</li>
<li>Disabled menu item</li>
<li>Dummy item</li>
<li>
<span class="sub-arrow">+</span>more...
<ul id="sm-14772210106692266-8" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-7" aria-expanded="false">
<li>Dummy item</li>
<li>
<span class="sub-arrow">+</span>more...
<ul id="sm-14772210106692266-10" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-9" aria-expanded="false">
<li>Dummy item</li>
<li>A 'current' class item</li>
<li>Dummy item</li>
<li>
<span class="sub-arrow">+</span>more...
<ul id="sm-14772210106692266-12" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-11" aria-expanded="false">
<li>subMenusMinWidth</li>
<li>10em</li>
<li>forced.</li>
</ul>
</li>
<li>Dummy item</li>
<li>Dummy item</li>
</ul>
</li>
<li>Dummy item</li>
</ul>
</li>
</ul>
</li>
<li>
<span class="sub-arrow">+</span>Mega menu
<ul class="mega-menu" id="sm-14772210106692266-14" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-13" aria-expanded="false">
<li>
<!-- The mega drop down contents -->
<div style="width:400px;max-width:100%;">
<div style="padding:5px 24px;">
<p>This is a mega drop down test. Just set the "mega-menu" class to the parent UL element to inform the SmartMenus script. It can contain <strong>any HTML</strong>.</p>
<p>Just style the contents as you like (you may need to reset some SmartMenus inherited styles - e.g. for lists, links, etc.)</p>
</div>
</div>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
If I don't load Bootstrap by deleting line #24, the result looks like Figure 1 (expected) where as the actual view is figure 2 (with Bootstrap loaded)
Figure 1
Figure 2
In other words, I wan't the extra padding surrounding the menu bar on all sides. However, the menubar contains no padding either on top or both the sides.
A few things to consider.
Make sure the CSS selector matches the rule you want to override in the bootstrap file exactly. So if div > a > span don't go div > span
Make sure the bootstrap file isn't using the keyword !important
Add a type="text/css" to the bootstrap link
lastly, see if it works if you put the keyword !important
<link href="css/SideMenuBar.css" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/bootstrap.js"></script>
<!-- Optional theme -->
<div class="nav-side-menu">
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class="fa fa-dashboard fa-lg"></i> Dashboard
</a>
</li>
<li data-toggle="collapse" data-target="#service" class="collapsed">
<i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
</ul>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
As per the code given, drop down menu in side bar when we click on services to have more option it appears but when we click again to close it doesn't close.
I have moved some buttons around on my navbar, and now it isn't filling the container width fully.
<div class="container">
<div class="header-nav-bar home-slide">
<nav>
<button><i class="fa fa-bars"></i></button>
<ul class="primary-nav list-unstyled">
<li class="bg-color">Home</li>
<li class="">Company</li>
<li>Price</li>
<li>About Us</li>
<li>Contact Us</li>
<li>FAQ</li>
<li>Terms</li>
</ul>
</nav>
</div>
</div>
I have tried to use "container-fluid" however there doesn't appear to be anything that has changed regarding width of the buttons.
The size of the container which the buttons are meant to fill evenly is 1140px in width on a 1920 x 1080 monitor.
Thanks for your time.
Are you looking for this? Otherwise reply me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button> <i class="fa fa-bars"></i></button>
</div>
<div>
<ul class="nav navbar-nav">
<li class="bg-color">Home<i class="fa fa-angle-down"></i>
<li>Home</li>
</li>
<li class="">Company<i class="fa fa-angle-down"></i>
<li>Newsletter</li>
</li>
<li>Search Page</li>
<li> Blog<i class="fa fa-angle-down"></i>
<li>Blog list</li>
<li>Blog-post</li>
<li>Price</li>
<li>About Us</li>
<li>Contact Us</li>
</div>
</div>
</nav>
</body>
</html>
I'm trying to use foundation to build a navigation menu. The black bar loads with my content, but some features don't work. For example, the drop down menu doesn't work when the mouse hovers over it. Also the proper mouseover effects arent working. Am I forgetting something?
http://jsfiddle.net/Sbt75/755/
Here is my code
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<!--Jquery-->
<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
<!--Foundation-->
<script src="js/foundation.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/foundation.css" type="text/css" />
<link rel="stylesheet" href="css/normalize.css" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="contain-to-grid sticky">
<nav class="top-bar" role="navigation" data-options="is_hover: true">
<ul class="title-area">
<li class="name">
<h1>VoIP Innovations</h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="has-dropdown">
Services
<ul class="dropdown">
<li>Origination</li>
<li>Termination</li>
<li>E911</li>
<li>Hosted Billing</li>
</ul>
</li>
<li>Nav 2</li>
<li>Nav 3</li>
<li>Nav 4</li>
<li>Nav 5</li>
</ul>
</section>
</nav>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<script>
$(document).foundation();
</script>
Here is working Fiddle.
Firstly, you have to put data-topbar attribute into your nav element.
Secondly, you have to put li with menu into your code:
<li class="toggle-topbar menu-icon">
<a href="#">
<span>Menu</span>
</a>
</li>
Whole HTML:
<nav class="top-bar" data-topbar role="navigation" data-options="is_hover: true">
<ul class="title-area">
<li class="name">
<h1>
VoIP Innovations
</h1>
</li>
<li class="toggle-topbar menu-icon">
<a href="#">
<span>Menu</span>
</a>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="has-dropdown">
Services
<ul class="dropdown">
<li>
Origination
</li>
<li>
Termination
</li>
<li>
E911
</li>
<li>
Hosted Billing
</li>
</ul>
</li>
<li>
Nav 2
</li>
<li>
Nav 3
</li>
<li>
Nav 4
</li>
<li>
Nav 5
</li>
</ul>
</section>
</nav>
Hey I think you are missing one atribute, before role="navigation" on the nav tag, add data-topbar
so it would look like this
<nav class="top-bar" data-topbar role="navigation" data-options="is_hover: true">
Haven't found anything else missing
Here is the way that the foundation documents use:
<nav class="top-bar" data-topbar role="navigation">
Try changing your nav tag out with this and let me know what happens.