I'm having a slight problem with the navbar-expand-md. From 768px to 992px the navbar height increases and the navbar-brand gets pushed a little down. It's a minor issue, but it's really bugging me and I can't seem to solve this problem. My skills are not to proficient so I'm at the end of my wit and would appreciate any help. Thanks in advance - happy holidays, stay healthy.
The issue described above can be seen here:
https://jsfiddle.net/w3do6z74/
Navbar-code:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">brandname</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#"><img src="imgs/category_bar_history.png" class="category-bar">History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><img src="imgs/category_bar_nature.png" class="category-bar">Nature</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><img src="imgs/category_bar_travel.png" class="category-bar">Travel & Food</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><img src="imgs/category_bar_arts.png" class="category-bar">Arts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><img src="imgs/category_bar_science.png" class="category-bar">Science</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><img src="imgs/category_bar_crime.png" class="category-bar">Crime</a>
</li>
<li class="nav-item">
<a class="nav-link nav-custom-link" href="#">HYPE</a>
</li>
</ul>
</div>
</div>
</nav>
Custom-Css:
.nav-custom-link {
font-weight: bold;
font-style: italic;
}
.navbar {
border-bottom: 1px solid black;
margin-bottom: 12px;
padding-top: 5px;
padding-bottom: 5px;
}
.navbar-brand {
font-family: 'Audiowide', cursive;
}
.category-bar {
padding-right: 4px;
}
.navbar-toggler {
padding: 0.2rem 0.55rem;
font-size: 1.1rem;
}
.navbar-toggler:focus {
box-shadow: 0 0 0 0;
}
If you check the CSS in dev tools, you can see that one of the things changing on the ul element is the bottom margin. It's 0.5rem by default and 0 if the minimum width is larger than 992px:
#media (min-width: 768px)
.navbar-expand-md .navbar-nav {
flex-direction: row;
}
.mb-2 {
margin-bottom: .5rem!important;
}
#media (min-width: 992px)
.mb-lg-0 {
margin-bottom: 0!important;
}
It's because you added mb-2 and mb-lg-0 classes to your ul element:
<ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
To fix this, you can add mb-0 and remove mb-lg-0:
<ul class="navbar-nav me-auto mb-0"></ul>
Related
I can't add logo to the navbar on my angular website.
HTML:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" routerLink=""><img src="/src/assets/images/Nikiikejks.png" 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">
<li class="nav-item">
<a class="nav-link active" routerLink="" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">Domov</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="menu" routerLinkActive="active-link">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="about" routerLinkActive="active-link">O nás</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="contact" routerLinkActive="active-link">Kontakt</a>
</li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar-light .navbar-nav .nav-link
{
color: var(--secondary-color);
}
.navbar-light .navbar-nav .nav-link.active-link
{
color: #64cff7;
}
.navbar
{
background-color: #f7dfde;
box-shadow: 0px 2px 5px #777 ;
}
.navbar-brand {
width:150px;
font-size: 24px;
}
.navbar-brand img {
height: 30px;
/* put value of image height as your need */
float: left;
margin-right: 7px;
}
I tried add path image and in css add some parameters, but it doesn't works.
I don't know, if I have bad size of picture or what?
Thank you.
It is not the image quality. It has nothing to do with making it functional or not. When img is not shown you either have a wrong path (instead of /src/assets you need assets/etc) or wrong extension (your image is .png and not .jpg or the other way around)
I believe you need to leave the folder app first, and after that, go to the assets.
I don't know your folder structure, but if you currently are on app.component or in the folder app, your path should be: ../assets/images/Nikiikejks.png.
I'm trying to create a quite complex navbar using bootstrap. I wonder wether it is possible to make the dropdown menu floating, so it does not make the navbar big and ugly. The picture is quite self-explanatory:
Code:
.menu-item-seleccionado {
color: white !important;
background-color: grey;
padding: 10px !important;
}
.menu-item-sin-seleccionar {
color: white !important;
padding: 10px !important;
}
.titulo-menu {
margin-left: 1%;
color: white !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg sticky-top navbar-light bg-dark">
<div class="container-fluid" style="margin: 0; width: 100%;">
<div class="flex-izquierda">
<a class="navbar-brand titulo-menu" href="inicio.html">Resano Innovación</a>
</div>
<button class="navbar-toggler bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#bar"
aria-controls="bar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="flex-derecha collapse navbar-collapse" id="bar">
<ul class="navbar-nav me-auto mb-2 mb-lg-0" style="margin: 0 !important; ">
<li class="nav-item"><a class="nav-link active rounded menu-item-seleccionado" aria-current="page" href="inicio.html">Inicio</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="ubicacion.html">Ubicación</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="contacto.html">Contacto</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="certificado.html">Certificado de calidad</a></li>
<!-- Imagen para cambiar el idioma -->
<li class="nav-item"><a class="navbar-brand" href="../en/inicio.html">
<img src="../img/eng.png" style="max-width: 100%; max-height: 40px; padding-left: 10px;" alt="">
</a>
</li>
</ul>
</div>
</div>
</nav>
.menu-item-seleccionado {
color: white !important;
background-color: grey;
padding: 10px !important;
}
.menu-item-sin-seleccionar {
color: white !important;
padding: 10px !important;
}
.titulo-menu {
margin-left: 1%;
color: white !important;
}
#media screen and (max-width: 736px) {
.navbar-expand-lg .navbar-collapse {
flex-basis: auto;
}
.flex-derecha {
width: 250px;
position: absolute;
height: auto;
background: black;
top: 50px;
right: 0;
}
.collapse:not(.show) {
display: none !important;
}
.nav-item
{
width:250px;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg sticky-top navbar-light bg-dark">
<div class="container-fluid" style="margin: 0; width: 100%;">
<div class="flex-izquierda">
<a class="navbar-brand titulo-menu" href="inicio.html">Resano Innovación</a>
</div>
<button class="navbar-toggler bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#bar"
aria-controls="bar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="flex-derecha collapse navbar-collapse" id="bar">
<ul class="navbar-nav me-auto mb-2 mb-lg-0" style="margin: 0 !important; ">
<li class="nav-item"><a class="nav-link active rounded menu-item-seleccionado" aria-current="page" href="inicio.html">Inicio</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="ubicacion.html">Ubicación</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="contacto.html">Contacto</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="certificado.html">Certificado de calidad</a></li>
<!-- Imagen para cambiar el idioma -->
<li class="nav-item"><a class="navbar-brand" href="../en/inicio.html">
<img src="../img/eng.png" style="max-width: 100%; max-height: 40px; padding-left: 10px;" alt="">
</a>
</li>
</ul>
</div>
</div>
</nav>
I have this navbar from bootstrap which is supposed to add active class on nav-item or on anchor element on click, but while inspecting it in browser its not changing states, I don't understand why.
.nav-link {
color: #FFF;
width: 100%;
height: 100%;
text-transform: uppercase;
}
.nav-link::after {
content: '';
display: block;
width: 0;
height: 2px;
background: green;
transition: width .3s;
}
.nav-link:hover::after {
width: 100%;
}
.navbar-nav>.active>a {
color: #00cc00;
}
<nav class="navbar navbar-expand-lg navbar-dark " style="background-color: black;">
<div class="container-fluid">
<a class="navbar-brand d-lg-none" href="#"><img src="../assets/images/howdy-white.png" style="width:45px; height:45px;" /></a>
<button class="navbar-toggler shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand d-none d-lg-block" href="#"><img src="../assets/images/howdy-white.png" style="width:45px; height:45px;" /></a>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<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="#">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contacts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">services</a>
</li>
</ul>
</div>
</div>
</nav>
You need add some javascript event handler while you click that link will do some action.
example if you using jQuery with that navbar structure like you shown
$("ul.navbar-nav li").on("click", function() {
$("ul.navbar-nav li").removeClass("active");
$(this).addClass("active")
})
or if you like using vanilla javascript with DOM query SelectorAll
let navbarLink = document.querySelectorAll(".navbar-nav li")
document.addEventListener("click", function(e) {
for (let x = 0;x < navbarLink.length;x++) {
navbarLink[x].classList.remove("active")
}
e.target.closest("li").classList.add("active")
})
hope this work on your case.
You suppose to add active class on anchor tag
When my navbar collapses the burger menu shows up. Whenever I click on it all the content below gets pushed down and leaves me with a messed up homepage.
My Navbar:
<section class="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="WildfireGraphic1.png" class="rounded float-left" alt="icon1"></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>
</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 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Film</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Info</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Über uns</a>
</li>
</ul>
</div>
</nav>
</section>
My CSS:
body{
text-align: justify !important;
}
#nav-bar{
position: fixed;
left: 0px;
top: 0px;
width: 100px;
}
.navbar-brand img{
height: 40px;
padding-left: 30;
}
.navbar-nav li{
padding: 0 10px;
}
.navbar-nav li a{
float: right;
text-align: left;
}
.nav-bar ul li a:hover{
color: #000000!important;
}
.navbar{
background: #fff;
}
.navbar-toggler{
border: none!important;
}
.nav-link{
color: #555!important;
font-weight: 600;
font-size: 16px;
}
I have tried using the Z-Index method but no luck so far. Maybe I did something wrong?
https://jsfiddle.net/Lqzs1jdw/8/
Thanks in advance.
You have just make a typo, change the # to . will fix the issue
Example:
.nav-bar{
position: fixed;
width: 100%;
}
https://jsfiddle.net/aslamb/sfoavupd/2/
I'm playing around with bootstrap and I have some problem. I created a navigation with few links and I want bottom border to appear when I hover the link. I made it and now, when I hover, links are "moving" to the top, even though I didn't give them any margin or padding...
Here is JSFiddle with the example, you need to resize the window of outcome to be able to see entire menu.
https://jsfiddle.net/zhzmz6fa/
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<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="#">O nas</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Opis</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Archiwum</a>
</li>
</ul>
</div>
.navbar {
font-family: sans-serif;
background-color: orangered;
}
.navbar-toggler {
border: none;
}
.nav-item {
padding-left: 1.5rem;
}
.nav-link:hover,
.nav-link:active {
border-bottom: 2px solid black;
transition: border-bottom .5s;
}
Borders count extra in the calculation of width. So if you have
width: 50px;
border-right: 1px solid black;
The element will be 51px wide.
This is also what happens with your code. The solution would be to always give it a border, but have it transparent.
.nav-link {
border-bottom: 2px solid transparent;
}
An alternative to border is a pseudoelement.
Style it as you need, set it's opacity to 0. On :hover, or :active change the opacity to 1.
.navbar {
font-family: sans-serif;
background-color: orangered;
}
.navbar-toggler {
border: none;
}
.nav-item {
padding-left: 1.5rem;
}
.nav-link {
position: relative;
}
.nav-link:after {
content: '';
position: absolute;
left: 0;
right: 0;
display: block;
height: 2px;
opacity: 0;
background: black;
}
.nav-link:hover:after,
.nav-link:active:after {
opacity: 1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<img src="http://via.placeholder.com/250x100" class="navbar-brand">
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<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="#">O nas</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Opis</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Archiwum</a>
</li>
</ul>
</div>
</nav>