I have a question regarding navbars. I want to highlight a navbar item when I clicked an item but I don't know if I need to use angular or css for that. Can you guide me a little bit, please?
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a routerLink="/tasks" class="nav-link" href="#">Tasks</a>
</li>
<li class="nav-item">
<a routerLink="/newTask" class="nav-link" href="#">New task</a>
</li>
<li class="nav-item">
<a routerLink="/users" class="nav-link" href="#">Users</a>
</li>
<li class="nav-item">
<a routerLink="/newProject" class="nav-link" href="#">New Project</a>
</li>
</ul>
</div>
You can use routerLinkActive which will add a css class that you can use for styling. So in the following code if the current route is /newProject the list item will be styled according to your active css class:
<li routerLinkActive="active">
<a routerLink="/newProject" class="nav-link" href="#">New Project</a>
</li>
More information on routerLinkActive here.
Related
I am using Boostrap 4. I have a simple 4 tab horizontal navigation. On big screens, it should display like this: "Some text [font-awesome-icon]" x 4 tabs. On small screens, it should display like this: "[font-awesome-icon]". The display part works, however, on large screen the font-awesome-icon always shows on the second line. Here is what I see;
This is my html;
<!-- Nav tabs -->
<ul class="nav nav-tabs ">
<!-- profile -->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" nowr>
<span class="d-none d-md-block">Some text
</span>
<i class="fas fa-id-card">
</i>
</a>
</li>
<!-- profile image -->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile-image"><i class="fas fa-images"></i></a>
</li>
<!-- password -->
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#password"><i class="fas fa-unlock-alt"></i></a>
</li>
<!-- timezone -->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#timezone"><i class="fas fa-clock"></i></a>
</li>
</ul>
I have tried nowrap in all locations like UL, LI, A, SPAN but no luck. I have also moved the fa-clock part to inside the span, however, then the entire text and tab disappear on small screens.
Any help appreciated.
To stop making your id card from moving to next line, float your "Some text" to left.
<li class="nav-item" >
<a class="nav-link" data-toggle="tab" href="#profile" nowr>
<span style="float:left;" class="d-none d-md-block">Some text
</span>
<i class="fas fa-id-card">
</i>
</a>
</li>
Here is the html structure:
<div class="collapse navbar-collapse main-menu-item justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav align-items-center">
<li class="nav-item"><a class="nav-link" href="/index.php"><i class="ti-home"></i></a></li>
<li class="nav-item"><a class="nav-link" href="/page2.php">Page 2</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">News</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/news/blog.php">Blog</a>
<a class="dropdown-item" href="/news/press.php">Press</a>
</div>
</li>
</ul>
</div>
I was able to display the menu through wp. But one point still needs to be fixed: the dropdown. Any idea about what I should do?
How to display the li, div and a dropdown classes through the menu?
The dropdown menu appears on the page but should be hidden until I make hover on it, doesn't it?
Should I use Jquery to do this or is it through a wp function? I am a bit lost.
Thanks for your help.
here is code what I want to achieve by WordPress custom dropdown but I can't, can anyone tell me how can I do that, and other menu items should be normal and simple
[![<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="products.html">Products <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="nav-item">
<a class="dropdown-item" href="#">
<div class="img">
<img src="images/dropdown-img.jpg" alt="">
</div>
<span class="title">Cable &<br> Cable Accessories</span>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link dropdown" href="service.html">Service</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li class="nav-item">
<a class="dropdown-item" href="#">
DEMO
</a>
</li>
<li class="nav-item">
<a class="dropdown-item" href="#">
DEMO
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="brands.html">Contact</a>
</li>
</ul>][1]][1]
I am using the latest bootstrap version in angular. The class "nav nav-pills nav-justified" not stacking the tabs when the screen size is reduced below 768px.
I referred to the site http://jsfiddle.net/koala_dev/73rNv/. which is in the post. In stack overflow I followed Justify Nav-pills with Bootstrap v4 but it does work too
This is my HTML code
<div class="container">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" routerLink="/">Feeds</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/status-update']">Status Update</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/goal-setting']">Goal Setting</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/meet-up']">Meet up</a>
</li>
</ul>
</div>
I can't understand why it works in http://jsfiddle.net/koala_dev/73rNv/ here and the same code fails in my case. Please advice.
On analysis we find that:
The Bootstrap version in http://jsfiddle.net/koala_dev/73rNv/ is 3.1.1
The Bootstrap version from the stackoverflow example was unknown (post was dated 2015), but there was an update which referred to this page
we see that classes nav-pills nav-fill are available in BS4... to get the pills from the navigation on their each separate line, we can write some CSS ourselves
working snippet on Bootstrap 4.3.1 below:
#media screen and (max-width: 768px) {
.nav-fill .nav-item {
width: 100% !important;
flex-basis: unset !important;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid">
<ul class="nav nav-pills nav-fill">
<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>
</div>
For example I have a navbar with the following links :
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Register <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Business Owner's Learn More</a>
</li>
<li id="login" class="nav-item ">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
All of these currently align to the left, but I would like to place the #login link to the right, is this possible with bootstrap? Should I be using something else such as flex box, grid, etc... ?
As with most things in CSS, there are dozens of way to do this. For starters, you can give #login a css property of float: right;. More on float here.
Another newer way would be to use flexbox. In this case, it would look something like adding display: flex; on the parent, followed by justify-content: space-between;. Here's a great guide to flexbox.
Here's a stack overflow question on aligning text the Bootstrap way.
Add d-flex class on ul and align-self-end on the li that you want to align to the right.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<ul class="navbar-nav mr-auto d-flex">
<li class="nav-item active">
<a class="nav-link" href="#">Register <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Business Owner's Learn More</a>
</li>
<li id="login" class="nav-item align-self-end">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
OR
Add text-right class to the required li
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Register <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Business Owner's Learn More</a>
</li>
<li id="login" class="nav-item text-right">
<a class="nav-link" href="#">Login</a>
</li>
</ul>