bootstrap4 navbar underline - html

please help... Underline in my navbar doesn't work. This is my HTML and css file: https://jsfiddle.net/57fd6yf5/1/
I wanted the cursor to active underline under menu, but not under logo. I guessing that the problem is in css file.
HTML:
<nav class="navbar navbar-expand-md navbar-light bg-dark">
<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>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">O MNIE</a>
</li>
<li class="nav-logo">
<img id="logo-navbar" src="images/logo.png" width="60px" height="60px">
</li>
<li class="nav-item">
<a class="nav-link" href="#">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">KONTAKT</a>
</li>
</ul>
</div>
</nav>
CSS:
.nav-link{
font-size: 20px;
}
.nav-item{
padding: 15px 30px;
}
.nav-logo{
padding: 10px 10px
}
.navbar-collapse {
justify-content: center;
}
.navbar-light .navbar-nav .active::after{
position: absolute;
bottom: -10px;
left: 0;
right: 0;
width: 100%
content: " ";
color: #F4C127;
border-bottom: 5px solid #F4C127;
}
.navbar-nav > li {
float: left;
position: relative;
}

For the border-bottom to be under the active link item, you would need the following css rule:
.navbar-light .navbar-nav .active>.nav-link {
border-bottom: 5px solid #F4C127;
}
However, if you want the border to be at the bottom of the entire navbar, then (as #ZimSystem pointed out) you need to add the missing ; to the width: 100% part in your css rule.

You should replace this css. Your class should be .navbar-light .navbar-nav li.active
.navbar-light .navbar-nav li.active::after{
position: absolute;
bottom: -10px;
left: 0;
right: 0;
width: 100%;
content: " ";
color: #F4C127;
border-bottom: 5px solid #F4C127;
}

Related

How to fill navbar height fully when I hover mouse pointer over a link?

Here I'm designing webpage for my personal project. I have this navbar added in my website, in which I wish to fill the links in navbar fully when I hover mouse pointer over those links. Here I have attached the screenshot of what I'm getting.
The html code for navbar
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light border-bottom box-shadow mb-3">
<div class="container" style="overflow:auto">
<a class="navbar-brand" asp-area="" asp-page="/Index">BookStore</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Books/Index">Books</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
The CSS behind navbar:
html {
position: relative;
min-height: 100%;
margin: 0;
}
body {
background-color: #cccccc;
margin: 0;
/*margin-bottom: 60px;*/
}
nav {
background-color: #8080ff;
margin: 0px;
position: absolute;
}
.navbar-nav {
height: 100%;
margin: 0;
}
Note: I'm designing the web app using ASP.NET in Visual Studio 2022.
Tried to change margin properties of nav class, body class, html class. Tried to set height property to 100%. But nothing worked!!
You should set padding to 0px for the nav element:
nav {
background-color: #8080ff;
margin: 0px;
position: absolute;
padding: 0px !important;
}
This is the answer for "what does !important mean?"
The !important rule in CSS is used to add more importance to a property/value than normal.
In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element!
example:
#id {
background-color: blue;
}
.class {
background-color: gray;
}
p {
background-color: red !important;
}
OR it will prioritize the CSS property. !important have the most priority than anything.
add padding:0px !important to nav selector in CSS
Follow below code
<style>
li.nav-item{
display: contents;
padding: 12px;
margin-right: 12px;
top: 0;
position: absolute;
}
li.nav-item a{
margin-right: 12px;
}
li.nav-item a:hover{
background-color: #cccccc;
/* display: contents; */
padding: 16px;
top: 0;
/* position: absolute; */
}
html {
position: relative;
min-height: 100%;
margin: 0;
}
body {
background-color: #cccccc;
margin: 0;
/*margin-bottom: 60px;*/
}
nav {
background-color: #8080ff;
margin: 0px;
position: absolute;
width: 100%;
}
.navbar-nav {
height: 100%;
margin: 0;
}
ul{
margin-left: 60px !important;
}
</style>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light border-bottom box-shadow mb-3">
<div class="container" style="overflow:auto">
<a class="navbar-brand" asp-area="" asp-page="/Index">BookStore</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Books/Index">Books</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>

I can't get my Bootstrap 5 Navbar to appear transparent?

My bootstrap Navbar is white and despite trying everything i can find on Stack i cant override the white to make it transparent.
I have tried setting the background to transparent
The image behind is set to VH100 so should be behind the nav
I have tried using Inspect and targeting every colour instruction i could find
I removed the bg class from the navbar thinking that would help
Here is my html
<nav class="navbar navbar-expand-sm navbar-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<img src="/assets/images/MothersSpinesLogo.png" alt="Mothers Spines MS Logo">
<ul id="nav" class="navbar-nav ms-auto">
<li class="active nav-item">
<a class="nav-link"href="index.html">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">CONTACT</a>
</li>
</ul>
</nav>
and my CSS;
/* Navigation */
.navbar-brand {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
max-height: 60px;
max-width: 60px;
margin-left: 30px;
}
.navbar {
align-items: end;
background: none;
background-color: rgba(0, 0, 0, 0.0);
--bs-navbar-nav-link-padding-x: 3.5rem;
font-family: 'Montserrat';
font-size: 120%;
list-style-type: none;
letter-spacing: 1px;
--bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.0);
}
.navbar a {
text-decoration: none;
color: #252525;
}
.nav-item {
padding-top: 25px;
}
Screenshot of Nav and Inspect open
.navbar { background-color: transparent; }
Add the following to the image: height: 100vh;, position: absolute; and top: 0;.
If you just set height: 100vh; to the image, the image will be full viewport height, but it will start AFTER the navbar. You want to place it below the navbar. You do this by setting position: absolute; and top: 0;.
In short, the problem is caused by the image.
It looks like there are issues with element placement. Code provided does work for overlaying the image.
img#bg {
position: absolute;
}
/* Navigation */
.navbar-brand {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
max-height: 60px;
max-width: 60px;
margin-left: 30px;
}
.navbar {
align-items: end;
background: none;
background-color: transparent;
--bs-navbar-nav-link-padding-x: 3.5rem;
font-family: 'Montserrat';
font-size: 120%;
list-style-type: none;
letter-spacing: 1px;
--bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.0);
}
.navbar a {
text-decoration: none;
color: #252525;
}
.nav-item {
padding-top: 25px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<img id="bg" src="https://st3.depositphotos.com/1021722/13762/i/600/depositphotos_137623752-stock-photo-art-spring-background-fresh-flower.jpg">
<nav class="navbar navbar-expand-sm navbar-light">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a href="index.html" class="navbar-brand">
<img alt="Mothers Spines MS Logo">
</a>
<ul id="nav" class="navbar-nav ms-auto">
<li class="active nav-item">
<a class="nav-link" href="index.html">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">CONTACT</a>
</li>
</ul>
</nav>

Why is the css color syntax in my li tag not working

I am struggling with changing the color of my font in my nav bar button eg. Home to white. In my style.css file I first used .navbar-nav li but then the padding did not work, when I changed it to .navbar-nav ul the padding then worked. I then had to use .navbar-nav li a for the next style syntax to work and all seem to work except for the color syntax. Please advise what I am doing wrong for the color syntax not to work.
The color syntax again does not work in my .fa-bars class conditions but the font size in that class does work.
The last problem I seem to have is that the syntax in my .promo-title class does not work. Any help would be much appreciated. Thanks.
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
}
#nav-bar {
position: sticky;
top: 0;
z-index: 10;
/* sticky on the top */
}
.navbar {
background-image: linear-gradient(to right, #a517ba, #5f1782);
padding: 0;
}
.navbar-brand img {
height: 40px;
padding-left: 20px;
}
.navbar-nav ul {
padding: 0 10px;
}
.navbar-nav li a {
color: #fff;
/*Not working letters in nav bar not white*/
font-weight: 600;
float: right;
text-align: left;
}
.fa-bars {
color: #fff;
/*Not working menu bars not white*/
font-size: 30px;
}
.navbar-toggler {
outline: none;
}
/*--------------banner section------------*/
#banner {
background-image: linear-gradient(to right, #a517ba, #5f1782);
color: #fff;
padding-top: 5%;
/*Extended purple banner down*/
}
.promo-title {
font-size: 40px;
font-weight: 600;
margin-top: 100px;
}
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.2.1/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.2.1/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.4/css/fontawesome.min.css">
</head>
<body>
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#"> <img src="https://via.placeholder.com/50"> </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="fa fa-bars" aria-hidden="true"></i> <!--adds menu bars when shrinking screen or in mobile view-->
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<!--ml-auto moves navbar to the right side-->
<li class="nav-item">
<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="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
</section>
<!--Banner section-->
<section id="banner">
<div class="container">
<div class="row">
<div class="col-md-6">
<p class="promo-title">BEST CUSTOM DATABASE COMPANY</p>
<p>Add sentence here not sure what to say just yet but has to be good</p>
</div>
</div>
</div>
</section>
</body>
Your selector specificity isn't high enough, so the Bootstrap styles take precedence. A quick look at your browser's document inspector reveals this. Use a more specific selector.
The same is true for the button (but you should remove the default Bootstrap icon).
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
}
#nav-bar {
position: sticky;
top: 0;
z-index: 10;
/* sticky on the top */
}
.navbar {
background-image: linear-gradient(to right, #a517ba, #5f1782);
padding: 0;
}
.navbar-brand img {
height: 40px;
padding-left: 20px;
}
.navbar-nav ul {
padding: 0 10px;
}
.navbar.navbar-light .navbar-nav li a {
color: #fff;
font-weight: 600;
float: right;
text-align: left;
}
body .navbar-light .navbar-toggler {
color: #fff;
border-color: #fff;
font-size: 30px;
}
.navbar-toggler {
outline: none;
}
/*--------------banner section------------*/
#banner {
background-image: linear-gradient(to right, #a517ba, #5f1782);
color: #fff;
padding-top: 5%;
/*Extended purple banner down*/
}
.promo-title {
font-size: 40px;
font-weight: 600;
margin-top: 100px;
}
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.2.1/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.2.1/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.4/css/fontawesome.min.css">
</head>
<body>
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#"> <img src="https://via.placeholder.com/50"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<!--ml-auto moves navbar to the right side-->
<li class="nav-item">
<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="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
</section>
<!--Banner section-->
<section id="banner">
<div class="container">
<div class="row">
<div class="col-md-6">
<p class="promo-title">BEST CUSTOM DATABASE COMPANY</p>
<p>Add sentence here not sure what to say just yet but has to be good</p>
</div>
</div>
</div>
</section>
</body>
You can use
a.nav-link{
color:#fff!important;
}

Central Logo navbar with links on either side [duplicate]

This question already has answers here:
Bootstrap NavBar with left, center or right aligned items
(14 answers)
Closed 1 year ago.
Im trying to get my navbar to look like this:
But it looks like this:
I am using bootstrap 5. I basically want the navbar links on either side of the logo. Can I add some custom class in the html and then just translate them i tried this but couldnt get it to work. Here is the HTML and CSS for the navbar.
<nav class="navbar navbar-expand-md navbar-dark bg-custom fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 mb-02 mb-md-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="#">GALLERY</a>
</li>
<!-- <a class="navbar-brand" href="#"><img src="/images/logos/circle-cropped.png" alt=""></a> -->
<li class="nav-item">
<a class="nav-link navbar-brand" href="#"><img src="/images/logos/circle-cropped.png" alt=""></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MENUS</a>
</li>
<li class ="nav-item nav-item-left">
<a class="nav-link" href="#">ABOUT</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
/* NAVBAR */
.navbar {
border-bottom: solid #5f4b22;
}
.bg-custom{
background-color: #141619;
}
.navbar-brand {
flex: 0 1 auto;
display: block;
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 0;
margin: 0 !important;
padding: 0 !important;
transform: translateX(-50%);
text-align: center;
}
.navbar-brand img {
max-height: 100%;
max-width: 100%;
border:3px solid #5f4b22;
border-radius: 500px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
}
Your just need to update your navbar-brand class as follows and add custom height for ul e.g ul {height:40px;}.And finally add position: inherit; for img. Your modified/updated css will be as follows;
.navbar-brand {
/* flex: 0 1 auto; */
/* display: block; */
width: 100px;
height: 100px;
/* position: absolute; */
/* left: 50%; */
top: 0;
margin: 0 !important;
padding: 0 !important;
/* transform: translateX(-50%); */
text-align: center;
}
ul {
height:40px;
}
.navbar-brand img {
max-height: 100%;
max-width: 100%;
border: 3px solid #5f4b22;
border-radius: 500px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
position: inherit;
}
Related StackOverFlow post can also be helpful for you.

How can I increase the gap between text and its underline

My bootstrap navbar looks like the following:
When I hover over to each of the menu options, it shows an animated underline looks like this:
How can I increase the gap between text and its underline?
Using border instead of underline would solve your problem. Try this code.
ul.ml-auto > li > a > span{
font: 15px Roboto,sans-serif;
font-weight: 500;
position: relative;
display: inline-block;
color: #FFFFFF80;
overflow: hidden;
padding-bottom: 5px;
}
ul.ml-auto > li > a > span::before {
position: absolute;
content: attr(data-content);
color: #00FFFF;
clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
transition: clip-path 275ms ease;
display: block;
border-bottom: 1px solid #00FFFF;
padding-bottom: 3px;
}
First you can't modify the spacing when use text-decorate: underline
And your code use <:before>
Cause span is inline style then its spacing just fix with the content inside it.
My solution is make padding for your and <:before> then use border-bottom inside :before tag
ul.ml-auto > li > a > span{
///Adding bottom-padding here
padding-bottom: 3px; // your spacing you want - 1 cause the border will take 1px of the height
}
ul.ml-auto > li > a > span::before {
border-bottom: 1px solid red;
padding-bottom:2px;
}
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Resize</title>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1" ></meta>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
.navbar-custom {
background-color: #484848;
}
ul.ml-auto > li > a > span{
font: 15px Roboto,sans-serif;
font-weight: 500;
position: relative;
display: inline-block;
color: #FFFFFF80;
overflow: hidden;
padding-bottom:2px;
}
ul.ml-auto > li > a > span::before {
position: absolute;
content: attr(data-content);
color: #00FFFF;
border-bottom: 1px solid red;
padding-bottom:2px;
clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
transition: clip-path 275ms ease;
}
ul.ml-auto > li > a > span:hover::before {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
</style>
<body>
<nav class="navbar navbar-custom navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a style="font: 20px Arial,sans-serif" class="navbar-brand js-scroll-trigger" href="#">HOME</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul style="font: 15px Roboto,sans-serif" class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about"><span data-content="LOREM">LOREM</span></a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#expertise"><span data-content="LOREM">LOREM</span></a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#portfolio"><span data-content="LOREM">LOREM</span></a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact"><span data-content="LOREM">LOREM</span></a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Here is a sample Html for padding-top and bottom of list in Menu
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="ml-auto navbar-nav">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Features</a>
</li>
</ul>
</div>
</nav>
here is the code for underline
li{
text-decoration: underline;
text-underline-position: under;
}