The navigation bar contains the brand image between menu options. When in responsive mode, resizing the menu options appear above the image logo.
I think that an option will be to convert it to toggle navigation-bar. Is there any another option?
The code:
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar9">
<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="brand-centered">
<a class="navbar-brand" href="index.html"><img style="margin-right: 10px; padding: 0;" src="https://www.w3schools.com/images/w3schools_green.jpg"/></a>
</div>
<div id="navbar9" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>MENU OPTION EXAMPLE</li>
<li>MENU OPTION EXAMPLE</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>MENU OPTION EXAMPLE</li>
<li>MENU OPTION EXAMPLE</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
The css:
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: auto;
padding: 0px;
width: 60px;
}
.brand-centered {
display: flex;
justify-content: center;
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.brand-centered .navbar-brand {
display: flex;
align-items: center;
}
.navbar-toggle {
z-index: 1;
}
https://jsfiddle.net/dcodesys/5zLt9e5b/
You should try this one. I'm not sure if this is what you expected.
Let me know later if this meets your expectation.
The logo & menu positions on navbar :
Small device (smartphone and tablet) => logo on the left side & menu on the toggle-collapsed bar.
Large device (desktop) => logo on the left side & menu on the right side
a.navbar-brand {
padding: 10px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" class="img-responsive" src="https://cdn2.iconfinder.com/data/icons/pretty-office-part14-2/256/logo_yellow-32.png">
</a>
<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>
<!-- 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 class="active">Home</li>
<li>About</li>
<li>Career</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</body>
</html>
Related
Hi I'm playing around with a bootstrap theme. Here the problem was navbar-brand image is not vertically align center with the navbar.
Live demo
<div class="row">
<div class="nave_menu">
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="./images/Agrocell.png" alt="" style="max-width:140px;">
</a>
<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>
<!-- 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 class="active">Home</li>
<li>FEATURES</li>
<li>ABOUT US</li>
<li>PRODUCTS</li>
<li>CONTACT</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>
Remove .container-fluid { margin-top: 20px; } from style.css and add #bs-example-nav-collapse-1 { margin-top: 20px;}
You can fix this by new feature of CSS3 flexbox, for that you need to apply some CSS on your classes.
.container-fluid {
display: flex;
align-items: center;
}
.navbar-brand {
padding: 0 15px; // for remove top padding
}
.collapse.navbar-collapse {
margin-left: auto;
}
from that your navbar is vertically center.
I'm using a fixed navbar on my website. The problem I have right now is whenever I increase the height of the logo, the logo goes outside parent navbar. I'm wanting to change that behavior so that navbar increases its height to adapt to new children height so that logo stays contained.
.logo {
max-height: 75px;
padding: 1%;
padding-top:2.35%;
}
.navbar-brand {
padding: 0px !important;
}
.navbar-brand .logo{
display:inline !important;
}
.navabar-custom{
background: black !important;
/*opacity:0.8;*/
}
.navabar-custom a{
color:white !important;
}
.icon-bar{
background:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top navabar-custom" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class="navbar-brand" href="index.php">
<img class="logo" alt="logo" src="https://upload.wikimedia.org/wikipedia/commons/4/41/SEGA_logo.png">
</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 navbar-right">
<li>
About Us
</li>
<li>
Contact Us
</li>
<li class="dropdown">
Services
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
.navbar-brand (parent of .logo) has fixed height of 50px. Just set it to auto
.logo {
max-height: 75px;
padding: 1%;
padding-top:2.35%;
}
.navbar-brand {
padding: 0px !important;
height: auto !important; /******* add this *******/
}
.navbar-brand .logo{
/*display:inline !important;*/
/* this is not needed */
}
.navabar-custom{
background: black !important;
/*opacity:0.8;*/
}
.navabar-custom a{
color:white !important;
}
.icon-bar{
background:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top navabar-custom" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class="navbar-brand" href="index.php">
<img class="logo" alt="logo" src="https://upload.wikimedia.org/wikipedia/commons/4/41/SEGA_logo.png">
</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 navbar-right">
<li>
About Us
</li>
<li>
Contact Us
</li>
<li class="dropdown">
Services
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
i added at my hoe page a navbar with toggable icon on small screen; It is the typical navbar of bootstrap.
I have the problem that when i go on developer tool and resize the screen in order to test the responsive part, happen that the icon doesn't toggle, it is like is not active.
Any help?
Here is the code:
<nav id="header" class="navbar navbar-default">
<div class="container">
<!-- 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="#navmenu" aria-expanded="false" aria-controls="navmenu">
<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="#"><img id="logo" src="images/art-of-hair.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navmenu" class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">Home</span></li>
<li>Hair Styles</li>
<li class="">About</li>
<li class="">Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
and css:
* {
margin: 0;
}
body {
font-family: 'Alice', serif;
}
#header {
height:200px;
}
#logo {
width: 300px;
height:150px;
}
#navmenu {
margin:30px 120px 0 0;
}
In case of toggle, I guess you also need some jQuery to make the toggle function.
Maybe try something like this:
<script>
$("button").click(function(){
$("#navmenu").slideToggle();
});
</script>
Currently I'm learning Bootstrap 3 and I need help with re-order the layout of navbar in small screen.
I've followed the example in LINK
I've replaced Default / Static / Fixed with user profile
So what I want to change is when the screen is small I will have
|---------- BRAND ----------|
|[-]----------------------profile|
Here is my sample code:
#media (max-width: 767px) {
.navbar-brand {
width: auto;
float: none;
border-bottom: 0 solid transparent;
margin: 0 -15px;
}
.navbar-toggle {
float: left;
}
.nav-user-profile .navbar-nav {
margin: 0;
}
.nav-user-profile .navbar-nav>li {
position: static;
float: left;
}
.nav-user-profile .navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
line-height: 20px;
}
}
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-brand">Brand</div>
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="nav-user-profile navbar-right">
<ul class="nav navbar-nav">
<li>Profile</li>
</ul>
</div>
</div>
</nav>
How can I achieve it?
Thanks for ideas
I think this is what you're trying to do based on your diagram. Probably the simplest way to go is to create a div above the navbar for a second brand location. You can hide one or the other brand location with a hidden/visible class. And the profile link can be placed inside the navbar-header so it's visible across all viewports, it just needs to be positioned correctly on the right and the navbar-toggle floated to the left.
See working Snippet.
header {
text-align: center;
background: #f5f5f5;
width: 100%;
height: 50px;
padding: 15px 15px;
}
header .header-brand {
color: #777;
font-size: 18px;
line-height: 20px;
}
header .header-brand:focus,
header .header-brand:hover {
text-decoration: none;
color: #5e5e5e;
}
.navbar .btn.profile-btn,
.navbar .btn.profile-btn:hover,
.navbar .btn.profile-btn:focus {
float: right;
right: 0;
position: absolute;
margin-top: 10px;
background: none;
border: none;
}
#media (max-width: 767px) {
.navbar .navbar-toggle {
float: left;
margin-left: 15px;
}
}
<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" />
<header class="visible-xs-block"> <a class="header-brand" href="#">Brand</a>
</header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" 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 hidden-xs" href="#">Brand</a>
<button type="button" class="btn btn-default profile-btn">Profile</button>
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-left">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
I only added text-right very simple look where I noted with //changes*
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-brand">Brand</div>
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
//changes*
<ul class="nav navbar-nav text-right">
//changes*
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="nav-user-profile navbar-right">
<ul class="nav navbar-nav">
<li>Profile</li>
</ul>
</div>
</div>
</nav>
pull-right class may help you...
or
bootstrap is divided to 12 columns for large, medium and small size
So when it breaks into small size give brand to full 12 columns using col-sm-12 class so it will break profile to down
I need to expand my searchbar 'navbarSearchQuery' so that it's bigger (~280px) when the page is larger then a phone size.
And when it's a phone I want it to span across the whole top of the page when the page gets shrunk down.
Here is what I've tried and a fiddle example.
I'm having a problem with too much space in between the search bar and the 'browse' dropdown in a size greater then a phone. And I can't seem to get the width set right on the searchbar when it's in a phone size.
#navbarSearchQuery {
float: left;
margin-top: 8px;
margin-left: 15px;
width: 280px;
}
.navbar-inline {
display: inline-flex;
width: 80%
}
<nav class="navbar navbar-default navbar-fixed-top">
<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">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-inline">
<a class="navbar-brand hidden-xs" href="/Home">Yoga</a>
<input type="text" class="form-control" placeholder="Search" id="navbarSearchQuery" name="location">
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Browse <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Popular
</li>
<li>Friends
</li>
<li>Groups
</li>
<li>Neighborhoods
</li>
<li>About <span class="sr-only">(current)</span>
</li>
<li>Contact
</li>
</ul>
</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Use media queries to adjust for it.
.navbar-default #navbarSearchQuery {
float: left;
margin: 8px 15px 0 15px;
width: 280px;
}
.navbar-default .navbar-inline {
display: inline;
}
#media (max-width: 360px) {
.navbar-default #navbarSearchQuery {
width: 180px;
}
.navbar-default .navbar-inline {
display: inline-flex;
width: 60%
}
}
<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-default navbar-fixed-top">
<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"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-inline"> <a class="navbar-brand hidden-xs" href="/Home">Yoga</a>
<input type="text" class="form-control" placeholder="Search" id="navbarSearchQuery" name="location">
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown"> Browse <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Popular
</li>
<li>Friends
</li>
<li>Groups
</li>
<li>Neighborhoods
</li>
<li>About <span class="sr-only">(current)</span>
</li>
<li>Contact
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
On the same basis as the other answer of using media queries. The difference is mine has a different response on a mobile device.
http://jsfiddle.net/nefvrf6j/5/
#navbarSearchQuery {
margin:8px 15px;
}
.navbar-inline {
display: inline-flex;
/* This makes the search bar stretch across the whole screen except
for the drop down menu area */
width:calc(100% - 59px);
}
#media screen and (min-width: 360px) {
#navbarSearchQuery {
width:280px;
}
}