I want to have the nav-bar such that the name of the company is on the left with items X and Y on the right. I tried using justify-content-right as suggested in bootstrap documentation but it doesn't work.
<header>
<nav class="navbar navbar-expand-md fixed-top whitelight nav-masthead">
<a class="navbar-brand gold-text font-weight-bold" href="index.php">Company Name</a>
<!--Creates a clickable button with a toggle icon once the screen collapses-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex flex-row" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link text-black" style="font-size:16px; href="x.php">X <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-black" style="font-size:16px; href="y.php">Y<a>
</li>
</ul>
</div>
</nav>
<header>
Edit: I removed mr-auto class and that seemed to do the trick!
You forgot to close style attribute
<header>
<nav class="navbar navbar-expand-md fixed-top whitelight nav-masthead">
<a class="navbar-brand gold-text font-weight-bold" href="index.php">Company Name</a>
<!--Creates a clickable button with a toggle icon once the screen collapses-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex flex-row" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link text-black" style="font-size:16px"; href="x.php">X <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-black" style="font-size:16px"; href="y.php">Y<a>
</li>
</ul>
</div>
</nav>
<header>
Related
I have a menu. When I click on the anchor link, page floats to the left about 50 pixels.
When I delete div which wrapped nav it don't helps.
What can I do?
Shifting effect
<div class="sticky-top container-fluid p-0">
<nav class="navbar navbar-expand-lg navbar-light bg-light" >
<a class="navbar-brand px-3" href="#"><img src="img/logo_0.png" style="height: 2.5em" alt=""></a>
<button class="me-3 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 mx-3 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#ac">One</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/pages/service.html">Two</a>
</li>
</ul>
</div>
</nav>
</div>
This is for a course project.
I want the brand to stay left-aligned, but the other items to align to the right.
I can do it when there's no toggler, using justify-content-end
But with a toggler, nothing works.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">tindog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Download</a>
</li>
</ul>
</div>
</div>
</nav>
Thanks
You can replace class=me-auto in the ul tag with class=ms-auto
I'm using bootstrap 4 in asp.net (.net framework). When I change the website view to mobile view from pc view, the navbar-toggler-icon button is working. The navbar content is not showing when I press the toggler-icon button. the navbar-collapse id is same with the data-target, but it's still not working, Can you help me please.
Here is my code:
<nav id="navbar" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="/index.aspx">
<img class="logo" src="img/Logo/logo_Rueston.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="navbar-collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav navbar-center ml-auto">
<li class="nav-item ml-3">
<a class="nav-link" href="/index.aspx">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item ml-3">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item ml-3">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item ml-3">
<a class="nav-link" href="#">Rueston Water</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item ml-3">
<a class="nav-link" href="#">
<asp:Label ID="lbLogin" runat="server" Text="Login"></asp:Label>
</a>
</li>
<li class="nav-item ml-3">
<a class="nav-link" href="#">
<asp:Label ID="lbSignup" runat="server" Text="SignUp"></asp:Label>
</a>
</li>
</ul>
</div>
</div>
</nav>
Here is the demo picture:
before pressing the toggler button:
After pressing the toggler button
Change data-toggle="navbar-collapse" in the button to data-toggle="collapse"
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
I'm using the Bootstrap navbar:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="who.html"><img src="../img/RP.png" id="brand-img"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">WHO <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="what.html">WHAT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="how.html">HOW</a>
</li>
</ul>
</div>
</nav>
Yet when I switch to pages what.html and how.html, the nav becomes slightly smaller. When I renamed index.html to who.html, I stopped seeing this bug. Any ideas?
I have put together a landing page with Bootstrap and for some reason, the navbar is not fixed. Below is the code for the navbar.
<nav class="navbar fixed-top navbar-inverse bg-primary navbar-toggleable-md navbar-light bg-faded">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" 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 mr-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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
<a class="navbar-brand pull-sm-right mr-10" href="#">Aquastars Swimming School</a>
</div>
</nav>
Your code is working fine, as you are using bootstrap 4.
you can seen the working demo of your code here Codepen
<nav class="navbar fixed-top navbar-inverse bg-primary navbar-toggleable-md navbar-light bg-faded">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" 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 mr-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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
<a class="navbar-brand pull-sm-right mr-10" href="#">Aquastars Swimming School</a>
</div>
</nav>