I'm attempting to create a nav bar that's got 3 segments (left nav, logo, right nav) however I can't get the right nav to float on the right regardless of what flex classes I'm using.
Here's my HTML:
<div class="header-navbar navbar-expand-sm navbar navbar-horizontal floating-nav navbar-dark navbar-without-dd-arrow navbar-shadow menu-border" role="navigation" data-menu="menu-wrapper">
<div class="navbar-header">
<ul class="nav navbar-nav flex-row">
<li class="nav-item mr-auto">
<a class="navbar-brand" href="/">
<div class="brand-logo"></div>
<h2 class="brand-text mb-0">MyWebsite</h2></a>
</li>
<li class="nav-item nav-toggle"><a class="nav-link modern-nav-toggle pr-0" data-toggle="collapse"><i class="feather icon-x d-block d-xl-none font-medium-4 primary toggle-icon"></i><i class="toggle-icon feather icon-disc font-medium-4 d-none d-xl-block collapse-toggle-icon primary" data-ticon="icon-disc"></i></a></li>
</ul>
</div>
<div class="navbar-container main-menu-content navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2" data-menu="menu-container">
<ul class="nav navbar-nav mr-auto" id="main-menu-navigation" data-menu="menu-navigation">
<li class="nav-item active"><a class="nav-link" href="/play"><i class="feather icon-home"></i><span>Play</span></a></li>
<li class="nav-item"><a class="nav-link" href="/stats"><i class="feather icon-bar-chart"></i><span>Statistics</span></a></li>
<li class="nav-item"><a class="nav-link" href="/leaderboard"><i class="fa fa-trophy"></i><span>Leaderboards</span></a></li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="/">
<div class="brand-logo"></div>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2"><span class="navbar-toggler-icon"></span></button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="nav navbar-nav mr-auto" id="main-menu-navigation" data-menu="menu-navigation">
<li class="nav-item active"><a class="nav-link" href="/register"><i class="fa fa-user-plus"></i><span>Register</span></a></li>
<li class="nav-item"><a class="nav-link" href="/login"><i class="fa fa-sign-in"></i><span>Login</span></a></li>
</ul>
</div>
</div>
As you can see from below, the result is:
Issue is you are using mr-auto in last column rather then ml-auto
because you need margin left not right so that it align it-self to
right
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="nav navbar-nav flex-row">
<li class="nav-item mr-auto">
<a class="navbar-brand" href="/">
<div class="brand-logo"></div>
<h2 class="brand-text mb-0">MyWebsite</h2></a>
</li>
<li class="nav-item nav-toggle"><a class="nav-link modern-nav-toggle pr-0" data-toggle="collapse"><i class="feather icon-x d-block d-xl-none font-medium-4 primary toggle-icon"></i><i class="toggle-icon feather icon-disc font-medium-4 d-none d-xl-block collapse-toggle-icon primary" data-ticon="icon-disc"></i></a></li>
</ul>
<ul class="nav navbar-nav mr-auto" id="main-menu-navigation" data-menu="menu-navigation">
<li class="nav-item active"><a class="nav-link" href="/play"><i class="feather icon-home"></i><span>Play</span></a></li>
<li class="nav-item"><a class="nav-link" href="/stats"><i class="feather icon-bar-chart"></i><span>Statistics</span></a></li>
<li class="nav-item"><a class="nav-link" href="/leaderboard"><i class="fa fa-trophy"></i><span>Leaderboards</span></a></li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#">Navbar 2</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="nav navbar-nav ml-auto" id="main-menu-navigation" data-menu="menu-navigation">
<li class="nav-item active"><a class="nav-link" href="/register"><i class="fa fa-user-plus"></i><span>Register</span></a></li>
<li class="nav-item"><a class="nav-link" href="/login"><i class="fa fa-sign-in"></i><span>Login</span></a></li>
</ul>
</div>
</nav>
Reference
Related
I am sticking to this problem for such a long time. Please help me to fix it... I really tried various ways but none of them is actually working.
I want my login button at the end of my navbar(right side) and when I decrease the screen size i wanted it to be appear on the left side of the burgger menu
Here is my code -
<header class="header">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="image/logo.png" alt="" width="150px" height="35px">
</a>
<div class="login-nav ms-auto mb-2 me-2 ">
<ul class="navbar-nav login">
<li class="navbar-item login-item">
<a class="nav-link active" aria-current="page" href="#">Login</a>
</li>
</ul>
</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 ms-auto mb-2 ">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
I want them like these pictures :
enter image description here
enter image description here
This is a workaround. There are two login links.
<header class="header">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="image/logo.png" alt="" width="150px" height="35px">
</a>
<div class="mb-2 me-2 d-block d-md-none">
<ul class="navbar-nav login">
<li class="navbar-item login-item">
<a class="nav-link active" aria-current="page" href="#">Login</a>
</li>
</ul>
</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 ms-auto mb-2 ">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="mb-2 me-2 d-none d-md-block">
<ul class="navbar-nav login">
<li class="navbar-item login-item">
<a class="nav-link active" aria-current="page" href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<header class="header">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="image/logo.png" alt="" width="150px" height="35px">
</a>
<div class="navbar-nav ms-auto me-2 d-block d-md-none">
<ul class="navbar-nav">
<li class="nav-item ">
<a class="nav-link active" aria-current="page" href="#">Login</a>
</li>
</ul>
</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 justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 ">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="navbar-nav ms-auto me-2 d-none d-md-block">
<ul class="navbar-nav">
<li class="nav-item ">
<a class="nav-link active" aria-current="page" href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
This is working as expected :) This for the idea Yasin
I have two navbar´s (one under the other). My goal is that both are fixed at the top, so I applied to both (fixed-top).
To make the other navbar fit under the other, I used a margin-top. My problem is that this margin top is not responsive, if you increase or decrease the screen size, the navbar does not fit perfectly under the other.
Is there a way to fit them correctly or calculate the necessary margin top?
DEMO
HTML
<nav class="navbar navbar-expand-md navbar-light bg-white MyNavBar fixed-top" >
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2" id="dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="btn"><img src="home.svg"></a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="btn"><img src=".logo-home.svg"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2" id="dual-collapse2">
<ul class="navbar-nav ml-auto">
<div class="row">
<li class="nav-item">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item" style="width: 57px;">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
</div>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-light bg-white fixed-top Mytoolbar" style="margin-top: 74px;">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse22" id="dual-collapse22">
<ul class="navbar-nav mr-auto" id="dual-collapse22">
<li class="nav-item folder_category">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#dual-collapse22">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav navbar-collapse collapse w-100 order-3" id="dual-collapse22">
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
</ul>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse22" id="dual-collapse22">
<ul class="navbar-nav ml-auto">
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item">
<a class="nav-link">
</a>
</li>
<li class="nav-item">
<a class="toggle-third nav-link">
<img src="ra.svg" >
</a>
</li>
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
</ul>
</div>
</nav>
This should work:
Wrap both navbars in the same div
Give this div the fixed-top class
Remove the fixed-top class from both navbars
remove the inline css of the second navbar (margin-top: 74px;)
See below:
.MyNavBar {
box-shadow: 0px 12px 17px rgba(188, 188, 203, 0.14);
border-bottom: 1px solid #BCBCCB;
z-index: 9999;
}
.MyNavBar img {
cursor: pointer;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="fixed-top">
<nav class="navbar navbar-expand-md navbar-light bg-white MyNavBar">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2" id="dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="btn"><img src="home.svg"></a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="btn"><img src=".logo-home.svg"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2" id="dual-collapse2">
<ul class="navbar-nav ml-auto">
<div class="row">
<li class="nav-item">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item" style="width: 57px;">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
</div>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-light bg-white Mytoolbar">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse22" id="dual-collapse22">
<ul class="navbar-nav mr-auto" id="dual-collapse22">
<li class="nav-item folder_category">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#dual-collapse22">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav navbar-collapse collapse w-100 order-3" id="dual-collapse22">
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
</ul>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse22" id="dual-collapse22">
<ul class="navbar-nav ml-auto">
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item">
<a class="nav-link">
</a>
</li>
<li class="nav-item">
<a class="toggle-third nav-link">
<img src="ra.svg">
</a>
</li>
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
</ul>
</div>
</nav>
</div>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
I am very new to learning Bootstrap, my navbar is not collapsing, furthermore, I want my three list items Home, Features and Pricing to be on left whereas sign up and login on the right.
I was successfully able to scale my image using CSS (id = brandimg). Please fix this issue.
My markup is:
<nav class="navbar navbar-default navbar-light navbar-expand" style="background-color: #3ab3f0">
<div class="container collapse navbar-collapse">
<div class="navbar-header">
<span class="navbar-brand">
<img src="https://images8.alphacoders.com/416/416969.jpg" id="brandimg">
AnmGal
</span>
</div>
<div class="navbar">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home </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>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a class="nav-link" href="#">Sign Up</a></li>
<li class="nav-item"><a class="nav-link" href="#">Login</a></li>
</ul>
</div>
</div>
</nav>
This should work for you:
<nav class="navbar navbar-expand-lg navbar-light bg-primary">
<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 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>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Signup</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</nav>
However, I would recommend you to read this https://getbootstrap.com/docs/4.3/components/navbar/ you will learn all you need about bootstrap navbars.
If you are use bootstrap 4 then try this:
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light justify-content-md-center justify-content-start">
<a class="navbar-brand" href="#"><img src="https://images8.alphacoders.com/416/416969.jpg" id="brandimg">
AnmGal</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between align-items-center w-100" id="navbarNavDropdown">
<ul class="navbar-nav mr-0">
<li class="nav-item">
<a class="nav-link" href="#">Home </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 class="right-menu">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Sign Up</a></li>
<li class="nav-item"><a class="nav-link" href="#">Login</a></li>
</ul>
</div>
</div>
</nav>
Currently I try to build a Navbar that is responsive. I use Bootstrap for my css. What I want is that: On a small viewport all links but the Navbar-brand is listed within one row. The Navbar on a large viewport looks like this (as expected):
But when I shrink the viewport the Navbar looks like this:
I already managed some viewport configurations, that e.g the username is not displayed on a small viewport. The HTML looks as follows (Btw. I will only show some mocked nav-items, since this is not important for the question:
HTML
<nav class="navbar navbar-expand fixed-top navbar-dark bg-dark flex-column flex-md-row">
<div class="navbar-nav flex-row">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="navbar-brand mr-0 mr-md-2">
<img src="assets/loading-skull.png" width="30px" height="auto">
Scare-me.com
</a>
</li>
</ul>
</div>
<div class="navbar-nav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link">Stories</a>
</li>
</ul>
</div>
<div class="mx-auto">
<a class="navbar-brand mx-auto hide-on-small-viewport" href="#">Show your threads!</a>
</div>
<div class="navbar-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link">Log In</a>
</li>
<li *ngIf="!isLoggedIn" class="nav-item">
<a class="nav-link">Sign Up</a>
</li>
<li class="nav-item">
<button class="btn mt-1 mb-3 mb-md-0 ml-md3">Logout</button>
</li>
</ul>
</div>
</nav>
It seems a bit difficult to achieve what you want without drastically changing the whole html structure of your navbar. I am not sure if you are up for that. So I would suggest keeping 2 buttons for "Stories". Show one button in mobile view and the other in desktop view. This will ensure minimal regression impact to your html structure.
Button for desktop views
<ul class="navbar-nav mr-auto d-none d-md-block">
<li class="nav-item">
<a class="nav-link">Stories</a>
</li>
</ul>
Button for mobile view
<ul class="navbar-nav mr-auto d-none d-md-block">
<li class="nav-item">
<a class="nav-link">Stories</a>
</li>
</ul>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand fixed-top navbar-dark bg-dark flex-column flex-md-row">
<div class="navbar-nav flex-row">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="navbar-brand mr-0 mr-md-2">
<img src="assets/loading-skull.png" width="30px" height="auto"> Scare-me.com
</a>
</li>
</ul>
</div>
<div class="navbar-nav">
<ul class="navbar-nav mr-auto d-none d-md-block">
<li class="nav-item">
<a class="nav-link">Stories</a>
</li>
</ul>
</div>
<div class="mx-auto">
<a class="navbar-brand mx-auto hide-on-small-viewport" href="#">Show your threads!</a>
</div>
<div class="navbar-nav">
<ul class="navbar-nav mr-auto d-md-none">
<li class="nav-item">
<a class="nav-link">Stories</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link">Log In</a>
</li>
<li *ngIf="!isLoggedIn" class="nav-item">
<a class="nav-link">Sign Up</a>
</li>
<li class="nav-item">
<button class="btn mt-1 mb-3 mb-md-0 ml-md3">Logout</button>
</li>
</ul>
</div>
</nav>
in every mobile it shows same like this image
HTML:
<div class="wrap">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top " >
<div class="container">
<img src="image/logo3.png" height="30px" alt="">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item active ">
Home
</li>
<li class="nav-item active">
About Us
</li>
<li class="nav-item active">
<a href="#service" onclick="href='index.php#service'"; class="nav-link" >Services</a>
</li>
<li class="nav-item active">
Our CLients
</li>
<li class="nav-item active">
Our Team
</li>
<li class="nav-item active">
products
</li>
<li class="nav-item active">
Contact
</li>
<li class="nav-item">
<!-- Button trigger modal -->
<a href="contactits.php" class="btn nav-link active" style="background-color: transparent;border-radius: 11px;
padding-left: 10px;
padding-right: 10px;
border-color: lightgray;">+92-42-35791029</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
This must be the browser version installed on your S3. Or it's not a browser that's supported by Bootstrap 4.
Update the browser and everything will be fine.