I want to create a simple navbar using Bootstrap, but when the screen size reduces the header spans over 2 - 3 rows and starts shadowing the form. Is there anyway to restrict the header to just one line?
https://jsfiddle.net/jaiasher88/8879m9yc/
<nav class="navbar navbar-default navbar-fixed-top">
<div class = "container-fluid">
<a href = "page-list.html" class = "navbar-text pull-left no-left-margin">
<span class = "glyphicon glyphicon-chevron-left glyphiconBackProperties default-blue"/>
</a>
<a class = "navbar-brand default-blue" href = "#">
Edit Page
</a>
<a href = "page-list.html" class = "navbar-text pull-right">
<span class = "glyphicon glyphicon-plus glyphiconPlusProperties default-blue"></span>
</a>
</div>
</nav>
Related
When I'm trying to take it as mobile version, I don't see the menu by clicking on the place where I showed in the picture. Can someone please help me?enter image description here
<div class = "container">
<div class = "navbar-header">
<button type = "button" class = "navbar-toggle" data-toggle = "collapse"
data-target = "#micon">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<img class = "logo" src = "logo1.png">
</div>
<div class = "collapse navbar-collapse" id = "micon">
<ul class = "nav navbar-nav navbar-right">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</nav>
</header>
did you include the cdn and css links in your index.html and css?
I'm designing a website for a biomedical engineering conference using Bootstrap and am having some trouble configuring it for mobile.
Specifically, on the page titled cochairs.html, the collapsed navbar does not share the same width as the content below it.
Unsure as to how to fix this problem, I wrapped all navbar and image tags in a container with class = "text-center" hoping this would align all of the page's content.
Here's the relevant section of my cochairs.html file:
<div container class = "text-center">
<nav class="navbar navbar-expand-lg navbar-light bg-light" style = "background-color: #0b98de;">
<a class="navbar-brand" href="index.html">NANODDS 2019</a>
<button class="navbar-toggler" 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">
<li class="nav-item active">
<a class="nav-link" href="abstracts.html">Abstracts <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="speakers.html">Speakers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cochairs.html">Co-Chairs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="agenda.html">Agenda</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "registration.html">Registration</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "travel-lodging.html">Travel/Lodging</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "venue.html">Venue</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "sponsors.html">Sponsors</a>
</li>
</ul>
</div>
</nav>
<h2 class = "text-center">Meet the Co-Chairs</h2>
<div class = "container">
<div class = "row">
<div class = "col">
<div class = "caption">
<img src = "anderson.jpg" alt = "anderson" class = "img-container circle-img rounded-circle">
<h4>Daniel Anderson</h4>
<p class = "text-center">Associate Professor, Chemical Engineering and Institute for Medical Engineering and Science, Massachusetts Institute of Technology</p>
</div>
</div>
<div class = "col">
<div class = "caption">
<img src = "qiaobing.png" alt = "qiaobing" class = " img-container circle-img rounded-circle">
<h4>Qiaobing Xu</h4>
<p class = "text-center">Associate Professor, Department of Biomedical Engineering, Tufts University</p>
</div>
</div>
</div>
</div>
</div>
If you know of any effective ways to contain the page's content please let me know. I'm guessing it's a fairly easy fix, I'm just relatively new to Bootstrap. Any help is appreciated, thanks :)
Try adding the img-fluid class to your images.
<img src = "anderson.jpg" alt = "anderson" class = "img-fluid img-container circle-img rounded-circle">
This will make the images responsive to the screen size and now push them outside of the margin.
For some reason, my footer navigation bar when in full desktop mode is being displayed with some menu links being displayed on the same line as the navbar header and then centering themselves vertically when past the navbar header...I just want them to be displayed vertically in a line and cented....
(currently displayed)
Navbar Header Link 1
Link 2
Link 3
(How I actually want it displayed)
Navbar Header
Link 1
Link 2
Link 3
<div class = "container-fixed">
<div class = "row" height = 100%>
<div class = "col-sm-2 col-sm-offset-1">
<!-- Footer About Dropdown -->
<nav class = "navbar navbar-default" id = "bottomabout">
<div class = "container">
<div class = "navbar-header">
<button class = "navbar-toggle" data-toggle = "collapse" data-target = "#navbar-collapse">
<span class = "glyphicon glyphicon-plus"></span>
</button>
<h3 class = "text-center">
About Us
</h3>
</div>
<div class = "collapse navbar-collapse" id = "aboutcollapse">
<ul class = "nav nav-pills nav-stacked">
<li>
<a href = "">
OUR STORY
</a>
</li>
<li>
<a href = "">
BABY REGISTRY
</a>
</li>
<li>
<a href = "">
STORE LOCATOR
</a>
</li>
<li>
<a href = "">
TESTIMONIALS
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class = "col-sm-2">
<!-- Service Footer Dropdown -->
<nav class = "navbar navbar-default" id = "bottomservice">
<div class = "container">
<div class = "navbar-header">
<button class = "navbar-toggle" data-toggle = "collapse" data-target = "#navbar-collapse">
<span class = "glyphicon glyphicon-plus"></span>
</button>
<h3>
Service
</h3>
</div>
<div class = "collapse navbar-collapse" id = "aboutcollapse">
<ul class = "nav nav-pills nav-stacked">
<li>
<a href = "">
CONTACT US
</a>
</li>
<li>
<a href = "">
ORDER STATUS
</a>
</li>
<li>
<a href = "">
FAQ
</a>
</li>
<li>
<a href = "">
SHIPPING POLICY
</a>
</li>
<li>
<a href = "">
RETURN POLICY
</a>
</li>
<li>
<a href = "">
NEWSLETTER
</a>
</li>
<li>
<a href = "">
MY ACCOUNT
</a>
</li>
<li>
<a href = "">
LIVE CHAT
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Shop Footer Dropdown -->
<div class = "col-sm-2">
<nav class = "navbar navbar-default" id = "bottomshop">
<div class = "container">
<div class = "navbar-header">
<button class = "navbar-toggle" data-toggle = "collapse" data-target = "#navbar-collapse">
<span class = "glyphicon glyphicon-plus"></span>
</button>
<h3>
Shop
</h3>
</div>
<div class = "collapse navbar-collapse" id = "aboutcollapse">
<ul class = "nav nav-pills nav-stacked">
<li>
<a href = "">
BABY APPAREL
</a>
</li>
<li>
<a href = "">
BABY GIFTS
</a>
</li>
<li>
<a href = "">
CHRISTENING
</a>
</li>
<li>
<a href = "">
FURNITURE
</a>
</li>
<li>
<a href = "">
BEDDING
</a>
</li>
<li>
<a href = "">
DECOR
</a>
</li>
<li>
<a href = "">
LIGHTING
</a>
</li>
<li>
<a href = "">
SALE
</a>
</li>
<li>
<a>
BRANDS
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Contact Us Footer Dropdown -->
<div class = "col-sm-2">
<nav class = "navbar navbar-default" id = "bottomcontact">
<div class = "container">
<div class = "navbar navbar-header">
<button class = "navbar-toggle" data-toggle = "collapse" data-target = "#navbar-collapse">
<span class = "glyphicon glyphicon-plus"></span>
</button>
<h3>
Contact Us
</h3>
</div>
<div class = "collapse navbar-collapse">
<ul class = "nav nav-pills nav-stacked active">
<li>
<h6>
<b>
BEAUTIFUL BEGINNINGS
</b>
</h6>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class = "col-sm-2">
<h3>
Follow Us
</h3>
<button type="button" class="btn btn-fb"><i class="fa fa-facebook"></i></button>
</div>
</div>
</div>
If you remove the container it will work as you wish.
check the following:
<nav class = "navbar navbar-default" id = "bottomabout">
<div class = "navbar-header">
<button class = "navbar-toggle" data-toggle = "collapse" data-target = "#navbar-collapse">
<span class = "glyphicon glyphicon-plus"></span>
</button>
<h3 class = "text-center">
About Us
</h3>
</li>
<li class = "collapse navbar-collapse" id = "aboutcollapse">
<ul class = "nav nav-pills nav-stacked">
<li>
<a href = "">
OUR STORY
</a>
</li>
<li>
<a href = "">
BABY REGISTRY
</a>
</li>
<li>
<a href = "">
STORE LOCATOR
</a>
</li>
<li>
<a href = "">
TESTIMONIALS
</a>
</li>
</ul>
</div>
</nav>
I've looked over this code about ten times now and I can't seem to get the nav bar to work properly when on mobile. It just doesn't work when I click on it.
Edit: We're using React to render the navbar to the page. Added the entire JS file so you can take a look.
var NavLoggedIn = React.createClass({
render: function() {
return (
// <div className ="navcontainer">
// <nav>
// <a href='/index'>Index</a>
// <a href='/pod-search'>POD Search</a>
// <a href='/book-now'>Book Now</a>
// <a href='/current-bookings'>Current Bookings</a>
// <a href='/historic-bookings'>Historic Bookings</a>
// <a href='/contact-us'>Contact Us</a>
// <a href='/pod-profile'>pod profile</a>
// <a href='/my-profile'>My profile</a>
// <a href='/login'>Log In</a>
// </nav>
// </div>
< nav className = "navbar-fixed-top navbar-inverse"
id = "navColor" >
< div className = "container-fluid" >
< div className = "navbar-header" >
< button type = "button"
className = "navbar-toggle collapsed"
data - toggle = "collapse"
data - target = "#navbar"
aria - expanded = "false"
aria - controls = "navbar" >
< span className = "icon-bar" > < /span>
<span className="icon-bar"></span >
< span className = "icon-bar" > < /span>
</button >
< /div>
<div id="navbar" className="collapse navbar-collapse" >
<ul className="nav navbar-nav" id="center myNavbar">
<li id="color" >My Profile </li>
<li>POD Search</li>
<li>Current Bookings </li>
<li>Historic Bookings</li>
<li>Contact Us </li>
<li>Log Out </li>
</ul>
</div>
</div>
</nav>
)}
});
var NavLoggedOut = React.createClass({
render: function() {
return (
<div className ="navcontainer">
<nav>
<a href=' / pod - search '>POD Search</a>
<a href=' / contact - us '>Contact Us</a>
<a href=' / login '>Log In</a>
<a href=' / pod - profile '>pod profile</a>
</nav>
</div>
)}
});
var logged = true;
if (logged) {
ReactDOM.render(<NavLoggedIn />, document.getElementById('
navbar '));
} else {
ReactDOM.render(<NavLoggedOut />, document.getElementById('
navbar '));
}
Also when I click on the hamburger button so many times the nav bar vanishes.
Can anyone help me with this?
I had the same problem and worked for me when I switched the data-target field.
Try using this instead.
<nav class="navbar-fixed-top navbar-inverse" id="navColor">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav" id="center myNavbar">
<li id="color">My Profile
</li>
<li>POD Search
</li>
<li>Current Bookings
</li>
<li>Historic Bookings
</li>
<li>Contact Us
</li>
<li>Log Out
</li>
</ul>
</div>
I'm trying to create a basic bootstrap navbar that has a search bar in the middle of the bootstrap li elements. However, when I do this, it causes the text after the form to jump to the next line. I've tried messing with different classes, but I can't seem to figure this out. Below is an example of what's going wrong. Comment out the <form> and everything looks okay.
Here's the jsfiddle: http://jsfiddle.net/uyf2ddoc/
Thanks for the help!
<head>
<link rel= "stylesheet" href= "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" type="text/css">
<script src= "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id = "sidebar" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class = "navbar-header">
BookMaps
<button class = "navbar-toggle" data-toggle="collapse" data-target = ".navHeaderCollapse"><span class="glyphicon glyphicon-book"></span></button>
</div>
<div class = "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-left">
<li><a href = '#'>About</a></li>
<li><a href = '#'>Contact</a></li>
</ul>
<span class = "addBookSpan">
<form class="navbar-form">
<span class="input-group">
<input type="text" style="display:inline" class = "form-control inputAB" id="addBook" placeholder = "Add a Book" >
<span class="input-group-btn">
<button class="btn btn-default" id="addBookButton">Submit</button>
</span>
</span>
</form>
</span>
<ul style="display:inline" class = "nav navbar-nav navbar-left">
<li><a>BOOK</a></li>
</ul>
</div>
</div>
</div>
</body>