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>
Related
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="`enter code here`">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Linkedin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">GitHub</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Email</a>
</li>
</ul>
</div>
</div>
</nav>
This is the navbar in html made with BootStrap. but somehow it does not show up on the mobile any tips of how to change this? I have tried a lot and I looked over previous questions aswell but nothing helped
As you can see in the Bootstrap 5 docs...
"Navbars can use .navbar-toggler, .navbar-collapse, and
.navbar-expand{-sm|-md|-lg|-xl|-xxl} classes to determine when their
content collapses behind a button"
Your code is missing the toggler...
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarTogglerDemo01" 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">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="`enter code here`">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Linkedin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">GitHub</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Email</a>
</li>
</ul>
</div>
</div>
</nav>
Demo
Also note the data attributes have changed in Bootstrap 5
In the extra-small size screen, I want to have the navbar-brand and navbar-nav vertically stacked.
<nav class="navbar navbar-dark navbar-expand-sm bg-primary fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Ristorante Con Fusion</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>
But for some reason, it looks like this
How can I have the navbar-nav under the navbar-brand in an extra-small size screen?
Do you want the nav items to stack vertically too? I think you're looking for this...
<nav class="navbar navbar-dark navbar-expand bg-primary fixed-top">
<div class="container flex-column flex-sm-row">
<a class="navbar-brand" href="#">Ristorante Con Fusion</a>
<ul class="navbar-nav mr-sm-auto mr-0">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>
https://codeply.com/p/UNjoLoEnSn
Use .collapse class and button toggler.
UPDATE
Just add flex-column flex-lg-row classes in your nav tag.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-light bg-light flex-column flex-lg-row">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
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>
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.
I'm currently using the example from bootstrap called 'dashboard' I'm wanting to get the top navbar to actually tuck underneath the side navbar. Like this example: Image Example from Dribbble
I've put the dashboard code from bootstrap onto jsfiddle for ease of use for those that are willing to help (I really appreciate any help with this).
https://jsfiddle.net/1dy65wqx/
It should impact this:
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Dashboard</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<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="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Overview <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reports</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Export</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
</ul>
</nav>
I have changed few styles, please add this to your css file..
<div class="row" style="position:relative;">
<nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar" style="position:fixed; z-index:2000; top:0px;">