I am begginer with bootstrap. I'm trying create the ScrollSpy Bootstrap on my page but it doesn't work. Whatever I do it doesnt work properly and I have no idea why? Could somebody look at my code and tell what is wrong. Here it is:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<style>
#top-center-photo{
width: 100%;
height: 500px;
background-color: red;
}
#aboutus-content{
width: 100%;
height: 500px;
background-color: green;
}
#offert{
width: 100%;
height: 500px;
background-color: yellow;
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>o nas</li>
<li>oferta</li>
<li>realizacje</li>
</ul>
</div>
</nav>
<div id="top-center-photo">
</div>
<div id="aboutus-content">
</div>
<div id="offert">
</div>
<div id="realizacje">
</div>
the only problem is that you have not linked js file properly
put this code above </body> tag
<!-- Latest compiled and minified JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Here is your scroll-spy: Demo working fine
There are no errors in your code... its working fine :)
Related
I've got a screenshot and code of my current site:
CODE
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>
title
</title>
<style>
body{
background-color: #235a59;
}
a: class.navbar-brand{
font-family: sans-serif;
}
</style>
</head>
<body>
<ul>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">title</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><b>Dashboard</b></li>
<li>Donate</li>
<li>Protect</li>
<li>About</li>
</ul>
</div>
</nav>
</ul>
</body>
</html>
SCREENSHOT
Website Navbar
I would like the whole navbar to stretch across the top.
Any help would be appreciated!
Hey there is so many mistakes in your code copy paste this code its working fine
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>
title
</title>
<style>
body{
background-color: #235a59;
}
navbar-brand{
font-family: sans-serif;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">title</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><b>Dashboard</b></li>
<li>Donate</li>
<li>Protect</li>
<li>About</li>
</ul>
</div>
</nav>
</body>
</html>
Use position: absolute, top: 0px and left: 0px to put the navbar in the top-left corner of the page.
Then use width: 100% to make it "stretching" accross the top.
So basically you'll add this to the <style>:
.navbar {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}
Here is your full code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>
title
</title>
<style>
body{
background-color: #235a59;
}
a: class.navbar-brand{
font-family: sans-serif;
}
.navbar { /*This will do the trick.*/
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}
</style>
</head>
<body>
<ul>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">title</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><b>Dashboard</b></li>
<li>Donate</li>
<li>Protect</li>
<li>About</li>
</ul>
</div>
</nav>
</ul>
</body>
</html>
A living demo here: https://codepen.io/marchmello/pen/bGVGzWW?editors=1000
I wanted to add a bootstrap collapse navbar for smaller screen sizes for tablets and mobile phones. For some reason the navbar collapses in general even at the regular laptop screen size. Also when I press the button, the links appear below the navbar instead of inside the navbar. Don't understand the issue as I have used this same bootstrap collapse code before on a different project and had no issues. Please help if you can, thank you.
body {
margin: 0;
padding: 0;
background: url(../Images/td.jpg) center/cover fixed no-repeat;
opacity: 5;
}
/* Navbar */
.navbar {
background: #0c0452;
padding: 20px 20px;
width: 100%;
height: 80px;
}
.logo {
height: 50px;
margin: 5px 10px;
}
.links {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.links li {
display: inline;
}
.links li a {
padding: 40px;
color: gold;
font-family: "Calistoga", cursive;
}
/* End of Navbar */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="stylesheet" href="css/style.css" />
<title>Lavonte Hights</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Calistoga&display=swap"
rel="stylesheet"
/>
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<!-- Latest compiled and minified CSS Bootstrap -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<img src="Images/sheplogo2.jpg" alt="" class="logo" />
<div class="navbar-header">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#myNavbar"
>
<div class="toggler-btn">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
<div class="bar bar3"></div>
</div>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="links navbar-nav mx-auto">
<li class="nav-item">Home</li>
<li class="nav-item">Bio</li>
<li class="nav-item">
Career Stats/Awards & Accolades
</li>
<li class="nav-item">Film</li>
</ul>
</div>
</div>
</nav>
<!--End of Navbar-->
</body>
</html>
body {
margin: 0;
padding: 0;
background: url(../Images/td.jpg) center/cover fixed no-repeat;
opacity: 5;
}
/* Navbar */
.navbar {
background: #0c0452;
padding: 20px 20px;
width: 100%;
}
.logo {
height: 50px;
margin: 5px 10px;
}
.links {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.links li {
display: inline;
}
.links li a {
padding: 0 40px;
color: gold;
font-family: "Calistoga", cursive;
}
.navbar-toggler {
color: #ffffff;
}
#media screen and (max-width:768px) {
.links li a {
padding: 0 0 5px;
color: gold;
font-family: "Calistoga", cursive;
}
}
/* End of Navbar */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="css/style.css" />
<title>Lavonte Hights</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Calistoga&display=swap" rel="stylesheet" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<!-- Latest compiled and minified CSS Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-default navbar-expand-md navbar-fixed-top">
<div class="container-fluid">
<img src="Images/sheplogo2.jpg" alt="" class="logo" />
<div class="navbar-header">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="links navbar-nav mx-auto">
<li class="nav-item">Home</li>
<li class="nav-item">Bio</li>
<li class="nav-item">
Career Stats/Awards & Accolades
</li>
<li class="nav-item">Film</li>
</ul>
</div>
</div>
</nav>
<!--End of Navbar-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Funky Munky Arcade</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<img src="FMA_Logo.png" class="logo">
</div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>Parties</li>
<li>Contact</li>
</ul>
</div>
</nav>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
This is what I have so far. I have a link to a style sheet of my own that currently has no style. Just html so far. I am trying to get it to where the links are centered with the image instead of being at the top. I'd rather not use padding if possible.
You can add a class to the parent, and set it to display: flex; align-items: center; to center the elements vertically.
.nav-container {
display: flex;
align-items: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Funky Munky Arcade</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container nav-container">
<div class="navbar-header">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="logo">
</div>
<ul class="nav nav-justified">
<li>Home</li>
<li>Parties</li>
<li>Contact</li>
</ul>
</div>
</nav>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I just started coding and i am building a Website with bootstrap. I want to create a simple Container (id="test") with a background image. I don't know why but i just does not set the background image and i am out of ideas. I am also using external CSS. I just found out that the collapse button is not working. Please help me fix those two Problems.
greetings,
Johannes Getzner
HTML:
<!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">
<link rel="stylesheet" type="text/css" href="MyStyle.css"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<title>FirstWebsite</title>
</head>
<body>
<div id="wrapper">
<div class="navbar navbar-default">
<div id="container">
<div class="navbar-header">
<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 id="brand" class="navbar-brand">Example</a>
</div>
<div class="collapse navbar-collapse">
<ul id="listleft" class="nav navbar-nav navbar-left">
<li>Home</li>
<li>About</li>
</ul>
<ul id="listright" class="nav navbar-nav navbar-right">
<li>Contact</li>
<li>Blog</li>
</ul>
</div>
</div>
</div>
<div id="test">
</div>
</div>
</body>
</html>
CSS
#brand{
font-size: 300%;
}
.navbar-brand{
position:absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
#listleft{
margin-left: 20%;
}
#listright{
margin-right: 20%;
}
ul li{
font-size: 100%;
}
#test{background-image: url("background2.jpg");
}
Your css looks like it might be ok, but doesn't look like you're setting a height or width on that empty div. Probably you're getting a 0px by 0px empty div with the background of your image
The div with id="test" doesn't have any content; therefore it doesn't have a height. So whatever background you give it won't show up.
Solution: give the div a height in the css.
#test {
background-image: url("background2.jpg");
height: 100px; /* or whatever */
}
(or, put something in the div, like text or something.)
Change the order of style links in head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="MyStyle.css"></link>
Making the logo and text responsive across all resolution and size. I am having a problem where my text gets collapsed when i re-size my browser. How can i ensure that the logo and the text next to is in same line for all resolution and sizes.
<html>
<head>
<title>Header</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="slider.js"></script>
<style>
.divider-vertical {
height: 50px;
margin-top: 0;
margin-bottom: 0;
margin-left: 20px;
margin-right: 10px;
border-left: 1px solid #a8a8a8;
border-right: 1px solid #a8a8a8;
}
</style>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default">
<div class="col-sm-3">
<a class="navbar-brand" href="#">BimAssure</a>
<ul class="nav navbar-nav">
<li class="divider-vertical"></li>
<li><h4 style="margin-top: 15px">ACME - New York</h4></li>
</ul>
</div>
</nav>
</div>
</body>
</html>
Below is the fiddle i am being working on. I want the logo and text to be in same line across all resolution and sizes.
http://jsbin.com/yuhibisu/4/edit
You only need to change this
<ul class="nav navbar-nav">
<li class="divider-vertical"></li>
To this:
<ul class="nav navbar-nav divider-vertical">
<li> ...
you have to apply the style to the "ul" and not the "li"
Check it:
http://jsbin.com/yuhibisu/8/edit