i'm trying to make a header that when on pc is a normal nav and when on a smaller device (like phone etc.) becomes a burger nav. now the burger nav is working (only need to make it so that whenever I get on a smaller device it gets shown and the other one gets d-none)
now the problem is with my normal nav, whenever I try to justify content between so that the links space out evenly it just doenst wanna work and I get default block display
here's the code that needs fixing:
<div class="header">
<nav class="navbar navbar-light">
<div class="burger-nav d-none">
<a class="navbar-brand" href="#">
<h1 id="logo"><span class="h1yellow">Crypto</span><span class="h1white">Mania</span></h1>
</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="#">Login<span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</div>
<div class="normal-nav d-flex justify-content-between"> <!-- this part doesnt work -->
<ul class="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 active">
<h1 id="logo"><span class="h1yellow">Crypto</span><span class="h1white">Mania</span></h1>
</li>
<li class="nav-item active ">
<a class="nav-link" href="#">Login <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
</div>
this is the whole nav but I put a little comment where the problem is. If anyone sees anything please let me know.
<div class="header">
<nav class="navbar-light">
<div class="burger-nav d-none">
<a class="navbar-brand" href="#">
<h1 id="logo"><span class="h1yellow">Crypto</span><span class="h1white">Mania</span></h1>
</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="#">Login<span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</div>
<div class="I removed this classes "> <!-- this part doesnt work -->
<ul class="d-flex justify-content-between">
<li class="nav-item active ">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<h1 id="logo"><span class="h1yellow">Crypto</span><span class="h1white">Mania</span></h1>
</li>
<li class="nav-item active ">
<a class="nav-link" href="#">Login <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
</div>
Try This code please.
Related
I tried to make an responsive bootstrap navigation bar but something isn't working. I even copy/paste the bootstrap navbar example and still the button doesn't show the menu when I click on it.
Can you help me solve it ?
<div class="header">
<nav class="navbar navbar-expand-lg cust">
<div class="container">
<a class="navbar-brand pSize" href="#">
<img src="log.png" class="d-inline-block imgBrandSize">
Logo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fa-solid fa-bars fa-lg"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="header">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand pSize" href="#">
<img src="log.png" class="d-inline-block imgBrandSize">
Logo
</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 ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
this is working properly. This is Bootstrap-5. Please use data-bs-toggle and data-bs-target insted of data-toggle and data-target
Please Check This Code
I hed Two changes in your code.
This Is Bootstrap v4.0.0
<div class="header">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand pSize" href="#">
<img src="log.png" class="d-inline-block imgBrandSize">
Logo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-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 ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text</a>
</li>
</ul>
</div>
</div>
</nav>
enter image description here
I know there are already a lot of questions asked about how to do this, but I am not understanding where exactly should I place the class in my code. I am using Bootstrap 5.1.3.
Also, could someone identify if I am doing/including any "extra stuff" that is redundant or I can remove.
My Code:
<nav class="navbar navbar-light bg-light fixed-top navbar-expand-md mr-auto">
<div class="container-fluid">
<div class="navbar-brand">
Shubham Salunke
</div>
<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="#home"> Home </a> </li>
<li class="nav-item"> <a class="nav-link" href="#about"> About </a> </li>
<li class="nav-item"> <a class="nav-link" href="#projects"> Works </a> </li>
<li class="nav-item"> <a class="nav-link" href="#social"> Social Media </a> </li>
</ul>
</div>
</div>
</nav>
This question already has answers here:
Bootstrap change navbar color
(8 answers)
Change navbar color in Twitter Bootstrap
(12 answers)
Closed 3 years ago.
I've tried to use one of the recommended bootstrap 4 navbar styles. I pasted the code inside my project and all worked well. The only problem is that I've changed the background color from dark to white. Because of that text inside the navbar went invisible. I was trying many ways on how to change the text color to black so you can see the text but it didn't work and I can't figure out how do I change the color of the text from white to black.
I've tried adding the text-black class inside one of the navbar classes which didn't work as well.
Thanks for any help.
<!-- Navigation -->
<section id="navigation">
<nav class="navbar navbar-expand-lg navbar-dark bg-white static-top text-black">
<div class="container">
<a class="navbar-brand" href="#">
<img src="images/logo_5_150x60.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
The navbar-dark class on your <nav> element is the one setting the text color.
Change the navbar-dark to navbar-light when using light background colors.
Documentation: https://getbootstrap.com/docs/4.3/components/navbar/#color-schemes
<!-- Navigation -->
<section id="navigation">
<nav class="navbar navbar-expand-lg navbar-light bg-white static-top text-black">
<div class="container">
<a class="navbar-brand" href="#">
<img src="images/logo_5_150x60.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
Just add some css to #navigation * and set the color using color.
#navigation * {
color: red;
}
<!-- Navigation -->
<section id="navigation">
<nav class="navbar navbar-expand-lg navbar-dark bg-white static-top text-black">
<div class="container">
<a class="navbar-brand" href="#">
<img src="images/logo_5_150x60.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
Hope this helps
I'm trying to get the image "travel.png" to be at the left side of my navbar, like it's hugging the left side of the screen.
(https://imgur.com/a/I0xFOWc)
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="travelindex.html">
<img src="travel.png" width="30" height="30" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="travelindex.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="reservations.html">Reservations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutus.html">About Us</a>
</li>
</ul>
</div>
</div>
I'm not really clear and what the issue is; testing your code it looks like the image is where its supposed to be, however, if you are referring to the image being somewhat centered on the screen, its because of the .container element you have inside the navbar, removing this would cause the navbar to use the full available width of the screen.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="travelindex.html">
<img src="https://via.placeholder.com/30" class="" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="travelindex.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="reservations.html">Reservations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutus.html">About Us</a>
</li>
</ul>
</div>
</div>
</nav>
Without container
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<!-- Without container -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="travelindex.html">
<img src="https://via.placeholder.com/30" class="" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="travelindex.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="reservations.html">Reservations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutus.html">About Us</a>
</li>
</ul>
</div>
</nav>
I am building a website which allows users to send messages to each other. I get number of new messages using AJAX. Therefore, I just need to find a way how to display a badge in users's navbar.
Here is what I want to achieve:
I want the badge to be created using <span class="badge badge-pill badge-primary">1</span>.
My code for navbar:
<nav class="navbar navbar-expand-md navbar-dark bg-dark navbar-laravel" style="margin-bottom: 20px;">
<div class="container">
<a class="navbar-brand" href="#">Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="messages">Messages <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">People <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Photos <span class="sr-only">(current)</span></a>
</li>
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<li><a class="nav-link" href="#">Login</a></li>
<li><a class="nav-link" href="#">Register</a></li>
</ul>
</div>
</div>
</nav>
according to the image you posted, you can add the badge in the messages parent <li> like :
<li class="nav-item">
<span class="badge badge-pill badge-primary" style="float:right;margin-bottom:-10px;">1</span> <!-- your badge -->
<a class="nav-link" href="messages">Messages <span class="sr-only">(current)</span></a>
</li>
( assuming no javascript needed since you said you already have the ajax function ready to update the badge value ).
ofcourse, you can extract the inline styling to an external stylesheet
(here's a fiddle https://jsfiddle.net/k6x40tct/2/ )
hope this helps.