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;
}
Related
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" />
I'm trying to put a navbar with a navbar-brand to my website. There is a problem, it looks like my picture prevent my nav-items to go on the top of the window. Here is a picture of the problem :
When I remove the navbar-brand, the items are going at the top (you can try it with my code below).
Here is my code :
.logo_1 {
width:9%;
height: auto;
}
.logo_nom {
width: 14%;
height: auto;
}
.nav {
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
.navbar-custom {
background-color: #fafafc;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: #369d4a !important;
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: #369d4a !important;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #2b5c35 !important;
}
.navbar-custom .navbar-brand {
color:#369d4a;
}
.navbar-custom .navbar-toggle {
background-color:#369d4a;
}
.navbar-custom .icon-bar {
background-color:#369d4a;
}
#media (max-width: 1250px) {
.nav-item:hover {
background-color: #5eb56f;
}
}
.dropdown-item {
color : #369d4a !important;
}
.dropdown-item:hover {
background-color: #5eb56f !important;
color: #2b5c35 !important;
}
#media all and (min-width: 992px) {
.nav .nav-item .dropdown-menu{ display: none; }
.nav .nav-item:hover .nav-link{ color: #fff; }
.nav .nav-item:hover .dropdown-menu{ display: block; }
.nav .nav-item .dropdown-menu{ margin-top:0; }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="test2.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<title>Test</title>
</head>
<body>
<!-- Début navbar -->
<nav class="nav navbar-expand-lg navbar-custom navbar-dark" aria-label="Eighth navbar example">
<div class="container">
<div class="row" style="margin: 0; padding: 0;">
<a class="navbar-brand">
<img src="logo_no_text.png" alt="Logo" class="logo_1 img-responsive">
<img src="nom_commerce.png" alt="Logo" class="logo_nom img-responsive">
<button class="navbar-toggler navbar-toggle btn_small_screen float-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto" >
<li class="nav-item">
<a class="nav-link px-3" href="">Test 1</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="">Test 2</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="">Test 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle " data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Test 4 </a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Test 4.1</a>
<a class="dropdown-item" href="#">Test 4.2</a>
<a class="dropdown-item" href="#">Test 4.3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="">Test 5</a>
</li>
</ul>
</div>
</div></div>
</nav>
<!-- Fin navbar -->
<!-- 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>
Add a col-6 div outside your logos.
<div class="col-6">
<a>
<img
src="https://www.logodesign.net/images/illustration-logo.png"
alt="Logo"
class="logo_1 img-responsive"
/>
<img
src="https://www.logodesign.net/images/illustration-logo.png"
alt="Logo"
class="logo_nom img-responsive"
/>
<button
class="navbar-toggler navbar-toggle btn_small_screen float-right"
type="button"
data-toggle="collapse"
data-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</a>
</div>
Because there is a margin in the body by default, here is how you fix it:
html, body {
margin:0;
}
Hope you are all fine. What I'm trying to do right now is to align the small icon with the text, I tried d-inline inside the a class. Still not working.
Another issue is the background color. The background color is just behind the ul tag and I don't know why. I put a navbar-custom class in the nav tag but it doesn't work.
Here is my code :
.navbar-custom {
background-color: #fafafc;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: #369d4a !important;
}
/* change the link color */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item .nav-link {
color: #369d4a !important;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #2b5c35 !important;
}
.navbar-custom .navbar-brand {
color:#369d4a;
}
.navbar-custom .navbar-toggle {
background-color:#369d4a;
}
.navbar-custom .icon-bar {
background-color:#369d4a;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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="container navbar-expand-lg fixed-top navbar-custom navbar-dark ">
<div class="container">
<a class="navbar-brand">
<button class="navbar-toggler navbar-toggle btn_small_screen float-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="nav">
<li class="nav-item mx-4">
<a class="nav-link d-inline" href="#">
<span data-feather="home"></span>
TEST1
</a>
</li>
<li class="nav-item mx-4">
<a class="nav-link d-inline" href="#">
<span data-feather="file"></span>
TEST2
</a>
</li>
<li class="nav-item mx-4">
<a class="nav-link d-inline" href="#">
<span data-feather="shopping-cart"></span>
TEST22
</a>
</li>
<li class="nav-item mx-4">
<a class="nav-link d-inline" href="#">
<span data-feather="layers"></span>
TEST3
</a>
</li>
<li class="nav-item mx-4">
<a class="nav-link d-inline" href="#">
<span data-feather="users"></span>
TEST4
</a>
</li>
<li class="nav-item mx-4">
<a class="nav-link d-inline" href="#">
<span data-feather="home"></span>
TEST5
</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
<script>
feather.replace()
</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>
Cordially
To align elements in a navbar you can use flexbox
.element-class {
display: flex;
align-items: center;
justify: space-between; /* or center anyone that fits your design*/
padding: 1rem;
}
I have a web app that I'm working with where the Nav bar's height doubles in size on a mobile view. Here's what it typically looks like:
And here's what it looks like an a mobile view:
What can I do to prevent this resizing? Is there a way to make the header and logo responsive based on screen size? Here's the code I've got:
.navbar {
background-color: #951010;
padding-top: 1em;
padding-bottom: 1em;
}
.navbar-brand {
color: #FFF;
font-size: 2em;
}
.navbar-default .navbar-nav>li>a {
color: #FFF;
}
<!DOCTYPE html>
<html>
<head>
<title>Footer Pen</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/stylesheets/main.css">
<script src="https://kit.fontawesome.com/175e0bfa97.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top shadow mb-3">
<a class="navbar-brand" href="/"><i class="fas fa-dna"></i> cyclone <strong>analytics</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<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>
<li class="nav-item">
<a class="nav-link" href="#">Players</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Seasons</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
What am I missing here?
use media queries to control the bootstrap Responsive breakpoints
.navbar {
background-color: #951010;
padding-top: 1em;
padding-bottom: 1em;
}
.navbar-brand {
color: #FFF;
font-size: 2em;
}
.navbar-default .navbar-nav>li>a {
color: #FFF;
}
#media (min-width: 100px) and (max-width: 400px) {
.navbar-brand {
font-size: 1em;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Footer Pen</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/stylesheets/main.css">
<script src="https://kit.fontawesome.com/175e0bfa97.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top shadow mb-3">
<a class="navbar-brand" href="/"><i class="fas fa-dna"></i> cyclone <strong>analytics</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<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>
<li class="nav-item">
<a class="nav-link" href="#">Players</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Seasons</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
You need to add a media query that reduces the font-size of the 'cyclone analytics' on smaller devices. The reason the nav bar is getting bigger is because the hamburger is being wrapped onto a new line.
So if you add a media query along the lines of:
#media only screen and (max width: 700px) {
.navbar-brand: font-size: 1rem;
}
It'll work because the main logo is smaller, so the hamburger isn't being wrapped. Hope that helps. :-)
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 :).