Issue
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
Solution
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);
}
Answered By - Abhishek
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.