guys I am making a navbar using bootstrap-5 and I want to adjust colors for some items like navbar and, tags, navbar background, and burger menu colors I tried first with tags but it is not working I will show you the code for both HTML and CSS.
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;500;700;900&display=swap');
html {
font-size: 90%;
overflow-x: hidden;
scroll-padding: 9rem;
scroll-behavior: smooth;
max-width: 1650px;
margin: 0 auto;
}
html body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
text-transform: capitalize;
transition: 0.2s linear;
}
a {
text-decoration: none;
color: rgba(24, 129, 210, 0.7);
font-weight: 500;
}
<!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" />
<link rel="stylesheet" href="/style1.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="shortcut icon" href="./images/titleiconw.png" sizes="32*32" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<title>Corporate Solutions</title>
</head>
<body>
<header class="header">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"><span>C</span> Solutions</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbarNav">
<ul class="navbar-nav m-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="#">about us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">why choose us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">careers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">our clients</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact us</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<button class="btn">request a quote</button>
</ul>
</div>
</div>
</nav>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
i want to change a tags color,navbar background color,burger menu color and navbrand color can anyone help me, please.
thank you so much
Added Font awesome because easy to change hamburger icon color:
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
Added new class to nav and remove the old ones:
<nav class="navbar navbar-expand-lg custom-nav">
Add new hamburger icon instead of navbar-toggler-icon
<span>
<i class="fas fa-bars"></i>
</span>
Add new css:
.custom-nav {
background-color: aqua;
}
.custom-nav ul a {
color: rgb(19, 106, 213);
}
.hamburger {
font-size: 28px;
color: rgb(19, 106, 213);
}
You can try with "!important"
a {
text-decoration: none !important;
color: rgba(24, 129, 210, 0.7) !important;
font-weight: 500 !important;
}
or you can try placing your css under the bootstrap
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<link rel="stylesheet" href="/style1.css" />
Related
#import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght#400;500;600;700&display=swap');
:root {
--color-body: #b6cbce;
--color-heading: #eef3db;
--color-base: #033f47;
--color-base2: #022a30;
--color-brand: #e0f780;
--color-brand2: #deff58;
--sidbar-width: 240px;
--font-base: "Bai Jamjuree";
}
*{
background-color: var(--color-base2);
color: var(--color-base);
font-family: var(--font-base);
}
.navbar .nav-link {
font-weight: 700;
text-transform: uppercase;
color: white;
transition:all 0.5s ease-in;
}
.navbar .nav-link:hover{
color: var(--color-brand);
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--color-heading);
color: aliceblue;
font-weight: 700;
}
a {
text-decoration: none;
color: var(--color-body);
transition: all 0.5s ease;
}
a:hover {
color: var(--color-brand);
}
img {
width: 100%;
}
h3 {
color: white;
}
#media (min-width:992px) {
.navbar {
min-height: 100vh;
width: 240px;
background: linear-gradient(rgba(3, 63, 71, 0.623), rgba(3, 63, 71, 0.853)), url(./sidebar-img.jpg);
background-size: cover;
background-position: center;
}
.navbar img{
border: 8px solid var(--color-brand);
}
}
<!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>Portfolio</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css">
</head>
<body>
<!-- Navigation bar start -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<div class="container flex-lg-column">
<a class="navbar-brand mx-lg-auto mb-lg-4" href="#"><span class="h3 text-white fw-bold d-block d-none">Shuvo Raj</span>
<img src="./person.jpg" class="d-none d-lg-block rounded-circle" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto flex-lg-column text-lg-center">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- navigation bar close -->
<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.2.3/dist/js/bootstrap.min.js"
integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
crossorigin="anonymous"></script>
</body>
</html>
navbar color can't vanish or be transparent because it is linked to body color, how to solve it? I'm practicing some projects with some youtube tutorials. and I got an error or I can't do like same as a developer?
I'm doing this project with html/css/bootstap5
This is a Problem!!`
i Want to do as like it
Html Code
``
There is multiple approaches to this, on the css for *{…} you can use *:not(.navbar){…
Or you can use !important at the end of background such as:
background-color:#33b5e5 !important;
As you can see dark red border around toggle button
I use
.navbar-toggle
{
border : none;
outline : none;
}
to remove it but nothing works.
Below given my html code
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<!-- <link rel="stylesheet" -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"> -->
<title> Agency website </title>
</head>
<body>
<section id="navbar">
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="/logo.png" alt="website"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<!-- <span class="navbar-toggler-icon"></span> -->
<i class="fas fa-bars"></i>
<!-- <i class="fas fa-tree"></i> -->
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active ">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Testinmial</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
</section>
<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>
<script src="https://kit.fontawesome.com/355cdf5292.js" crossorigin="anonymous"></script>
</body>
</html>
Below css code
margin:0;
padding:0;
}
/* navigation bar section */
#navbar
{
position:sticky;
z-index:10;
background-image: linear-gradient(to right ,#9517ba ,#5f1782); /* yaha ni chali yeh line ( doubt ) */
}
.navbar
{
background-image: linear-gradient(to right ,#9517ba ,red);
padding: 0px;
}
.navbar-brand img{
height:50px;
width:100px;
/* color:blue; */
}
.navbar-nav li
{
padding: 0 10px;
}
.navbar-nav li a
{
color:white ! important;
/* float: right; */
text-align: right;
}
.fa-bars
{
color: #fff;
font-size: 20px !important;
}
.navbar-toggler
{
outline:transparent;
border-color:transparent;
padding:0;
background: none;
}
You should set outline: none for focus state also:
.navbar-toggle:focus {
outline: none;
}
.navbar-toggle::-moz-focus-inner {
outline: none;
}
I was designing a bootstrap navbar with a YouTube logo. Instead of aligning to right it is awkwardly placed in center. It seems the width of anchor is more than the size of image as result the image is pushed to right. How can I move it to right.
.navbar-brand{
font-family: Lilita One;
}
.navbar-top{
padding: 0 0;
}
.navbar{
padding: 0 5% 0 2%;
}
.yt-img{
width: 6%;
position: relative;
}
.yt-img-a{
width: 100%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Education Side</title>
<!-- Tab Icon -->
<link rel="icon" href="images\Icon.ico">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lilita+One&family=Montserrat:wght#500&display=swap" rel="stylesheet">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- CSS -->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section id="title">
<div class="container-fluid navbar-top">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Education<br>Side</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link yt-img-a" href="https://www.youtube.com/"><img class="yt-img" src="images\youtube.png" alt=""></a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Counselling</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Recruitment</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
enter image description here
Instead of setting the image width to 6%, use a px value such as 30px.
.yt-img{
width: 30px;
position: relative;
}
Demo
The ms-auto class makes your ul to be placed on the right side.
<ul class="navbar-nav ms-auto"> // ms-auto removed
Codepen Link: https://codepen.io/emmeiWhite/pen/JjRMxQw
Have fixed that and also added flex-grow:1 where ever needed :)
Full Code:
.navbar-brand{
font-family: Lilita One;
}
.navbar-top{
padding: 0 0;
}
.navbar{
padding: 0 5% 0 2%;
}
.yt-img{
width: 6%;
position: relative;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Education Side</title>
<!-- Tab Icon -->
<link rel="icon" href="images\Icon.ico">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lilita+One&family=Montserrat:wght#500&display=swap" rel="stylesheet">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- CSS -->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section id="title">
<div class="container-fluid navbar-top">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Education<br>Side</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item flex-grow-1">
<a class="nav-link yt-img-a" href="https://www.youtube.com/"><img class="yt-img" src="images\youtube.png" alt="Image Here"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Counselling</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Recruitment</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
Please help ,i am new at this and this is confuses me. When i remove this line the color is back but when i use it it just dissapear. I am trying to follow some tutorial on how to make a website from youtube but this line just doesnt work with me!
Why there is no color appeared on my nav bar when using
padding: 10px ; !important;
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
}
#nav-bar {
position: sticky;
top 0;
z-index: 10;
}
.navbar {
background-image: linear-gradient(to right, #800000, #B22222)
padding: 10px ; !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scarlet Botique</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#"><img src="images/icon.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-togger-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Location</a>
</li>
</ul>
</div>
</nav>
</section>
</body>
</html>
<!-- 7:34 min https://www.youtube.com/watch?v=v0IgI8vYD_o&list=PLjwm_8O3suyMKWZwlgptQtfCShqZ2syV5 -->
Thankyou in advance !
You have some mistakes try to fix it:
#nav-bar {
position: sticky;
top: 0; // Add : here.
z-index: 10;
}
.navbar {
background-image: linear-gradient(to right, #800000, #B22222);// Add ; here.
padding: 10px ;
}
It is because you are missing a semicolon after your background.
background-image: linear-gradient(to right, #800000, #B22222);
is what is should be.
In your next line, you have one semicolon too much and you misspelled important... BTW, you should generally try to avoid using !important. You don't seem to need it anyway in your case :).
I used this particle js but after then i am making one resposive nav bar but its showing up . But when i am trying to display only the navbar then it is working . I am basically trying to have a fully responsive sticky top navigation bar with this particle js as background and then with those buttons in navbar it will link to other pages.
KIndly help me in this error:
My HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Particles Webpage</title>
<link rel="stylesheet" href="style.css">
<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></script>
<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-expand-md navbar-light sticky-top" style="background-color: #e3f2fd;" >
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="img/logo.png"></a>
<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 ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Instructors</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Founders</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
<li class="nav-item">
<form class="newsletter">
<input type="email" name="newslettertext" placeholder="Enter Your Email Id">
<input type="submit" name="submit" value="Subscribe">
</form>
</li>
</ul>
</div>
</div>
</nav>
<div id="particles-js">
<div class="btext">
<h1>Code Yard</h1>
<p>Live to Code Another Day</p>
Get Started
</div>
</div>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
particlesJS.load('particles-js', 'particles.json',
function(){
console.log('particles.json loaded...')
})
</script>
</body>
</html>
MY CSS file is:
body{
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 16px;
}
.btext{
color: #f9f3f4;
position: absolute;
text-align: center;
top: 40%;
width: 100%;
line-height: 0.4em;
}
h1{
font-size: 50px;
}
.btn{
color: #fff;
text-decoration: none;
border: #ccc 1px solid;
padding: 10px 15px;
border-radius: 8px;
line-height: 4em;
}
.btn:hover{
color: #b19295;
border: #fff 1px solid;
}
#particles-js{
background-image: url('image1.jpg');
height: 100vh;
}
My JSON file for particles:
"particles":{
"number":{
"value":80
},
"color":{
"value":"#f9f3f4"
},
"shape":{
"type":"circle",
"stroke":{
"width":1,
"color":"#ccc"
}
},
"opacity":{
"value":0.5,
"random":true
},
"size":{
"value":2
},
"line_linked":{
"enable":true,
"distance":110
},
"move":{
"enable":true,
"speed": 1
}
}
}
Your Code
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
Change it to
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbarResponsive">
It will work
You need to change class="navbar-toggler" to class="navbar-toggle"
you have used class="navbar-toggler" which should be class="navbar-toggle" on the button element