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.
Related
I have a navbar.php include file which i would like to make dynamic depending which url i am on. I am working on a php file with the latest version of bootstrap
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="topheader">
<div class="container">
<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 active" aria-current="page" href="/">Home</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="/our-work">Our Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
I developed a header using bootstrap 4.5
<nav class="navbar navbar-expand-sm navbar-light">
<!-- Brand -->
<a class="navbar-brand" href="#">
<img src="logo.png">
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"
aria-controls="collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<!-- Left -->
<ul class="navbar-nav left-menu mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Item1</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item2</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item3</a>
</li>
</ul>
<!-- Right -->
<ul class="navbar-nav ml-auto right-menu">
<li class="nav-item active">
<a class="nav-link" href="#">Item4</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item5</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item6</a>
</li>
</ul>
</div>
For the tablet I want to change the arrangement of the elements as follows :
I
I use media query :
#media (max-width: 991.98px) { ... }
But i dont know how can I transform left menu (mr-auto) to be bellow the menu.
Thank you !
What you're looking for is the bootstrap's class order-X where x is the order of the element.
With your current markup, you can add an order on mobile, then change it on desktop.
Note that you could change the markup to only change the order on desktop.
Step 1:
Define the order of the element
Logo will always have order-1
Left menu will have order-3 by default then order-md-2.
Right menu will always have order-2.
Step 2:
Define the width of Left menu
Width 100 by default col-12.
Width auto later on col-md-auto.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar">
<img src="//via.placeholder.com/150" class="order-1" alt="">
<ul class="navbar-nav left-menu mr-auto order-3 order-md-2 col-12 col-md-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Item1</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item2</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item3</a>
</li>
</ul>
<!-- Right -->
<ul class="navbar-nav ml-auto right-menu order-2">
<li class="nav-item active">
<a class="nav-link" href="#">Item4</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item5</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item6</a>
</li>
</ul>
</div>
use negative margin on right-menu in media queries.
#media only screen and (min-width: 768px) and (max-width: 991px) {
.navbar {
flex-direction: column;
align-items: end;
}
.navbar-collapse, .left-menu {
width: 100%;
}
.right-menu {
margin-top: -80px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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">
<!-- Left -->
<ul class="navbar-nav left-menu mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Item1</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item2</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item3</a>
</li>
</ul>
<!-- Right -->
<ul class="navbar-nav ml-auto right-menu">
<li class="nav-item active">
<a class="nav-link" href="#">Item4</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item5</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item6</a>
</li>
</ul>
</div>
</nav>
Create two "left menu".
Set "display:none" to the left menu near the logo when max width less than 991px and
set "display:block" to the second menu which is down to the logo.
Do the 2nd method in reverse to display the first menu and hide the second menu.
Use media query to do this responsive method.
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>
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>
I'm just starting to get to grips with bootstrap.
I'm trying to create a vertical-navbar on the left of the page after the user has scrolled past the full-page 'intro' using bootstrap 4. The code below produces the navbar on the left side of the page, however there is a problem with it
The navbar stays in a collapsed state, even after resizing the window small and large again
Why does the code cause the navbar to start closed?
Thanks, Jeff
<header id="home" class="jumbotron h-100vw w-100vw">
...
</header>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<nav class="navbar navbar-expand-md navbar-light">
<a class="navbar-brand" href="#home">
<img src="img/logo.png" class="img-fluid" alt="Home">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse-md flex-column" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#about"></a>About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">My Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#connect">Stay Connected</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Get In Touch</a>
</li>
</ul>
</div>
</nav>
</div>
<main class="col-md-10">
REST OF MY CONTENT ON THE RIGHT
</main>
</div>
There is no navbar-collapse-md class. Change it to just navbar-collapse.
<div class="collapse navbar-collapse flex-column" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#about"></a>About Me
</li>
<li class="nav-item">
<a class="nav-link" href="#work">My Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#connect">Stay Connected</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Get In Touch</a>
</li>
</ul>
</div>