I'm currently working on an one-pager with a nav by bootstrap. Since I don't know a way to scroll to certain div's ids with routerLink, I'm using href=#id, which works fine so far. I'm currently trying that onWindowScroll the class active shall swap it owner according to the current div which is displayed.
So when the user for instance scrolls to about, the active class shall be assigned to the associated nav-link, which in this case obviously is about us.
#HostListener('document:scroll', [])
onWindowScroll() {
}
<div class="container-fluid">
<a class="nav-link logo float-left" href="#">peak design</a>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a>
</li>
</ul>
</div>
Related
I have a typical bootstrap navbar that collapses to a dropdown menu on smaller devices. As default menus do, it shows a vertical list of items, which takes up too much space, so I would like to group items in two columns. Here's a drawing of what I mean:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</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">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 6</a>
</li>
</ul>
</div>
</div>
</nav>
CodeSandbox code here
I tried grouping it using <div class="col-sm-4"> [three items] </div> but it failed, because I misunderstood how cols work. It grouped items only on the normal navbar, leaving hamburger menu untouched. Unfortunately, all solutions I could find refer to dropdown menus, but it doesn't translate to hamburgers, or at least I can't make it work.
I have no problems using JS if it isn't possible using pure B5/HTML/CSS. Also, I'd like not to change anything in how the standard navbar works on bigger devices, it shouldn't be grouped in any way - I want those columns to be present only on a hamburger menu.
The content of the navbar can be dynamic and there's a lot of ways to show two columns inside the navbar menu.
As a simple solution I used the a row container and columns just to illustrate the possibilities. You can add a divider that shows in mobile which is what is drawn.
Hope this helps and answers your question.
This is just one way to do this (codepen):
<div class="collapse navbar-collapse" id="navbarNav">
<div class="row">
<div class="col">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 6</a>
</li>
</ul>
</div>
<div class="col">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 6</a>
</li>
</ul>
</div>
</div>
</div>
Another possibility is just wrap the <ul> lists with a flex div which will also show the menu as two columns (codepen). I think this is a better solution I just wanted you to have more than one possibility.
Use the grid (row/cols) in the navbar-nav. Use the row-cols-* classes to set the number of columns. This way you won't have to split the columns in your markup.
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav flex-row row g-0 row-cols-2 row-cols-lg-6">
<li class="nav-item col">
<a class="nav-link active" aria-current="page" href="#">Item 1</a>
</li>
<li class="nav-item col">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item col">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item col">
<a class="nav-link" href="#">Item 4</a>
</li>
<li class="nav-item col">
<a class="nav-link" href="#">Item 5</a>
</li>
<li class="nav-item col">
<a class="nav-link" href="#">Item 6</a>
</li>
</ul>
</div>
Responsive demo
I'm trying to make my navbar links use the active class, so i can switch styles on click.
But when i put preventDefault() in my onclick event to stop the event to refresh the page, it stops working completely, the links won't work at all
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav navbar-style ml-auto">
<li class="nav-item">
<a class="nav-link" href="/">Acasa</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about us">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/apartments">Apartments</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/houses">Houses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/location">Location</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
</ul>
</div>
and the jquery that i use:
$(".navbar-nav .nav-link").on("click", function (e) {
e.preventDefault();
$(".navbar-nav").find(".active").removeClass("active");
$(this).addClass("active");
});
I've been trying to figure this out for a while now. I'm a bit of a noob when it comes to Bootstrap, so please allow me the probably simple question.
I'm trying to create a navbar with bootstrap 4, with the majority of menu items on the left, but with the login button on the right. I've figured some roundabout way of doing it (which could be wrong) but whenever I view the page in phone or tablet view, the 'login' item of the menu doesn't appear when one clicks the burger menu icon.
It appears up to a point (think it's about 760px) and then just disappears from view.
Here's the markup to this point, any help at all would be appreciated.
<a class="navbar-brand" href="#"><img src="imgs/branding/nerve logo_small.png" width="50" height="50" alt=""></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">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Placeholder 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Placeholder 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Placeholder 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Placeholder 4</a>
</li>
</ul>
</div>
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
<li class="nav-item text-right">
<a class="nav-link " href="#">Login</a>
</li>
</ul>
</nav>
I think, the problem is here
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
<li class="nav-item text-right">
<a class="nav-link " href="#">Login</a>
</li>
</ul>
d-none d-md-flex - this part means, that this element will be hidden (d-none) until 768px (d-md-flex), and then will be displayed as flex. Try to remove d-none
UPDATED
The best way is to remove a standalone login ul and add Login as a part of a global ul list.
<ul class="navbar-nav w-100">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Placeholder 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Placeholder 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Placeholder 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Placeholder 4</a>
</li>
<li class="nav-item flex-sm-grow-1 text-sm-right">
<a class="nav-link " href="#">Login</a>
</li>
</ul>
Look closer to flex-sm-grow-1 text-sm-right in Login li. And don't forget to add w-100 to ul.
My element has to be clicked on for CSS to work.
I tried using bootstrap for a nav bar. With 1 logout link on the top right.
I used navbar-nav ml-auto for it.
After that, I tried to override spacing of bootstrap by adding margin-right: 50% !important;
When I refresh the page, it is not applied immediately. If I clicked on the link, it will "jump" to the left as I expected.
Here is what I've tried:
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Category</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Role Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">User Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">File and Folder Management</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li>
<a class="nav-item" id="logout-btn" href="#"> Logout </a>
</li>
</ul>
</nav>
CSS:
* {
/*display: none;*/
box-sizing: border-box;
}
#logout-btn.nav-item {
margin-right: 50% !important;
}
Can you help me explain why, or is it my browser's fault?
I find it quite weird, already cleared cached.
Remove css style for logout-btn.nav-item which you override. this get applied to the anchor tag. we need to add margin to the ul tag not to a tag. so we have bootstrap 4 in-built margin classes, so we can make use of it. so remove overrided styles and add mr-4 class to the second ul which contains the logout link.The modified code is given below.
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Category</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Role Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">User Management</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">File and Folder Management</a>
</li>
</ul>
<ul class="navbar-nav ml-auto mr-4">
<li>
<a class="nav-item" id="logout-btn" href="#"> Logout </a>
</li>
</ul>
</nav>
On the official page of agular for the nav tabs we have no bottom border for the selected tab
official page
But when I am using the same code , I get a border even on the selected nav-item
myTab example
Here is my HTML Code
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">tab 3</a>
</li>
</ul>`
And My CSS :
.nav-item .active
{
background-color: rgb(119, 218, 218) !important;
border-bottom: 0px;
color:rgb(168, 19, 168);
}
Could someone tell me to remove the border bottom from active nav-item ???
Edit: I previously made a mistake. Here's the correct code (notice the corresponding css file):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
So, it's important that you link the correct css file in your header. Once you do that, no additional custom css is required to make it work. Also, make sure that none of the other custom css you potentially have interferes with this code.
Remove the nav-tabs class and will work