I want to add a transparent Bootstrap Navbar to a page which use fullpage.js. I want to achieve something like this, so that the navbar stays on top of the page but doesn't push the website contents down. How can I do this? I tried the code below but it doesn't work. I tried looking for solutions online but I couldn't find one. Here is some sample code. As you can see the navbar is not even displaying.
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.css" integrity="sha512-TD/aL30dNLN0VaHVoh9voFlNi7ZuWQYtV4bkIJv2ulZ8mEEkZJ7IyGvDthMKvIUwzLmPONnjQlAi55HTERVXpw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script>
<link href="css/master.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="fullpage">
<nav class="navbar navbar-light bg-transparent" id="myMenu">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"
style="border: none;">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About us</a>
</li>
</ul>
</div>
</nav>
<div class="section">
<div class="container-fluid">
<h2>Lorem ipsum</h2>
</div>
</div>
<div class="section">
<div class="container-fluid">
</div>
</div>
</div>
<script>
new fullpage('#fullpage', {
//options here
menu: '#myMenu',
autoScrolling: true,
scrollHorizontally: true,
navigation: true,
});
//methods
fullpage_api.setAllowScrolling(true);
</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
</body>
</html>
I managed to find a fix myself. I edited the css of the "navbar" class so instead of a relative position its position is fixed and now it works just as i wanted it to!
Add the following styles to the navbar
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.css" integrity="sha512-TD/aL30dNLN0VaHVoh9voFlNi7ZuWQYtV4bkIJv2ulZ8mEEkZJ7IyGvDthMKvIUwzLmPONnjQlAi55HTERVXpw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script>
<link href="css/master.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<nav class="navbar navbar-light bg-transparent" id="myMenu">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"
style="border: none;">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About us</a>
</li>
</ul>
</div>
</nav>
<div id="fullpage">
<div class="section">
<div class="container-fluid">
<h2>Lorem ipsum</h2>
</div>
</div>
<div class="section">
<div class="container-fluid">
</div>
</div>
</div>
<script>
new fullpage('#fullpage', {
//options here
menu: '#myMenu',
autoScrolling: true,
scrollHorizontally: true,
navigation: true,
});
//methods
fullpage_api.setAllowScrolling(true);
</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Related
Hello, after adding my navigation bar in background-color my h1 is
not showing up. I'm trying to center my h1-h6 tag in the center of my
website so I can style it to a different font type but when I add my
h1 tag with the , , or the h1 tag still doesn't
appear.
<!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">
<!---Font Awesome-->
<script src="https://kit.fontawesome.com/e093169393.js" crossorigin="anonymous"></script>
<!---Google Fonts-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
<!---CSS Stylesheets-->
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="./css/all.min.css">
<!---Font Awesome-->
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<!--Bootstrap Script-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></<>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<!---ICON--->
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<!---NAVBAR MENU-->
<html>
<head>
<body>
<h1>HERES MY H1</h1>
</body>
</head>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</html>
<!---About Me --->
< !----Toggle--->
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
< !----Icon Widgets--->
<ul class="navbar-nav ms-auto">
<li class="nav-item>
<form>
<label for="search class="search bar></label>
</form>
<a class="nav-link" href=""><input type="text" placeholder="Search"></a>
<li class="nav-item">
<a class="nav-link" href=""><i class="fa-solid fa-bag-shopping"></i></a>
</li>
</ul>
</div>
</nav>
<!---SHOPPING ICON--->
I think your trying to run before you can walk. It's good to learn new things but step by step.
First try to understand what a webpage is and how it's made.
Try to understand The DOM DOM basics
Then the different tags (div, span, p, h1, h2, h3, em, style, script, head, body, html)
Then navigation using <a href="some-website-address.com">Cool Website Dude!</>
Forms are VERY hard for a beginner as they involve more than just front-end code (HTML, CSS, JavaScript) as now you're writing back-end code that talks to the server and a database if you have one!
Basics first, then more complicated topics.
I have updated your code but not sure if it will give you what you want.
You only have 1 pair of html, head and body tags in a webpage btw.
<!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">
<!---Font Awesome-->
<script src="https://kit.fontawesome.com/e093169393.js" crossorigin="anonymous"></script>
<!---Google Fonts-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
<!---CSS Stylesheets-->
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="./css/all.min.css">
<!---Font Awesome-->
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<!--Bootstrap Script-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></<>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav ms-auto">
<li class="nav-item>
<form>
<label for="search" class="search-bar"></label>
<a class="nav-link" href="">
<input name="search" type="text" placeholder="Search">
</a>
</form>
</li>
<li class="nav-item">
<a class="nav-link" href=""><i class="fa-solid fa-bag-shopping"></i></a>
</li>
</ul>
</div>
</nav>
<h1>HERES MY H1</h1>
</body>
</html>
I can't get my bootstrap navbar to work correctly, when I hit the button it doesn't open, I have placed in every possible way the call to the bootstrap files and there is no way. I can't get it.
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.0">
<title>Minecraft Template HTML5</title>
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link rel="manifest" href="favicon/site.webmanifest">
<link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<!-- Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- My CSS-->
<link rel="stylesheet" href="css/style.css">
<!-- Font-Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
CONTENT
<!-- JQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>
As I can see you import all the libraries and everything but you haven't wrote code for Navbar you only write content? how it will work.
Check this it will work for you.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<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>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
Let me know if this will work for you
I have the following head on my html file, but it seems like there's something wrong, because I'm trying to use scrollspy and navbar collapse and neither of them will work
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nova Bookings</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<!-- Univia Pro Font -->
<link rel="stylesheet" href="https://use.typekit.net/wqq0dwp.css">
<!-- Franklin Gothic -->
<link rel="stylesheet" href="https://use.typekit.net/wqq0dwp.css">
<link href="css/style.css" rel="stylesheet">
</head>
This is my body:
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-custom fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" date-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mx-auto">
....
</ul>
</div>
</div>
</nav>
I don't see anything wrong here... Can anyone help me? Thanks!
Bootstrap should be loading/working properly with the code you posted above. The problem is that you wrote date-toggle instead of data-toggle. Test the code below to make sure it works:
<nav class="navbar navbar-expand-lg navbar-light bg-custom fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</div>
</nav>
I'm trying to achieve a 'collapse icon' that's floated left followed by Copyright © using Bootstrap4.
I've seen other questions about this topic but none seem to actually answer the question. Other questions have different code with obvious typos, my code doesn't. Why is it that data-toggle & data-target aren't recognized when you do include all the dependencies?
.titleText{
font-size:230%;
color:green;
font-weight:heavy;
letter-spacing:1px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar-nav navbar-expand-sm navbar-fixed-top text-success">
<a class="navbar-brand titleText">Copyright © </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapseNavBar">
<span class="navbar-toggler-icon"></span>
</button>
<div="collapse navbar-collapse" id="collapseNavBar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="link-nav" href="#">Map</a>
</li>
<li class="nav-item">
<a class="link-nav" href="#">Cart</a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
The button isn't showing up, just the map & cart text. If you have a workaround I would appreciate a vanilla JS solution apposed to JQuery, since I'm not that experienced with JQuery and would rather use Javascript. Button
Fixed the typo and updated HTML to show collapsible navBar
.titleText{
font-size:230%;
color:green;
font-weight:heavy;
letter-spacing:1px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-fixed-top text-success">
<a class="navbar-brand titleText">Copyright © </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapseNavBar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapseNavBar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="link-nav" href="#">Map</a>
</li>
<li class="nav-item">
<a class="link-nav" href="#">Cart</a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
if you use class text-success in your code, so you cant see navigation bar background-color and default link color so i replace text-sucesss to navbar-light bg-light.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-fixed-top navbar-light bg-light">
<a class="navbar-brand titleText">Copyright © </a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapseNavBar" >
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapseNavBar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Cart</a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
I have made some typo corrections, the toggle functionality now works with this code. But additional modifications are needed to align the elements correctly.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> .
</script>
<!-- Popper JS -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
> </script>
<!-- Latest compiled JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> .
</script>
<style>
.titleText{
font-size:230%;
color:green;
font-weight:heavy;
letter-spacing:1px;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-fixed-top text-success">
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#collapseNavBar">
<span class="navbar-toggler-icon">Menu</span>
</button>
<div class="collapse navbar-collapse" id="collapseNavBar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="link-nav" href="#">Map</a>
</li>
<li class="nav-item">
<a class="link-nav" href="#">Cart</a>
</li>
</ul>
</div>
<a class="navbar-brand titleText">Copyright © </a>
</nav>
</div>
</body>
</html>
I will construct the complete aligned html if need be. Hope this helps!
I'm learning bootstrap and have a problem.
I made a dropdown on navigation bar. However, when I clicked on it, the dropdown wasn't collapsed. The class="dropdown" doesn't change to class="dropdown open" and the directive "aria-expanded" doesn't change from "false" to "true". Only when I go to another page and then come back, the dropdown menu will work properly. I'm wondering why this is hapenning.
And I'm using two bootstrap libraries because I need boostrap 4 to use card deck container
index.html (with all updated files)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<script src="bower-angular-route/angular-route.js"></script>
<script src="https://unpkg.com/angular-ui-router#1.0.3/release/angular-ui-router.min.js"></script>
<script src="node_modules/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" />
board.html
<div ui-view>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Home</a>
</div>
<ul class="nav navbar-nav">
<li>Today</li>
<li>Tomorrow</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dates</a>
<ul class="dropdown-menu">
<li>August 1st</li>
<li>August 2nd</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<cards></cards>
</div>
Your example seems to function correctly locally for me and in the included snippet. Maybe ensure that there aren't any caching issues in your test environment.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ui-view>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Home</a>
</div>
<ul class="nav navbar-nav">
<li>Today</li>
<li>Tomorrow</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dates</a>
<ul class="dropdown-menu">
<li>August 1st</li>
<li>August 2nd</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<cards></cards>
</div>