I have implemented a piece of code. When the browser window decrease in size (width-ways) the menu tabs enter into a clickable Hamburger glyphicon.
I would like to maintain this feature, but add one navigation tab outside the glyphicon when the browser reduces in size.
How is this possible using bootstrap? I attempted to add another
<div class="navbar"> <ul class="nav navbar-nav"> <li> </li> </ul> </div>
prior to the one ID'd "mainNavBar" however this led to poor formatting, which I thought might be able to be fixed by floating the two divs next to each other, but I couldn't work out the code to do that.
Below is my code.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Navigation bar -->
<nav class="navbar navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="glyphicon glyphicon glyphicon-menu-hamburger"></span>
</button>
Markets
</div>
<!-- menu items -->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-right">
<li> About Us
</li>
<li> News
</li>
<li> Analysis
</li>
<li> Random Article
</li>
<li> Contact Us
</li>
</div>
</nav>
<!-- End Navigation Bar -->
</body>
</html>
Bootply: http://www.bootply.com/Vky1AGlU5F
CSS:
.still_on_view{
float: right;
}
HTML:
<nav class="navbar navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="glyphicon glyphicon glyphicon-menu-hamburger"></span>
</button>
<ul class="still_on_view nav navbar-nav">
<li> About Usb2
</ul>
Markets
</div>
<div>
</div>
<!-- menu items -->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-right">
<li> About Us
</li>
<li> News
</li>
<li> Analysis
</li>
<li> Random Article
</li>
<li> Contact Us
</li>
</div>
</nav>
Related
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 4 years ago.
I am working with the Bootstrap 4 default navbar and I just want to add a collapsing menu that is positioned on the right, not the left, when not collapsed.
I have tried adding text-right and float-right, but neither are actually moving the menu to the right.
Here is a bootply showing the issue.
Here also is a snippet, since StackOverflow wants me to use one, though I don't think it'll be wide enough to show the non-collapsed menu:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
<div class="collapse navbar-collapse float-right">
<ul class="nav navbar-nav">
<li class="active nav-item">Home
</li>
<li class="nav-item">About
</li>
<li class="nav-item">Contact
</li>
</ul>
</div>
</div>
</div>
Add ml-auto class to ul tag containing menu
<ul class="nav navbar-nav ml-auto">
<li class="active nav-item">
Homes
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Contact
</li>
</ul>
The element .collapse.navbar-collapse requires .justify-content-end class as it is positioned with flex (display: flex) and takes full remaining width of your navbar.
The other answers with .ml-auto are perfectly valid. The difference between these two is that .justify-content-end will make all elements inside navbar-collapse stick to the right, whereas .ml-auto will only do the same for the ones inserted after your ul.nav.nav-bar, so the ones on the left can still stick to the left. You can choose the one most appropriate to you, and feel free to combine these two for more sophisticated layouts.
Your updated Boolply can be found here.
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
<div class="collapse navbar-collapse justify-content-end">
<ul class="nav navbar-nav">
<li class="active nav-item">Home
</li>
<li class="nav-item">About
</li>
<li class="nav-item">Contact
</li>
</ul>
</div>
</div>
</div>
add .navbar-expand-md .navbar-collapse{
flex-direction: column-reverse;} in your style sheet. thanks
.navbar-expand-md .navbar-collapse{
flex-direction: column-reverse;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav ml-auto"> <!-- here -->
<li class="active nav-item">Home
</li>
<li class="nav-item">About
</li>
<li class="nav-item">Contact
</li>
</ul>
</div>
</div>
</div>
I want to create a gap above navigation bar for echo name like: Welcome Sarah! Kindly check the image what output I am getting:
In above image I want to echo Welcome Sarah above the Login | Sign Up buttons.
I want to show search bar above the Adidad Shoe Store Starting from let-top. And welcome Sarah on the right-end. Then navigation will show.
my code:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row float-right" >
// Search bar
<input type="text" placeholder="Search" name="search">
Hello Sarah!
</div>
</div>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Adidas Shoe Store</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navb" class="navbar-collapse collapse hide">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#" style="color:#007bff;">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 2</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#"><span class="fas fa-user"></span> Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="fas fa-sign-in-alt"></span> Login</a>
</li>
</ul>
</div>
</nav>
This is not working as expected because Bootstrap .fixed-top class assigns z-index value of 1030 and position:fixed at top to the nav.
As a result, the .container you added is displayed both behind and not above the nav.
The .container needs position other than static and z-index greater than 1030 to display above the nav. Additionally, the nav needs some padding-top to make visual space for the .container contents in this scenario.
The following structure and added CSS achieves the effect you're looking for:
<div class="container" style="position: relative; z-index: 1031; padding: .5rem 1rem;">
<div class="row">
<div class="col-sm-6">
<input type="text" placeholder="Search" name="search">
</div>
<div class="col-sm-6 text-right">
Hello Sarah!
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" style="padding-top: 2.5rem">
(I've thrown in two .col-sm-6 divs inside your .row to make things easier to arrange on mobile resolutions; also note that .container class is of limited width unlike nav so you should change it to .container-fluid)
I'm making a site in Bootstrap and I wanted to make two navigation menus.. So I coded this:
<?php require_once 'php/functions/edu_functions.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Gooyanet</title>
<link href="styles.css" rel="stylesheet"/>
<style type="text/css">
</style>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="css/head.css" rel="stylesheet"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body data-spy="scroll" data-target="#my-navbar">
<div id="wrapperDiv">
<div id="stickyNavigation">
<nav class="navbar navbar-default BHoma">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span></li>
<li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></li>
</ul>
<ul class="nav navbar-nav navbar-right BHoma">
<li>ورود به حساب کاربری</li>
<li>ایجاد حساب کاربری</li>
<li>همکاری به عنوان مترجم زبان</li>
</ul>
</div>
</div>
</nav>
</div>
<div id="searhBox">
<div class="row">
<div class="col-lg-4">
<div class="logo">
<a href="#">
<img alt="Brand" src="img/logo.png" width="150" height="30">
</a>
</div>
</div><!-- /.col-lg-6 -->
<div class="col-lg-8">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</div>
<div id="mainNavigation">
<nav class="navbar navbar-default">
<div class="container-fluid">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div><!-- /.container-fluid -->
</nav>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
So if you run this on an html document which connects to Bootstrap styles ,you will notice that everything works fine except when you minimize the screen to see how the menu navigations works in mobile devices...
I mean when I hover over the button of menu navigation 1 it works correctly:
1
But when I hover over the button of menu navigation 2, again it shows me the top menu rather that main menu items:
2
I don't know why this thing happens ,I also tried replacing codes with default menu navigation but wasn't useful yet!
So if you have any idea on this ,please let me know... thx!
Both navs have data-target="#bs-example-navbar-collapse-1"
You need to change the id and data target on one of your menus.
There are quite a few posts here about changing the Bootstrap CSS to make the header non-responsive.
But I have two headers, only one of which I want to be non-responsive, so I don't want to change it as a class:
One header has a login form, it works fine and collapses responsively exactly how I want it to.
The other is for a logged-in user and only has one link to log out, and I want to make this non-responsive. Here's how it looks now as the browser width changes, which is obviously not ideal:
And here's the code for the header I'd like to make non-responsive:
<nav class="navbar navbar-inverse navbar-fixed-top identHeader8">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="dashboard.html">[logotype]</a>
</div>
<div id="logout_navbar">
<ul class="nav navbar-nav pull-right collapse in">
<li>
Log out
</li>
</ul>
</div>
</div>
</nav>
Thanks in advance for any help you can provide.
You can use Non-nav Links (See Docs) and place it inside the header after the navbar-brand in this example.
<p class="navbar-text">Log In</p>
You can adjust to where is needed with your own CSS rules.
See example Snippet.
body {
padding-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">[logotype]</a>
<p class="navbar-text">Log In
</p>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Log out
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<img src="http://placehold.it/2050x850/ff0/fff" class="img-responsive">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel = "stylesheet" href="css/bootstrap-responsive.min.css">
</head>
<body>
<div class = "container">
<div class="navbar" >
<div class ="navbar-header">
<!-- Place your logo here -->
<div class="navbar-brand" >
<img src="images/logo.png" alt="logo text">
</div>
</div>
<button type="button" class="navbar-toggle navbar-right " data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"><hr><hr><hr></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class=" collapse navbar-collapse nav-collapse ">
<ul class="nav navbar-nav navbar-right">
<!-- Add require site page navigation -->
<li> <i class="icon-globe"></i>HOME</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" style="color:#000000"><i class="icon-user"></i>About Us<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>The Company</li>
<li>Vision</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" style="color:#000000"><i class="icon-user" style="color:#000000"></i>Team<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Meet Our Team</li>
<li>Our Sister concerns</li>
</ul>
</li>
<li><i class="icon-pencil"></i>Projects</li>
Refer
Contact Us
Web
Locate
</ul>
</div>
</div>
</div>
check the problem at www.alaknandainfra.com/refer.php the nav bar collapses suddenly in mobile view . i spent many hours but can't find the mistake . and i want to align the toggle menu on the right side . when user click on toggle button the menu should come on the right side
If you remove the height:0 at bootstrap-responsive.min.css:1240, that issue seems to be fixed.
.nav-collapse,.nav-collapse.collapse{
/* height:0; */
overflow:hidden
}