Hi everyone, I hope you're doing well. Currently, I'm working on aligning a small icon with some text. I've tried using the d-inline class inside the a tag, but it doesn't seem to be working.
Another issue I'm facing is related to the background color. The background color seems to be appearing just behind the ul tag for some reason. I added a class called navbar-custom to the nav tag, but it's not having the desired effect.
Here is the code snippet:
.navbar-custom {
background-color: #fafafc;
}
/* Changing brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: #369d4a !important;
}
/* Changing link color */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item .nav-link {
color: #369d4a !important;
}
/* Changing 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>
(Additional HTML code removed for brevity)
</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>Best regards