I have written code using bootstrap. But my issue is in the Toggle bar , like when I shrink the size to see my Web page responsive or not then the toggle bar is not open.
It shows the three button but when i click then it is not expanding.
Please give me suggestions to get rid of this issue.
Thanks.
Html code
<section>
<div id="container1">
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<div class="container-fluid">
<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">
<li class="nav-item">
<a class="scroll nav-link" href="#home" style = "color: #ffff;">HOME</a>
</li>
<li class="nav-item">
<a class="scroll nav-link" href="#about" style = "color: #ffff;">ABOUT</a>
</li>
<li class="nav-item">
<a class="scroll nav-link" href="#services"style = "color: #ffff;">SERVICES</a>
</li>
<li class="nav-item">
<a class="scroll nav-link" href="#contacts" style = "color: #ffff;">CONTACTS</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</section>
**Css code**
#container1{
margin-top:5rem ;
display: inline-block;
width: 100%;
}
#container1 ul li {
margin-left: 8rem;
margin-right: -5rem;
border-right: 0.0625rem solid grey;
}
#container1 ul li a:hover{
background-color: #5e9ee7;
}
I just get rid of my issue that I have arose a few hours ago. I finally got a fix of my problem. It only happens by removing "bs" which is present in between (data-bs-toggle="collapse") and in (data-bs-target="#navbarNav") in the html code.
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 am using sticky navbar in my page . However I see that when i try to go to that section via nav link a certain part of section gets hidden behind the navbar. I want my entire section area to be visible below navbar. I tried writing jquery code to set offset but its not helping.
here is my navbar code
<header id="navigation-items" style="width:100%; z-index: 99;">
<nav class="navbar navbar-expand-lg navbar-light " style="background-color: #7ea7ca;">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</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 active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#section4">Section 4</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
Here is the section code:
<div class="main">
<section id="section1"><div class="container">..Section 1..</div> </section>
<section id="section2"><div class="container">..Section 2..</div> </section>
<section id="section3"><div class="container">..Section 3..</div> </section>
<section id="section4"><div class="container">..Section 1..</div> </section>
<div>
Here is jquery i wrote for the offset section
$(document).ready(function(){
/* For setting the offset header */
var headerHeight = $("#navigation-items").height();
$('a[href*="id"]').bind("click", function(e) {
e.preventDefault();
var target = $(this).attr("href"); //Get the target
var scrollToPosition = $(target).offset().top - (headerHeight);
$('html').animate({
'scrollTop': scrollToPosition
}, 300, function(target) {
window.location.hash = target;
})
});
});
Here is the css for my code
.main>section{
border:1px solid red;
padding-top:80px
}
.main>section>.container{
background-color: rgba(231, 158, 158, 0.884);
}
.sticky{
position: fixed;
top: 0;
width: 100%
}
```
I am using bootstrap 5 and jquery version 3.5.1. [Link to HTML page and issue][1]
[1]: https://codepen.io/maddy-176/pen/abyWZEQ
Use scroll-margin-top on sections.
section {
scroll-margin-top: 60px;
}
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
I have a Bootstrap 4 website with a navbar. The navbar has a brand part with an image and title text, and then there's the rest of the navbar. You can see it here: https://jsfiddle.net/zmbq/aq9Laaew/218793/
Now, I want to add a subtitle, under the title "A Digital Onomasticon". The problem is - the substitle is long, and I want it to extend below the nav links.
I tried everything I could think of and couldn't figure out how to do that.
NOTE: the answer to this question is not sufficient, as it yields something like this: https://jsfiddle.net/zmbq/7et2uz0w/
Wrap the brand and links in a separate flexbox (d-flex) div...
<nav class="navbar navbar-light bg-light navbar-expand-sm flex-nowrap align-items-start">
<a class="navbar-brand" href="#">
<img src="http://onomasticon.researchsoftwarehosting.org/assets/images/seal-impression.png">
</a>
<div class="d-flex flex-column">
<div class="d-sm-flex d-block flex-nowrap">
<a class="navbar-brand" href="#">A Digital Onomasticon</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarOnavbarNavptions" 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">
<a class="nav-link" href="#">Item one</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item two</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item three</a>
</li>
</ul>
</div>
</div>
<small>A lot more text that goes under the links and should be cleverly placed, and isn't</small>
</div>
</nav>
https://www.codeply.com/go/9SK8ItOyzw
Related: Bootstrap 4 navbar with 2 rows
You can set the subtitle to position absolute to remove it from the normal content flow. It's unclear how it should look on mobile, I simply hide it in the media query. Example:
<a class="navbar-brand" href="#">
<img src="http://onomasticon.researchsoftwarehosting.org/assets/images/seal-impression.png">
A Digital Onomasticon
<small>A lot more text that goes under the links and should be cleverly placed, and isn't</small>
</a>
.navbar-brand small {
display: block;
font-size: 10px;
white-space: normal;
position: absolute;
}
#media (max-width: 575.98px) {
.navbar-brand small {
display: none;
}
}
JsFiddle
Im trying to get Navigation Link styles like this
In the mobile View active link should be like this =>
For now Using border and border color i got this =>
Respective mobile view
Any solution for get the expected results?
The current code
<nav class="navbar navbar-expand-lg navbar-light ">
<a class="navbar-brand" href="#">
LOGO
</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 justify-content-end" 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" >Services</a>
</li>
<li class="nav-item" >
<a class="nav-link" >About</a>
</li>
<li class="nav-item" >
<a class="nav-link" >Contact</a>
</li>
</ul>
</div>
</nav>
sass for active link
.navbar-nav > .active a
color: $nav-active-color !important
.navbar-nav > .active
border-top: 3px solid $nav-active-color !important
This would be a good use for the :before or :after psuedo classes, but without having any of your code to go off of I can only offer this vague suggestion.
As well, worth seeing the accepted answer here on a thread about nesting pseudo classes just in case you run into one of the outlined issues.
From there, you could add some keyframes and smooth out the transition to make a pretty seamless hover animation.
div {
width: 350px;
height: 100px;
background: lightgray;
position: relative;
margin: 20px;
}
div:before {
content: '';
width: 60px;
height: 4px;
background: gray;
position: absolute;
top: -4px;
}
<div></div>