I am designing a menu using bootstrap3. It should look like the one shown in the picture. But I am unable to create a menu like that. I have tried creating one and the link to my design is https://codepen.io/irshad437/pen/EyQLVv.Some code is also shown below. But you must check it on Codepen.io (NOT LOOKING GOOD HERE)
<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="#">MyGrade <span class="circle-txt">Up</span></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>HOME</li>
<hr class="vertical" />
<li>EXPLORE</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<button type="submit" class="btn btn-default btn-rnd">Create Portfolio</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Anonymous <br />0 pts</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<img class="img-circle nav-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/677716/profile/profile-80_1.jpg" alt="?" class="img-round"/>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
.btn-rnd{
border-radius:10px;
}
.navbar-nav li{
margin-left:20px;
margin-right:20px;
}
.nav-img{
width:40px;
height:40px;
}
.vertical{
position:absolute;
width:1px;
height:25px;
color: black;
background-color:black;
display:inline-block;
}
.padding-8{
padding-top:8px;
}
.img-circle{
border: 1px solid black;
}
.circle-txt{
height: 40px;
width: 40px;
display: inline-block;
text-align: center;
vertical-align: -10px;
padding-top:8px;
border-radius: 50%;
background: white;
border-style:solid;
border-width:1px;
}
Problem: I am unable to fix the pixels at the proper position as shown in the design.
This should work fine, Have a look, here is the fix.
https://codepen.io/anon/pen/QEmZWR
HTML:
<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="#">MyGrade <span class="circle-txt">Up</span></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>HOME</li>
<hr class="vertical" />
<li>EXPLORE</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<button type="submit" class="btn btn-default btn-rnd">Create Portfolio</button>
</form>
<ul class="annon nav navbar-nav navbar-right">
<li>Anonymous <br />0 pts</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<img class="img-circle nav-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/677716/profile/profile-80_1.jpg" alt="?" class="img-round"/>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS:
.btn-rnd{
border-radius:10px;
}
.navbar-nav li{
margin-left:20px;
margin-right:20px;
}
.nav-img{
width:40px;
height:40px;
}
.vertical{
position:absolute;
width:1px;
height:25px;
color: black;
background-color:black;
display:inline-block;
}
.padding-8{
padding-top:8px;
}
.img-circle{
border: 1px solid black;
}
.circle-txt{
height: 40px;
width: 40px;
display: inline-block;
text-align: center;
vertical-align: middle;
padding-top:8px;
border-radius: 50%;
background: white;
border-style:solid;
border-width:1px;
}
a{
margin: 0px;
padding: 0px;
}
.navbar-nav li{
margin-top:10px;
}
.navbar-form .btn{
margin-top:10px;
}
.annon li{
margin:0px;
}
.navbar-nav .img-circle{
padding:0xp;
margin-top:13px;
}
Related
i already have a collapsible navbar but i have just issues with three things:
collapsible not returning back when clicked (if list is dropped down)
unnecessary underline
collapsible button is black
also added the navbar-toggle in navbar header so that they stay in the same row
any help would be appreciated thank you.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header logo">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="img/logo_png_solo.png">
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-left" id="nav-design">
<li>Home</li>
<li>FAQ</li>
<li>Membership</li>
<li>Cards</li>
<li>Settings</li>
<li>Login</li>
<li>Register</li>
</ul>
</div>
</nav>
JS Fiddle: https://jsfiddle.net/9txzarws/
Try this:
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
.logo img {
height: 50px;
transition: 5s;
}
.icon-bar {
background-color: black;
}
.navbar ul li a {
color: black;
text-align: center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<div class="bg-color-white strong">
<div class="container">
<br>
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header logo">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="https://via.placeholder.com/100x50.png">
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-left" id="nav-design">
<li>Home</li>
<li>FAQ</li>
<li>Membership</li>
<li>Cards</li>
<li>Settings</li>
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
You can try the following fiddle. Hope this will solve your mentioned issues
collapsible not returning back when clicked (if list is dropped
down)
unnecessary underline
collapsible button is black
Try this fiddle
<html >
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
.navbar {
background: white;
border: white;
}
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
.icon-bar{
background-color:#000
}
.logo img {
height: 50px;
transition: 5s;
}
.navbar-nav{
text-align:center;
}
.navbar-nav a{
color:#000;
font-weight:bold;
font-size:18px
}
</style>
<body>
<div class="bg-color-white strong">
<div class="container">
<br>
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header logo">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="img/logo_png_solo.png">
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-left" id="nav-design">
<li>Home</li>
<li>FAQ</li>
<li>Membership</li>
<li>Cards</li>
<li>Settings</li>
<li>Login</li>
<li>Register</li>
</ul>
</div>
</nav>
</div>
<div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> .
</script>
</html>
please I need advice. I am trying to move my logo in nav more to the right as I did with search form .navbar-right there is margin-right 150px, and I tried it also with .navbar-right included my logo and margin-left just don't work. When I have no div class navbar-right and trying to margin-left, it moves my nav to left also.
Would you be so kind and help me with this solution.
/* nav */
.navbar-right {
margin-right: 150px;
}
.navbar-left {
margin-left: 150px;
}
.nav {
margin-left: 500px;
position: static;
}
.navbar-brand {
margin-left: 150px;
}
.navbar-logo {
max-width: 200px;
max-height: 75px;
margin-top: 14px;
}
.form-control {
border-radius: 0px !important;
}
.btn {
border-radius: 0px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<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-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 class="navbar-left">
<img class="navbar-logo" src="img/logo.png">
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>About me</li>
<li>Portfolio</li>
<li>Services</li>
<li>Blog</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search website">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
You can change margin-left: 150px; in .navbar-left to your desired amount.
just use .navbar-left {padding:12px;}
You can increase padding-left on your logo element. Or you can make it on your navbar-left div
This is probably a simple CSS trick. I need an alert to fit inside the navbar after the home icon between the other icons which are pull-right.
The alert needs to fit inside the spot given.
Examples:
Desktop
Mobile
Current appearance:
CSS that affects the navbar:
.navbar {
margin-bottom: 0;
background-color: #396B99;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #396B99 !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
Current navbar HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage"><span class="glyphicon glyphicon-home logo-inverse"></span></a>
<!-- Where the alert should go? -->
<div class="alert alert-info">
<strong>Service Alert</strong> There is something wrong, and we need to alert you about it.
</div>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right text-uppercase">
<li>about</li>
<li>products</li>
<li>contact</li>
<li>recent news</li>
</ul>
</div>
</div>
</nav>
Hope this helps, threw together a quick bootstrap menu with an alert in it
.alert-float{
height: auto;
max-width: 500px;
top: 0;
margin: 0 auto;
}
/*the following just removes mobile scaling so I can properly show you the alert*/
.navbar-collapse.collapse{
display: block !important;
}
.navbar-nav>li, .navbar-nav{
float: left !important;
}
.navbar-nav.navbar-right:last-child{
margin-right: -15px !important;
}
.navbar-right{
float: right !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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>
</ul>
<div class="alert-float" style=" position: absolute; top: 0; left: 130px; right: 30px; z-index: 9999;width: 65%">
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
Test
</div>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
You just need to tweak the CSS stylign to get it to fit where you want. Mainly the display appearance should be inline-block.
After that, you might want to set max-widths so it doesn't spill over to the nav. Some media queries might be needed also.
Or try floating it left, and see what that looks like.
Can you make a JSFiddle?
JavaScript might work. Just add another link and hide it. Am using an error in this example for when the alert is shown.
<li>Alert!</li>
Example of JavaScript:
$("#alert").hide();
var error == false;
if (error == true){
$("#alert").show();
}
You can add the alert where you put your comment, using the navbar-text class
You can see it here in action
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage"><span class="glyphicon glyphicon-home logo-inverse"></span></a>
<p class="navbar-text">Put you alert HERE with class navbar-text</p>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right text-uppercase">
<li>about</li>
<!--<li>PORTFOLIO</li>-->
<li>products</li>
<!--<li class="dropdown">
<a class="dropbtn" data-toggle="dropdown" href="">
products
<span class="caret"></span>
</a>
<ul style="list-style:none !important; padding:0px 0px !important;" class="dropdown-content">
<li>CPR-Web</li>
<li>SC-Tracker</li>
<li>Page 1-3</li>
</ul>
</li>-->
<li>contact</li>
<li>recent news</li>
</ul>
</div>
</div>
</nav>
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
When my web page is shown on small devices the menu collapses as expected and when you click on the collapsed menu icon the drop down menu appears, again as expected. However when you click on the icon again the menu does not collapse as it should.
My Bootstrap code looks like this:
#myNavbar {
position: relative;
border:none;
}
#myNavbar .nav {
bottom: 0;
right: 0;
margin-bottom: -10px;
}
.navbar-nav.navbar-right:last-child {
margin-right: 0;
}
.navbar-default {
background:#FFFFFF;
border-left:none;
border-right:none;
border-top:none;
border-bottom:solid;
border-bottom-width:2px;
border-color:#01B6AC;
width:100% !important;
margin-right:0px;
padding-right:0px;
border-radius: 0 !important;
-moz-border-radius: 0 !important;
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img class="img-responsive" src="/assets/img/outa.png" width="120px;"/></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav pull-right">
<li>Saved searches</li>
<li>Settings</li>
<li>About</li>
<li>Sign In</li>
</ul>
</div>
</div>
</nav>
Anyone know what I am doing wrong?