I'm new to bootstrap and try to implement the NavBar sample on a website, It works great on bigs screen but when yuo try to see it on small-screen devices, the navbar options disappear.
Here is a picture from my desktop:
Here is a picture of the small screen device:
When I click on the collapse menu on the right nothing happens.
I made the link to the css and js on my html header as follows:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
And implement the nav var with the sample code from Bootstrap site, I test it Chrome and Firefox.
<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">
<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" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li 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" role="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><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
You need to include JQuery before Bootstrap in the header since bootstrap requires JQuery in order to work correctly.
<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>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
Otherwise you'll get an error since Bootstrap is referencing a function that does not exist in that point in time.
hope that helps.
Related
I have created a simple 4 page site using Twitter Bootstrap. Although it worked previously, but now scrollbars are appearing in different sections on the home page.
I've got a dropdown on the top menu. Whenever the "Product" menu item is clicked ( https://gyazo.com/8edfee3de1f27861dee5488da2b2a168), rather than showing a dropdown menu, it's producing a menu with a scrollbar.
Similarly, I've also created a carousel below the navigation but scrollbars are appearing on the "previous" and "next" button
The scrollbar is even appearing on the footer
When viewed on a mobile device (an emulator) the icon bars are not being displayed. (https://gyazo.com/7f78dfc4797a135cc3083fa1f6aa8bc2)
Here is the code for the index page:
<?php require_once "inc/functions.php"; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simex</title>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<?php require "inc/navigationTop.php" ?>
<?php require "inc/slider.php"; ?>
<?php require "inc/homeTiles.php" ?>
<?php require "inc/footer.php" ?>
</body>
</html>
Here's the code for the navigation section:
<?php require_once "inc/functions.php" ?>
<nav class="navbar navTop">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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="index.php" target="_self">Simex</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav pull-right navigationList">
<li>Home</li>
<li class="dropdown">
Products <span class="caret"></span>
<ul class="dropdown-menu">
<li>Reverse Osmosis</li>
<li role="separator" class="divider"></li>
<li>Water Treatment</li>
<li role="separator" class="divider"></li>
<li>Water Bottling Plant</li>
<li role="separator" class="divider"></li>
<li>Japanese Reconditional Vehicles</li>
<li role="separator" class="divider"></li>
<li>Export & Sesame Seeds</li>
<li role="separator" class="divider"></li>
<li>Agri Farming & Equipment</li>
</ul>
</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
The problem was with the attached stylesheet.
Previous css style:
* {
.
.
overflow-x:hidden;
}
I erased the overflow-x property and placed it as a property for the body, like:
body {
.
.
.
overflow-x:hidden;
}
<!DOCTYPE html>
<html>
<?php
include 'includes/head.php';
?>
<body>
<?php
include 'includes/header.php';
?>
head.php:-
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<title>AIT Project</title>
</head>
header.php:-
<nav class="navbar navbar-default navbar-fixed-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" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
As soon as I reduce my display size the bootstrap navbar goes into responsive mode. When I click the button the whole menu drops down but doesn't climb back up.
responsive navbar
Also on dropping down in responsive mode my carousel gets hidden by the navbar
the carousel
There is a typo/blank space in header.php row 4: data- target="#myNavbar"
...should be data-target="#myNavbar"
When fixing that your code is working, see
https://plnkr.co/edit/gbdhAqbgfvj57BqHzMdV?p=preview A click on the "hamburger menu" to left expands the menu; one more click it collapse. Is this what you want/expect?
I am trying to create a simple cms, with the ability to allow users to change the body background colour when a img is clicked, however I am unable to get the background colour to change? I am using php and GET variables to pass colour id info and sessions to save user input. I keep getting this error: "Warning: session_start(): Cannot send session cookie - headers already sent by (output started at /Applications/MAMP/htdocs/CMS/index.php:1) in /Applications/MAMP/htdocs/CMS/header.php on line 2" yet nothing is sent before session start? And how can I make my css body background colour change depending on which image is clicked? Can someone please shed some wisdom?
thanks in advance
The code:
<?php
session_start();
if(isset($_GET['colour'])) {
$colour = $_GET['colour'];
$_SESSION['colour'] = $colour;
}
$colour_session = $_SESSION['colour'];
echo "bgcolour = $colour_session";
?>
<!DOCTYPE html>
<html>
<head>
<title>CMS</title>
<meta charset="UTF-8">
<link type='text/css' rel='stylesheet' href='css/bootstrap.min.css'/>
<link type='text/css' rel='stylesheet' href='css/main.css'/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1, user- scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="#navbar-collapse" 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="index.php"><span class="glyphicon glyphicon-home"></span> CMS</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Login <span class="caret"></span>
<ul class="dropdown-menu">
<li><i class="fa fa-user"></i> User</li>
<li role="separator" class="divider"></li>
<li><i class="fa fa-user-plus"></i> Admin </li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="conatiner-fluid">
<div class="col-md-12">
<div class="col-md-4 col-md-offset-4 text-center bgColour">
<p>Choose Background Colour:</p>
<img src="images/grey.jpg">
<img src="images/white.jpg">
<img src="images/pink.jpg">
<img src="images/blue.jpg">
<img src="images/purple.jpg">
<img src="images/green.jpg">
<img src="images/yellow.jpg">
<img src="images/orange.jpg">
<img src="images/red.jpg">
</div>
</div>
</div>
**body and html tags are closed by 'require 'footer.php'
<body bgcolor='<?php echo $colour_session; ?>'>
just add this in your code to set the bgcolor of body
Here is the code, I am trying to add a dropdown for login. Here is the header:
<head>
<title>Forms Generator</title>
<!-- Latest compiled and minified CSS -->
<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">
<link rel="stylesheet" type="text/css"
href="<?php echo $path . 'css/main.css'; ?>" />
</head>
<body>
<div id="page">
<header class="navbar-inverse" role="banner">
<nav class="navbar navbar-inverse">
<div class="container">
<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="#">Forms Generator</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">Home <span class="sr-only">(current)</span></li>
<li class="active">Create Form<span class="sr-only">(current)</span></li>
<li class="active">View Surveys<span class="sr-only">(current)</span></li>
<li class="active">View Statistics<span class="sr-only">(current)</span></li>
</ul>
<!-- Working on dropdown here -->
<ul class="nav navbar-nav navbar-right">
<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>
<!-- END DROPDOWN WORK-->
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</nav>
</header>
<p>Interactive Forms Generation</p>
<p>Enter links/buttons to create survey/take survey, etc here.</p>
</div>
</div>
Here's the code for the footer:
<div id="footer">
<p class="copyright">
© <?php echo date("Y"); ?>
</p>
</div>
</div>
</div><!-- end page -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
So basically the dropdown that I'm attempting to add to the end of the navbar isn't dropping down. Why is it not doing so?
EDIT: I am running XAMPP and using Chrome.
Check your html document at https://validator.w3.org/nu/
Take a look at the (error) console of your browser
try it with
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
just put your jquery file before bootstrap.js file
<script src="script/jquery-3.2.0.js" type="text/javascript"></script>
<script src="script/bootstrap.js" type="text/javascript"></script>
I am using the newest version of Laravel 4 and the templating engine.
I suddenly get this in my code on every page.
" ";</body></html>
How can this be?
This is my layout file:
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>mytitle</title>
<!-- Bootstrap core CSS
<link href="{{asset('css/bootstrap.css')}}" rel="stylesheet">-->
<!-- Custom styles for this template -->
<link rel="stylesheet/less" type="text/css" href="{{asset('less/all.less')}}" />
<script src="{{asset('js/less-1.6.2.min.js')}}"></script>
<link href="{{asset('css/sticky-footer-navbar.css')}}" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
#yield('page_css')
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
#include('layouts.navigation')
#yield('content')
</div><!-- Wrap End -->
#include('layouts.footer')
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="{{asset('js/jquery-1.11.0.min.js')}}"></script>
<script src="{{asset('js/bootstrap.min.js')}}"></script>
#yield('page_js')
</body>
</html>
Altough page_js is not used.
It always appends this "" and semicolon.
Some pages also show this
<script src="http://localhost:8000/js/jquery-1.11.0.min.js"></script>
<script src="http://localhost:8000/js/bootstrap.min.js"></script>
<script src="http://localhost:8000/js/holder.js"></script>
<script>
$( document ).ready(function() {
});
</script>
</body>
</html>;
Thanks for any help!
Navigation layout:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Test</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Outfits <b class="caret"></b>
<ul class="dropdown-menu">
<li>Top Outfits</li>
<li>Neuste Outfits</li>
<li class="divider"></li>
<li class="dropdown-header">Meine</li>
<li>Outfits</li>
<li>Favoriten</li>
</ul>
</li>
<li>Test</li>
<li>Test</li>
<li class="dropdown">
Test <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<!-- Search Bar -->
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Suchbegriff" style="width:300px">
</div>
</form>
<!-- Right Nav -->
<ul class="nav navbar-nav navbar-right">
<li>Test</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Footer Layout:
<div id="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</div>
Somewhere in your template you have semicolon after the blade command, for example:
#include('scripts');
you should have something like
#include('scripts')
First, I'm not sure but you can refer on Laravel Doc Website: http://laravel.com/docs/templates
...
Sometimes, such as when you are not sure if a section has been defined, you may wish to pass a default value to the #yield directive. You may pass the default value as the second argument:
#yield('section', 'Default Content');
For your code, try this:
#yield('page_js', '');
it seems you have included php functionalities but ending with colon for example
#endcan;
remove the colon and will be good to go