I am trying to create a side navigation bar using MaterializeCSS. I have following code. But when I try to run it in browser it does not show anything. It shows only blank page.
<!DOCTYPE html>
<html>
<head>
<title>Side Navigation Bar</title>
<!-- Compiled and minified jQuery -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
/script>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/
css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/
js/materialize.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".button-collapse").sideNav();
$('.collapsible').collapsible();
});
</script>
</head>
<body>
<nav>
<ul class="right hide-on-med-and-down">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
</ul>
<ul id="slide-out" class="side-nav">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i
class="mdi-navigation-menu"></i></a>
</nav>
</body>
</html>
please suggest me if any bug is there.
There is a "bug" in your code - on 7th line your script (the one importing jQuery) is being closed incorrectly - you have /script> instead of </script>
In addition, you are using outdated method to put material icons in i tags - you should have <i class="material-icons">menu</i> instead of <i ="mdi-navigation-menu"></i>. Or if you prefer the 'old' way, I guess you will have to find that library and upload into your project as if I remember this right, that method is no longer officially supported.
Here is my edition of your code that works:
<!DOCTYPE html>
<html>
<head>
<title>Side Navigation Bar</title>
<!-- Compiled and minified jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".button-collapse").sideNav();
$('.collapsible').collapsible();
});
</script>
</head>
<body>
<i class="material-icons">menu</i>
<ul id="slide-out" class="side-nav">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
</ul>
</body>
</html>
Try following as your nav content
<nav>
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo text-darken-1">Logo</a>
<div class="container">
<a href="#" data-activates="slide-out" class="button-collapse top-nav full hide-on-large-only black-text"><i
class="mdi-navigation-menu"></i></a>
</div>
</div>
<ul id="slide-out" class="side-nav fixed center-align">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
</ul>
</nav>
And add following in your CSS (Use header, main, footer in your body as an HTML-5 standard):
header, main, footer {
padding-left: 240px;
}
Related
I'm trying to create a base HTML file in Django that pretty much is the one responsible for the rest of the pages to inherit a template but the navbar doesn't seem to work. Anyone knows if there is a known issue from Bootstrap or am I doing something horribly wrong?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<li class="navbar-brand">BRAND</li>
<li class="navbar-link">Admin</li>
<li class="navbar-link">Other</li>
</ul>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Welcome to Index</h1>
<h2>This is index.html page showing!</h2>
</div>
</div>
</body>
</html>
I'm creating a navbar that displays a button when the screen size is below a certain width; just as you've seen with many other Bootstrap sides. When the button is displayed and clicked, the navigation links display in a vertical dropdown, which works as intended.
The problem comes when I try to close the dropdown by re-clicking the link. No matter what I do it remains open. After inspecting the live site, it looks like the class 'in' is added on the first click, but not removed on subsequent clicks (the toggle function). I'm at a loss for how to correct this, as I believe my links are correct in the header. Does anyone have any experience with this problem?
EDIT: As clarification, I understand that I could write a workaround in my javascript document, but I don't want to go down that path if there is a more obvious solution. Thanks for helping out a beginner.
<html>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="<?php echo get_bloginfo('template_directory'); ?>/javascipt/main.js"> <!-- personal JS Script (Not Sure which is better) Icons -->
<link href="<?php echo get_bloginfo('template_directory'); ?>/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet"> <!-- Font Awesome Icons -->
<link href="<?php echo get_bloginfo('template_directory'); ?>/style.css" rel="stylesheet"> <!-- Personal CSS Stylesheet -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="<?php echo get_bloginfo('template_directory'); ?>/javascript/main.js"></script> <!-- Personal JS Script -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script> <!-- Bootstrap Script -->
<title><?echo get_bloginfo( 'name' ); ?></title>
<?php wp_head(); ?>
</head>
<body>
<div class="main contain">
<nav class="navbar navbar-inverse hold-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand nav-logo2" href="<?php echo get_bloginfo( 'wpurl' ); ?>"></a>
</div>
<div class="collapse navbar-collapse pull-right header-text" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Marketing Campaigns</li>
<li>Donor Activation</li>
<li>Lobbying</li>
</ul>
</li>
<li>Our Team</li>
<li>Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user">
</span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in">
</span> Login</a></li>
</ul>
</div>
</div>
</nav>
Your code Seems working fine ,The in class generated on click is a bootstrap class and after toogling it disapers .
What you can do put the external resourse js files such as jquery,bootstrap at first and then your custom js file at last ,may be something is conflicting between these js file thats why toogle function is not working
you can add the js reference file by maintaining the sequence like below
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
<link href="<?php echo get_bloginfo('template_directory'); ?>/javascipt/main.js">
<script src="<?php echo get_bloginfo('template_directory'); ?>/javascript/main.js">
I have tried many solutions from Stack Overflow and looked at the bootstrap documentation and have downloaded local copy of shiv.js and repond.js and included them in footer but after refreshing in IE8 its still same as before no javascript is working and even no media queries are rendering as rendered in google chrome. navbar is also no displaying.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Theme Webmonopolist">
<meta name="author" content="Faisal Naseer">
<link rel="shortcut icon" href="assets/ico/favicon.png">
<title> WebMonopolist</title>
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/main.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/icomoon.css">
<link href="assets/css/animate-custom.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>
<script src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/modernizr.custom.js"></script>
</head>
<body>
.......
......
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/retina.js"></script>
<script type="text/javascript" src="assets/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="assets/js/smoothscroll.js"></script>
<script type="text/javascript" src="assets/js/jquery-func.js"></script>
<script type=”text/javascript” src=’https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js’></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/js/shiv.js"></script>
<script src="assets/js/respond.js"></script>
<![endif]-->
</body>
</html>
First of all, you should put your shiv and respond at the <head> tag, like they show here. It makes it possible detect browser's features before the whole page is loaded.
Second, here they say that serving respond.js from file:// pseudo-protocol is disabled for security purposes. Even serving it from a CDN, apparently, won't work, since here is indicated that for serving from another domain you must make some configuration.
So finally, I fixed all of it, ran the following code in localhost, not from file://, and the navbar works like a charm:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv/dist/html5shiv.min.js"></script>
<script type="text/javascript" src="lib/respond/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<h1>Hello, from IE8!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="lib/jquery/dist/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
I'm using a Bootstrap 3 navbar static top with nav pills. And that it works.
I cannot make data toggles working when the navbar is fixed to top.
This is the snippet with the navbar static top:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<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>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li><a href="#page_2" data-toggle="pill" >Page 2</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="tab-content">
<div class="tab-pane fade in active" id="page_1">
Page 1
</div>
<div class="tab-pane fade" id="page_2">
Page 2
</div>
</div>
</div>
</body>
</html>
And here it does not work:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<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>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li><a href="#page_2" data-toggle="pill" >Page 2</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="tab-content">
<div class="tab-pane fade in active" id="page_1">
Page 1
</div>
<div class="tab-pane fade" id="page_2">
Page 2
</div>
</div>
</div>
</body>
</html>
The data toggle is working, it's just that your content is overlaid by the navbar. Take a look at the docs:
Body padding required
The fixed navbar will overlay your other
content, unless you add padding to the top of the <body>. Try out your
own values or use our snippet below. Tip: By default, the navbar is
50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
Example here: http://www.bootply.com/pGzO62Dp9L
When the navbar is fixed, the next div starts at the same spot. So the pills are working, but the navbar is covering the content. You need to add padding to the top of your container.
I have an issue with my Twitter Bootstrat Carousel. The 4 DIV elements which are supposed to appear one after the other all appear together, on top of each other.
I followed CreativityTuts.org tutorial and cannot see where I am wrong...
Here is the HTML code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.carousel').carousel({
interval:2000
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span6 well">
<div id="myCarousel" class="carousel">
<div class="carousel-inner">
<center>
<div class="item active"><img src="bkk.png"></div>
<div class="item"><img src="brr.png"></div>
<div class="item"><img src="buu.png"></div>
<div class="item"><img src="btt.png"></div>
</center>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
</div>
<script src="js/carousel.js"></script>
</body>
</html>
My file structure is the following:
- bkk.png (and the 3 other images)
- css (file)
- fonts (file)
- js (file)
- carousel.js
- bootstrap.js
- bootstrap.min.js
- testcarousel.html
Can anyone help?
Thanks a lot in advance,
Paul
OK guys,
Thanks for your answers, it made me realize that I used code for Bootstrap 2, but actually using Bootstrap 3.
I found needed syntax here:
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-carousel.php