I want my Bootstrap 5 nav to wrap until I get to a xs sized screen and then show the small screen pills. Currently it does not wrap and the menu disappears when xs; however, the pills do not appear. I have:
<nav id="myNavbarEP" class="navbar navbar-expand-lg navbar-expand-md navbar-sm navbar-xs navbar-light bg-light" style="display:none;">
<div class="container-fluid">
<div class="navbar-collapse collapse w-100 order-2 dual-collapse2">
<ul class="navbar-nav me-auto align-middle">
<li>
<a type="button" class="btn btn-colour1 nav-link dropdown-toggle align-middle" data-bs-toggle="dropdown" aria-expanded="false">Administration</a>
<ul class="dropdown-menu">
<li>
<a type="button" class="btn btn-colour1" href="BdyWghtMonAdmin.html">Body Weight Monitoring Frequency Administration</a>
</li>
<li>
<a type="button" class="btn btn-colour1" href="ClinicWorkingDay.html">Clinic Working Days</a>
</li>
<li>
<a type="button" class="btn btn-colour1" href="ClinicNonWorkingDate.html">Clinic Non Working Date</a>
</li>
<li>
<a type="button" class="btn btn-colour1" href="SupplementAdmin.html">Post-Training Supplement Aministration</a>
</li>
</ul>
</li>
<li class="nav-item active">
<a type="button" class="btn btn-colour1" href="AccountUpdate.html">Account Update</a>
</li>
<li class="nav-item active">
<a type="button" class="btn btn-colour1" href="CalendarSession.html">Calendar Session</a>
</li>
<li class="nav-item active">
<a type="button" class="btn btn-colour1" href="CalendarSessionSeries.html">Calendar Session Series</a>
</li>
<li class="nav-item">
<a type="button" class="btn btn-colour1" href="ExerciseAdmin.html">Exercise Library</a>
</li>
<li class="nav-item">
<a type="button" class="btn btn-colour1" href="ExerciseMachineAdmin.html">Exercise Machine Library</a>
</li>
<li class="nav-item">
<a type="button" class="btn btn-colour1" href="PatientExerciseAss.html">Exercise Prescription</a>
</li>
<li class="nav-item">
<a type="button" class="btn btn-colour1" href="SessionSelect.html">Gym Session</a>
</li>
<li class="nav-item">
<a type="button" class="btn btn-colour1" href="PatientIssues.html">Issues/Adverse Events</a>
</li>
<li class="nav-item">
<a type="button" class="btn btn-colour1" href="SessionSeriesAdmin.html">Session Series Admin</a>
</li>
</ul>
</div>
<div class="navbar-collapse collapse w-100 order-2 dual-collapse2">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a type="button" class="btn btn-info" href="HelpEP.html">Help</a>
</li>
<li class="nav-item">
<a type="button" class="btn btn-success" href="LoginRoleSelect.html">Select Role</a>
</li>
<li class="nav-item">
<a type="button" class="btn btn-danger" href="Login.html">Log out</a>
</li>
</ul>
</div>
</div>
</nav>
Add the flex-wrap class to the <ul>.
Related
Is there a way to either style the buttons in my navbar only when its collapsed or change the buttons to text when collapsed, cause right now it looks fine normally, but when collapsed, the buttons are placed right underneath each other and are not the same width.
It's the last 2 buttons and searchbar that i need to somehow style or set margin for.
i have tried looking in the bootstrap documentation and guides on w3schools, but haven't been able to find any real solutions.
Sorry if this is not asked the correct way or i'm missing something, it's my first post.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<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">
<a class="nav-link active" href="/">Hjem</a>
</li>
<li class="nav-item">
<a class="nav-link " href="?page=new">Ny kunde</a>
</li>
<li class="nav-item">
<a class="nav-link " href="?page=allcustomers">Vis alle kunder</a>
</li>
<li class="nav-item">
<a class="nav-link " href="?page=settings">Opsætning</a>
</li>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item mr-sm-2">
<a class="btn btn-secondary navbar-btn btn-block" href="?page=invoice">Quick faktura</a>
</li>
<li class="nav-item mr-sm-2">
<form class="form-inline">
<div class="input-group">
<input type="text" class="form-control" placeholder="Søg" aria-label="Søg" name="search" aria-describedby="Søg">
<div class="input-group-append">
<button class="btn btn-secondary navbar-btn" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
</div>
</div>
</form>
</li>
<li class="nav-item">
<a class="btn btn-danger navbar-btn btn-block" href="?page=logout">Log ud</a>
</li>
</ul>
</div>
</div>
</nav>
A simple solution is to add the flex-row (flex-direction: row) class to the 2nd navbar-nav. This will allow the buttons and form to always layout horizontally (inline) in a row at all screen widths.
<ul class="navbar-nav flex-row">
<li class="nav-item mr-sm-2">
<a class="btn btn-secondary navbar-btn btn-block" href="?page=invoice">Quick faktura</a>
</li>
<li class="nav-item mr-sm-2">
<form class="form-inline">
<div class="input-group">
<input type="text" class="form-control" placeholder="Søg" aria-label="Søg" name="search" aria-describedby="Søg">
<div class="input-group-append">
<button class="btn btn-secondary navbar-btn" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
</div>
</div>
</form>
</li>
<li class="nav-item">
<a class="btn btn-danger navbar-btn btn-block" href="?page=logout">Log ud</a>
</li>
</ul>
https://www.codeply.com/go/Wbc4kRGCtO
Try this :
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<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">
<a class="nav-link active" href="/">Hjem</a>
</li>
<li class="nav-item">
<a class="nav-link " href="?page=new">Ny kunde</a>
</li>
<li class="nav-item">
<a class="nav-link " href="?page=allcustomers">Vis alle kunder</a>
</li>
<li class="nav-item">
<a class="nav-link " href="?page=settings">Opsætning</a>
</li>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item mr-sm-2">
<a class="btn btn-secondary navbar-btn btn-block" href="?page=invoice">Quick faktura</a>
</li>
<li class="nav-item mr-sm-2">
<form class="form-inline">
<div class="input-group">
<input type="text" class="form-control" placeholder="Søg" aria-label="Søg" name="search" aria-describedby="Søg">
<div class="input-group-append">
<button class="btn btn-secondary navbar-btn" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
</div>
</div>
</form>
</li>
<li class="nav-item">
<a class="btn btn-danger navbar-btn btn-block" href="?page=logout">Log ud</a>
</li>
</ul>
</div>
</div>
</nav>
There are specific ways to apply styles to the Bootstrap elements using their classes and stuff, but you can allways create a css file with the classes names and stylizing them from there if you feel like it.
It's not the rigth way, there are a bunch of ways you should try that are more correct thant this, but it works.
This question already has answers here:
Bootstrap NavBar with left, center or right aligned items
(14 answers)
Center an element in Bootstrap Navbar
(10 answers)
Closed 4 years ago.
I need to achieve the brand logo in left, menu items to be center and couple of buttons in the right. I have tried using the flexbox approach but the center items does not align well. and also the brand logo has a wide space with a clickable link.
JS Fiddle
<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center">
<div class="container">
<img src="assets/logo/" alt="logo">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100 ml-auto" id="collapsingNavbar3">
<ul class="navbar-nav w-100 justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="#">How it works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Become a tutor</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto w-100 justify-content-end">
<li class="nav-item">
<a class="btn btn-link" href="#">Sign In</a>
</li>
<li class="nav-item">
<a class="btn btn-primary" href="#">Sign Up</a>
</li>
</ul>
</div>
</div>
</nav>
Answering my own question few months later.
<nav class="navbar navbar-light navbar-expand-md bg-white justify-content-center main--navigation dark-header">
<a href="#" class="navbar-brand d-flex w-50 mr-auto">
<img src="assets/images/logo-header.svg" class="navigation__logo" alt="Logo" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100" id="collapsingNavbar">
<ul class="navbar-nav w-100 justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="#">Browse</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How it works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Become a tutor</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Prices</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto w-100 justify-content-end">
<li class="nav-item dropdown no-arrow mx-1 nav-link px-0">
<button id="bookmarksDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" class="btn btn-outline-secondary btn-outlined" data-original-title="Bookmarks"><img src="assets/icons/bookmark-header-dark.svg"></button>
<div class="dropdown-list dropdown-menu dropdown-menu-right" aria-labelledby="alertsDropdown">
<h6 class="dropdown-header">
Bookmarks
</h6>
</div>
</li>
<li class="nav-item dropdown no-arrow mx-1 nav-link px-0">
<button id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" class="btn btn-outline-secondary btn-outlined" data-original-title="Notifications"><img src="assets/icons/bell-header-dark.svg"></button>
<div class="dropdown-list dropdown-menu dropdown-menu-right" aria-labelledby="notificationsDropdown">
<h6 class="dropdown-header">
You do not have any notifications yet
</h6>
</div>
</li>
<li class="nav-item dropdown no-arrow mx-1 ml-3 mr-0 nav-link px-0">
<a class="nav-link dropdown-toggle pr-0" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="header__profile__title d-inline-block text-right align-middle">
<span class="mr-2 d-none d-block header__profile__name">Aaron Alexander</span>
<span class="mr-2 d-none d-block header__profile__role">Student</span>
</div>
<div class="header__profile d-inline-block">
<img class="img-profile rounded" src="assets/images/andrew-franklin.jpeg" alt="Aaron Alexander">
</div>
</a>
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
<a class="dropdown-item" href="#">
<i class="fas fa-user fa-sm fa-fw mr-2"></i>
Profile
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-cogs fa-sm fa-fw mr-2"></i>
Settings
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-list fa-sm fa-fw mr-2"></i>
Activity Log
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</a>
</div>
</li>
</ul>
</div>
</nav>
That container div you added after the nav makes you loose the flexbox attributes.
You also set the logo with the class "w-100" which takes all possible width.
I removed those and got a nicely aligned navbar.
<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center align-items-center">
<img src="assets/logo/" alt="logo">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100 ml-auto" id="collapsingNavbar3">
<ul class="navbar-nav w-100 justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="#">How it works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Become a tutor</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto w-100 justify-content-end">
<li class="nav-item">
<a class="btn btn-link" href="#">Sign In</a>
</li>
<li class="nav-item">
<a class="btn btn-primary" href="#">Sign Up</a>
</li>
</ul>
</div>
</nav>
Here's a fiddle with the results.
here is my working example.
You just need to put all content into single div in order to Justify content with bootstrap classes. Also, I am using navbar-brand and making them show hide depending on screen resolution. You can do that with js which might be smoother once the page loads completely.
#media only screen and (max-width: 991px) {
.logo {
display: flex;
}
.collapse .navbar-brand {
display: none
}
}
#media only screen and (min-width: 992px) {
.logo {
display: none;
}
.collapse .navbar-brand {
display: none;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light d-flex ">
<a class="navbar-brand logo" href="#">Navbar</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 justify-content-between" id="navbarSupportedContent">
<a class="navbar-brand" href="#">Navbar</a>
<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">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
I have a bootstrap nav bar, and I would like to have both collapse-able and non collapse-able menu items.
my code is as follows:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-toggleable-md navbar-light fixed-top">
<div class="container">
<a class="navbar-brand" href="https://ngohub.asia">
<%= image_tag 'ngohublogo.png', class: 'hidden-md-down img-responsive', style: 'width: 100%'%>
<%= image_tag 'ngohublogo.png', class: 'hidden-lg-up img-responsive w-100'%>
</a>
<div class="w-100" style="float:right;">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Login <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link">|</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign Up </a>
</li>
</ul>
</div>
<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="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
The login and sign up links appear as expected to the left of the brand,
however when I decrese the size of the browser window to simulate a mobile device, the links aren't sharing space with the brand as I would like:
Here it is on a full width screen
here it is in a simulated mobile view. I would like login and sign up to be next to the brand and next to the hamburger
First thing of note, visibility helpers have been renamed in the latest version of bootstrap. hidden-md has been replaced with .d-md-none, etc.
Second, I made sure to declare flex-direction: row; on .navbar-nav to arrange it's children horizontally instead of vertically.
.navbar .navbar-nav{
flex-direction: row;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-toggleable-md navbar-light fixed-top">
<div class="container">
<a class="navbar-brand" href="https://ngohub.asia">
<img src="https://via.placeholder.com/200x50" class="hidden-md-down img-responsive" style="width: 100%" />
</a>
<div style="float:right;">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Login <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link">|</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign Up </a>
</li>
</ul>
</div>
<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="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
There are a few different ways you can approach this. Remember that in Bootstrap 4.1, the navbar-toggleable classes have been replaced with navbar-expand-.
Use flex-row on the first navbar-nav so that it doens't wrap/stack in a column on smaller screens. Use flex-grow-1 on the collapse so that it expands the remaining width.
Demo: https://www.codeply.com/go/LBY9LXio09
<nav class="navbar clg navbar-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="https://ngohub.asia">
<img src="//placehold.it/40?text=sm" class="d-lg-none d-inline">
<img src="//placehold.it/100x30?text=lg" class="d-lg-inline d-none">
</a>
<div class="mr-auto flex-shrink-1">
<ul class="navbar-nav flex-row">
<li class="nav-item active">
<a class="nav-link" href="#">Login <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item px-1">
<a class="nav-link">|</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign Up </a>
</li>
</ul>
</div>
<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 flex-grow-1" id="navbarSupportedContent">
<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="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline d-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
I am trying to create a basic anchor link within the same page. I am using Bootstrap 4 (whether that makes a difference or not). The link and the target are both in server-side includes. I want to link from the upper nav "Contact" to the form I have in the footer.
In the "upperNav" include I have the following:
<a class="nav-link text-light main-menu" href="#contactMe">Contact</a>
In the "footer" include I have the following:
<p class="contactUs"><a id="#contactMe">Contact Us</a></p>
But for some reason it doesn't work. I have researched this problem but to no avail. Any suggestions?
<!-- From: https://www.jquery-az.com/bootstrap4/demo2.php?ex=91.0_8 -->
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-info ">
<a class="navbar-brand text-light logo-text" href="http://shamar.org/" >shamar.org</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#demo-navbar" aria-controls="demo-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="demo-navbar">
<ul class="navbar-nav mr-auto" id="menu">
<li class="nav-item">
<a class="nav-link text-light main-menu" href="/index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-light main-menu" href="/articles/index.html">Articles</a>
</li>
</li>
<li class="nav-item">
<a class="nav-link text-light main-menu" href="/weblog/">Blog</a>
</li>
</li>
<li class="nav-item">
<a class="nav-link text-light main-menu" href="/books.html">Books</a>
</li>
</li>
<li class="nav-item">
<a class="nav-link text-light main-menu" href="/multimedia/index.html">Multimedia</a>
</li>
</li>
<li class="nav-item">
<a class="nav-link text-light main-menu" href="/about.html">About</a>
</li>
</li>
<li class="nav-item">
<a class="nav-link text-light main-menu" href="#contactMe">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light submit2 my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Change
<a id="#contactMe">Contact Us</a>
To
<a id="contactMe">Contact Us</a>
A newbie to bootstrap,I have a dropdown in a navbar in bootstrap 4.
Here is my code:
<nav class="navbar navbar-toggleable-md fixed-top navbar-inverse bg-inverse " >
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#nav-items">
<span class="navbar-toggler-icon"></span>
</button>
Flicker
<div class="collapse navbar-collapse" id="nav-items" >
<ul class="navbar-nav mr-auto">
<li class="nav-item active" href="#">
Home
</li>
<li class="nav-item">
Baidu
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disbabled</a>
</li>
<li class="nav-item">
DropDown<span class="caret"></span>
<ul class="dropdown-menu bg-inverse">
<li class="dropdown-item">Hello </li>
<li class="dropdown-item">Yeah </li>
</ul>
</li>
<form class="form-inline ">
<input class="form-control mr-sm-2" type="text" placeholder="Input">
<button class="btn btn-outline-success">Submit</button>
</form>
</ul>
</div>
</nav>
It turns out like this:
The dropdown is misplaced.What's going wrong? And how to fix it? Any help will be appreciated.
you need to add the class dropdown to your nav-item div
<li class="nav-item dropdown">
DropDown<span class="caret"></span>
<ul class="dropdown-menu bg-inverse">
<li class="dropdown-item">Hello </li>
<li class="dropdown-item">Yeah </li>
</ul>
</li>