I have this problem, been dealing with it for a day now. My dropdown hamburger menu wont open up when resizing the browser window into a smaller size. The icon is showing, but when clicked nothing happens. I have no CSS for this one, yet. The CSS-file i have linked is empty.
What am I doing wrong?
<!DOCTYPE html>
<html lang="sv-se">
<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>Satsafett</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="satsafettBS.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<!-- Header -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="mainNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
satsafett
</div>
<!-- Menu Items -->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="active">Speltips</li>
<li>Oddsbonusar</li>
<li>TV-matcher</li>
<li>Casinobonusar</li>
</ul>
</div>
</div>
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
you have wrong value in data-target attribue. It should be:
data-target="#mainNavBar"
You are missing hash
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
satsafett
</div>
<!-- Menu Items -->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="active">Speltips</li>
<li>Oddsbonusar</li>
<li>TV-matcher</li>
<li>Casinobonusar</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Related
The javascript toggle element of my toggle collapse and expand doesn't work. This is my first project in javascript and i feel i must be doing something basic wrong.
I have the Nav bar set up so that the toggle is active at all screen sizes and the logo is central as this is a one page Game.
<!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">
<title>SPLANETS</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/splanetsfavicon.png" rel="icon">
<!-- Main Bootstrap Css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Main CSS File -->
<link href="/assets/css/style.css" rel="stylesheet">
<!--Icons-->
<script src="https://kit.fontawesome.com/128d236a07.js" crossorigin="anonymous"></script>
</head>
<body id="bg-space">
<!-- === Header === -->
<header>
<nav class="navbar">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span ><i class="earth-icon fa-solid fa-earth-americas"></i></span>
</button>
<a class="navbar-brand mx-auto" href="index.html"><img src="assets/img/templogo.png" alt="Splanets Logo" class="img-fluid "></a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- End of Header -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
</body>
</html>
I have included both bootstrap js file links at the bottom of the file and tested and everything loads correctly.
I have taken away my code and copied over the bootstrap nav and still i get no interactivity from the toggle.
I'm following a bootstrap tutorial. The bootstrap styles are not being applied in my browser. Also all the required files are in the same folder.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">SHUBHI KHANDELWAL </a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">HOME</li>
<li class="">WORKS</li>
<li class="">CONTACT</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Do you have error messages in the console?
Did you check the following html structure which need to be followed by bootstrap:
https://getbootstrap.com/docs/4.3/components/navs/
Do you have all the files locally in the correct folder:
css/bootstrap.min.css
js/bootstrap.min.js
Please check the documentation here to correctly include Bootstraps:
https://getbootstrap.com/docs/4.3/getting-started/introduction/
Try Bootstrap CDN
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
I am just trying to have the hamburger icon drop down the navbar when the screen is formatted to iphone size but it will not drop down.
I am also pretty sure that the JS and jquery placement is correct.
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Portfolio.css">
<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"></script>
</head>
<body>
<!-- NAVBAR -->
<nav id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collpase" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
COTO
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Services</li>
<li>Pricing</li>
<li>Team</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<!-- NAVBAR END -->
</body>
</html>
According to Bootstrap (https://getbootstrap.com/docs/4.0/components/navbar/):
You have incorrect data-toggle attribute:
data-toggle="collpase" → data-toggle="collapse"
Change the navbar-toggle button's data-target attribute to ID selector instead of class selector:
data-target=".navbar-collapse" → data-target="#navbar"
Add the ID attribute to navbar:
<div class="navbar-collapse collapse" id="navbar">
You had just a little typo at the data-toggle attribute. Also, you must always use ID selectors when you are trying to select a single element. Here is a working example (tested):
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Portfolio.css">
<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"></script>
</head>
<body>
<!-- NAVBAR -->
<nav id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
COTO
</div>
<div class="navbar-collapse collapse" id="myNav">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Services</li>
<li>Pricing</li>
<li>Team</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<!-- NAVBAR END -->
</body>
</html>
I am using jquery image slider in laravel. it is working with this scripts as well
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="jQuery Logo Slider Ticker by webdesignandsuch.com">
<meta name="viewport" content="width=device-width, initial-scale=1"<script src="{{('http://code.jquery.com/jquery-latest.js')}}"></script>
<script src="{{asset('js/jquery.bxSlider.js')}}"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider').bxSlider({
ticker: true,
tickerSpeed: 5000,
tickerHover: true
});
});
</script>
<link href="{{asset('css/style.css')}}" rel="stylesheet">
</head>
<i><h2>Paper Articals</h2></i>
<div class="slider-container">
<ul id="slider">
<li><a href="#"><p>kkkkkkk</p></li>
<li><img src="{{asset('/imgs/2.jpg')}}"></li>
<li><img src="{{asset('/imgs/3.jpg')}}"></li>
<li><img src="{{asset('/imgs/4.jpg')}}"></li>
<li><img src="{{asset('/imgs/5.jpg')}}"></li>
<li><img src="{{asset('/imgs/6.jpg')}}"></li>
<li><img src="{{asset('/imgs/7.jpg')}}"></li>
<li><img src="{{asset('/imgs/8.jpg')}}"></li>
</ul>
</div><!-- /slider -->
</html>
but is is not working with this #extends('layouts.app')
#section('content') in laravel I am using 5.2
#extends('layouts.app')
#section('content')
//above code here
#endsection
not error but not moving slider hold it? how can fix it???
updated app.blade.php
<!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 -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="{{asset('favicon.ico')}}">
<title>Wealth </title>
<!-- Bootstrap core CSS -->
<link href="{{asset('css/bootstrap.min.css')}}" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="{{asset('css/ie10-viewport-bug-workaround.css')}}" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="{{asset('js/ie-emulation-modes-warning.js')}}"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Custom styles for this template -->
<link href="{{asset('css/carousel.css')}}" rel="stylesheet">
<link href="{{asset('css/style.css')}}" rel="stylesheet">
</head>
<!-- NAVBAR
================================================== -->
<body>
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-default
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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=""><img src="{{asset('/imgs/logo.png')}}"></a>
{{-- <a class="navbar-brand" href="#">WEALTH LANKA MANAGEMENT</a>--}}
</div>
<div id="navbar" class="navbar-collapse collapse">
{{-- <ul class="nav navbar-nav">--}}
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown">
About<span class="caret"></span>
<ul class="dropdown-menu">
<li>About Us</li>
<li>Boad of Ditectors</li>
<li>Senior Team</li>
{{-- <li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>--}}
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
#yield('content')
<script src="{{('http://code.jquery.com/jquery-latest.js')}}"></script>
<script src="{{asset('js/jquery.bxSlider.js')}}"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider').bxSlider({
ticker: true,
tickerSpeed: 5000,
tickerHover: true
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="{{asset('js/bootstrap.min.js')}}"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="{{asset('js/vendor/holder.min.js')}}"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{{asset('js/ie10-viewport-bug-workaround.js')}}"></script>
</body>
</html>
app.blade.php
<!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 -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="{{asset('favicon.ico')}}">
<title>Wealth </title>
<!-- Bootstrap core CSS -->
<link href="{{asset('css/bootstrap.min.css')}}" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="{{asset('css/ie10-viewport-bug-workaround.css')}}" rel="stylesheet">
<script src="{{asset('js/ie-emulation-modes-warning.js')}}"></script>
<!-- Custom styles for this template -->
<link href="{{asset('css/carousel.css')}}" rel="stylesheet">
<!-- BxSlider css from library -->
<link href="{{asset('css/jquery.bxslider.css')}}" rel="stylesheet">
<link href="{{asset('css/style.css')}}" rel="stylesheet">
</head>
<body>
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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=""><img src="{{asset('/imgs/logo.png')}}"></a>
{{-- <a class="navbar-brand" href="#">WEALTH LANKA MANAGEMENT</a>--}}
</div>
<div id="navbar" class="navbar-collapse collapse">
{{-- <ul class="nav navbar-nav">--}}
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown">
About<span class="caret"></span>
<ul class="dropdown-menu">
<li>About Us</li>
<li>Boad of Ditectors</li>
<li>Senior Team</li>
{{-- <li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>--}}
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- Content goes here -->
#yield('content')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="{{asset('js/jquery.bxSlider.js')}}"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($('#slider').length > 0) {
$('#slider').bxSlider({
ticker: true,
tickerSpeed: 5000,
tickerHover: true
});
}
});
</script>
<script src="{{asset('js/bootstrap.min.js')}}"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="{{asset('js/vendor/holder.min.js')}}"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{{asset('js/ie10-viewport-bug-workaround.js')}}"></script>
</body>
</html>
otherpage.blade.php
#extends('layouts.app')
#section('content')
<ul class="bxslider">
<li><img src="/images/pic1.jpg" /></li>
<li><img src="/images/pic2.jpg" /></li>
<li><img src="/images/pic3.jpg" /></li>
<li><img src="/images/pic4.jpg" /></li>
</ul>
#endsection
Here is my code
<!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">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
Brand
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">|||</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
</ul>
</div>
</div>
</div>
<h1>Hello, world!</h1>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"</script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Basically the toggle does not work correctly
The home link comes up next to the brand rather than underneath it like it should
I have tried to find errors but have been unsuccessful
Any ideas
Try wrapping the HTML for the brand and button elements with the "navbar-header" class.
Here's a demo: http://plnkr.co/edit/mGNYfCowMeMHi2qL7HO4
<body>
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
Brand
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">|||</button>
</div>
<nav class="collapse navbar-collapse navHeaderCollapse" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
</ul>
</nav>
</div>
</div>
<h1>Hello, world!</h1> </body>
I think you are missing a navbar-header section, so something like this should work better:
...
<div class="navbar-header">
Brand
</div>
...
You may need to adjust things to prevent the next section wrapping onto a new line, but otherwise the toggle should work as you expect.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"</script>
jquery.min.js"
fix it
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
if you want a top-down menu bar, you should use the "sidebar-nav" element heirarchy.
like so :
<div<div class="sidebar-nav">
<div class="sidebar-brand">Brand</div>
<div >Home</div>
</div>