I'm trying to add nav-pills to tag but it's not working, why?
I really tried everything but nothing works!
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="dashboard.php">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Add New Post</a>
</li>
</ul>
Pills require the active class.
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Add New Post</a>
</li>
</ul>
https://www.codeply.com/go/xrln5uphko
Related
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>
I need to link my another webpage to my pictures nav menu.
Ex: if I click my pictures menu , it opens google.com.
Framework: bootstrap 4
div class="row row2">
<div class="col-md-12">
<ul class="nav nav-pills justify-content-center nav-justified" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">My pictures</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">My music</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">My files</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">My videos</a>
</li>
</ul>
</div>
</div>
This will work :)
<div class="row row2">
<div class="col-md-12">
<ul class="nav nav-pills justify-content-center nav-justified" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="http://google.com">My pictures</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">My music</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">My files</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#">My videos</a>
</li>
</ul>
</div>
</div>
This is the correct code for my question. i solve this with your help. thankyou
Html
<div class="row row2">
<div class="col-md-12">
<ul class="nav nav-pills justify-content-center nav-justified" role="tablist">
<li class="nav-item">
<a class="nav-link" href="about_me.html">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="my_pictures.html">My pictures</a>
</li>
<li class="nav-item">
<a class="nav-link" href="my_music.html">My music</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="my_files.html">My files</a>
</li>
<li class="nav-item">
<a class="nav-link" href="my_videos.html">My videos</a>
</li>
</ul>
</div>
</div>
CSS
.active {
background-color: #39a0c9 !important;
color: #fff !important;
}
This is probably very simple, but the answer seems to be eluding me. I have tried several combinations using navbar-text, but most of them end up putting the text either above or below another navbar item. I would like the text to be located just to the left of the "Sign In" link.
Here is what I have now:
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<a class="navbar-brand" href="#">Sample App</a>
<ul class="nav navbar-nav">
<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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<div class="nav navbar-nav pull-md-right">
<div class="nav nav-item">
<p class="navbar-text">Signed in as User#1234</p>
</div>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Sign In</a>
</li>
</ul>
</div>
</nav>
That ends up looking like this:
Many thanks in advance.
I think it is because of the div block here:
<div class="nav nav-item">
<p class="navbar-text">Signed in as User#1234</p>
</div>
A div is always displayed as a block element and thats the reason why it will start a new line below the div block. If you put the item as a part of the list tag then it should work. For example:
<div class="nav navbar-nav pull-md-right">
<ul class="nav navbar-nav">
<li class="nav-item">
<p class="navbar-text">Signed in as User#1234</p>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign In</a>
</li>
</ul>
</div>