I have tryed this example:
html
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<h1>Home</h1>
css
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
}
http://jsfiddle.net/bdd9U/3/
from this page: Center content in responsive bootstrap navbar
and i wanted to add hover effect to nav list items like so:
http://jsfiddle.net/bdd9U/560/
but at the bottom it has some extra height and the hover effect cant take enough space. If we resize the screen to mobile size we can see that the header height is reduced by about 5px from the bottom. How to repair this issue?
It looks like display: inline-block is adding space after the navbar elements.
You can set a fixed height for the navbar.
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
height: 45px; /* Add */
}
}
Updated JSfiddle
Related
I am trying to do mobile responsive design for top navigation button. I have this problem when user click on the hamburger button, the background color will change to orange which has the color code of #e2ae15 to any color for example red.
When user clicks again it will change back to the default color which is the color code of #e2ae15.
May I know what should I do to make it change color. I tried many ways for example using css called active and focused , but none make it desirably result. One of the best example I could find is this website: https://sutd.edu.sg/ but must be in mobile mode
My Codes:https://codepen.io/anon/pen/eMwJYv
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<!-- Static navbar -->
<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="#navbar" aria-expanded="false" aria-controls="navbar" id"a">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Default <span class="sr-only">(current)</span></li>
<li>Static top</li>
<li>Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs ยป</a>
</p>
</div>
</div> <!-- /container -->
CSS:
.navbar-toggle {
border: none;
//background: transparent !important;
border: 0;
float: left;
padding: 18px;
margin: 0;
border-radius: 0;
background-color: #e2ae15 !important;
cursor:pointer
/*&:hover {
//background: transparent !important;
background: #e2ae15 !important;
}*/
.icon-bar {
width: 22px;
transition: all 0.2s;
}
.top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.middle-bar {
opacity: 0;
}
.bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
&.collapsed {
.top-bar {
transform: rotate(0);
}
.middle-bar {
opacity: 1;
}
.bottom-bar {
transform: rotate(0);
}
}
}
.red{
background-color:red;
}
Add a class(named my-class) to the nav tag so that u dont need important. then use that class to target the button.
Add this to your css
.my-class.navbar-default .navbar-toggle,
.my-class.navbar-default .navbar-toggle:hover
{
background-color: red;
}
.my-class .navbar-toggle.collapsed,
.my-class .navbar-toggle.collapsed:hover{
background-color: orange;
}
this will override the default styling of bootstrap.
When the drawer is open, the collapsed class is removed,then u can target the navbar-toggle class.
Updated codepen link
I have a bootstrap navbar. When a dropdown is expanded I would like to add a line break line under the dropdown and the last item in the list.
I have made a Bootply and attached an image to illustrate what I'm trying to do.
Here is my jQuery.
$('.dropdown.open .dropdown-toggle').append('<hr class="break-sec-w">');
Your hr should be wrapped within a div to take effect.
I tried modifying your code--
Try the dropdowns
Example
$(document).ready(function($) {
$('.hr_line').append('<hr class="break-sec-w">');
});
.break-sec-w {
width: 40px;
border-top: 1px solid red;
margin-top: 10px !important;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- Static navbar -->
<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="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Dropdown 2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li><div class="hr_line"></div></li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
<li><div class="hr_line"></div></li>
</ul>
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li><div class="hr_line"></div></li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
<li><div class="hr_line"></div></li>
</ul>
</li>
<li class="dropdown">
Dropdown 3 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li><div class="hr_line"></div></li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
<li><div class="hr_line"></div></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Default <span class="sr-only">(current)</span></li>
<li>Static top</li>
<li>Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div> <!-- /container -->
</body>
</html>
You could try CSS styling. nth-child
.nav> li:nth-child(2),
.nav> li:nth-child(7) {
content: "<hr>"
}
You may need to change the classes which i have used in the example.
You can override some css if you need some extra styling such as:
.navbar-nav .open ul.dropdown-menu{
border-radius:0px;
border:solid 1px red;
border-width:1px 0;
}
Updated Bootply.
You could do that in many ways, but i'm pretty sure that you shouldn't use hr for that. Underline effect done via border, or after selectors will do the job :)
Examples with border:
Class for the element that needs to be separated from the rest and then css for that like
.classname{
border-bottom: 1px solid #colorHex;
}
Select certain elements that needs to get the underline effect:
.nav>li:nth-child(2),
.nav>li:nth-child(7){
border-bottom: 1px solid #colorHex;
}
Example with the after selector:
.className{
position: relative;
}
.className:after{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: #yourHex
}
Hope it helps :)
Here is solution using :after pseudo-element:
No javascript
.navbar-nav .open .dropdown-toggle:after {
content: ' ';
width: 10%;
height: 1px;
background-color: red;
display: block;
margin: 5px auto;
}
here is bootply
Here's a version based on your code, using just border:
/* CSS used here will be applied after bootstrap.css */
hr.break-sec-w {
width: 40px;
/* color: #fff !important; */
border-top: 1px solid #fff;
margin-top: 10px !important;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
color: #555;
background-color: transparent;
}
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
text-align: center;
}
.navbar-nav {
margin: 7.5px -15px;
text-align: center !important;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
color: #555;
background-color: transparent;
}
#navbar a{
display: inline-block;
}
.dropdown>a {
border-bottom: 1px solid #f00;
display: block;
}
.dropdown li:last-child a{
border-bottom: 1px solid #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<!-- Static navbar -->
<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="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Dropdown 2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</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>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Dropdown 3 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Default <span class="sr-only">(current)</span></li>
<li>Static top</li>
<li>Fixed top</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
<!-- /container -->
When navbar collapse (when it shows the toggle icon), the menu (home, services, portfolio, about,contact) is over the logo. If I take the position:absolute from the logo (nag-bar-brand) the menu appears in the center. If there away to have the menu below the logo. I hope you understand my question. English is not my first language. Thank you.
HTML
<!--navbar-->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>`enter code here`
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img id="brand-image" src=""><img src="images/logo.png" class="img-responsive" alt="website logo">
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Service</li>
<li>Portfolio</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</div><!--end navbar-->
css:
.navbar {
background-color:#FFF;
border-radius: 0 px;
min-height: 85px;
}
.navbar-nav{
padding-top: 20px;
letter-spacing: 0.05em;
}
.navbar-nav > li{
padding-left:20px;
}
.navbar .nav >li > a:hover{
color: #19bcb9;
}
.navbar-brand{
position:absolute;
}
If the image is too big this will happen. Limit the image with max-height max-width
simply put the image size to 100%. this should work!
.img {
img-size:100%;
}
Here's my fiddle of my html/bootstrap code.
<body>
<h1 style="text-align:center">AntwerPay</h1>
<!--Navbar-->
<nav class="navbar navbar-inverse">
<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>
</button>
<a class="navbar-brand" href="#">AntwerPay</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Gebieden
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Gebied 1</li>
</ul>
</li>
<li>Alle Gebieden</li>
</ul>
</div>
</div>
</nav>
</body>
As you can see in my navbar everything is aligned real nicely to the left. This is a problem for me. I want the navbar-brand to be on the left, and i want the 3 other buttons to be centered. I have researched this a lot and found various .css codes but none worked for me.
You can do this using CSS, I've included a suggestion for manually adjusting the position of the items:
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
/* You'd have to adjust this whenever an item is added to the nav-bar */
margin-right: 10%;
}
.navbar .navbar-collapse {
text-align: center;
}
This has been answered already here
Along with your (Again) updated fiddle here
use this snippet
.navbar-bav { float: none !important; text-align:center; }
.navbar-nav > li { display:inline-block; float: none !important; }
Updated fiddle
Remember
If you do NOT know how to make the navbar responsive, then implement the codes above in a #media (min-width: 768px) query in order not to fail the responsiveness of Bootstrap Navbar.
Hope this works for you:
#myNavbar {
text-align: center;
}
.navbar-nav {
margin: 0 auto;
display: inline-block;
float: none;
}
Make shure to keep an eye on the mobile view.
I'm using Bootstrap 3 to construct a responsive menu like so:
Logo Link 1 Link 2 Link 3 Link 4 (scales down to toggle in smaller devices)
The following does that, except when I choose to go with a larger logo image (440px by 140px) two problems occur 1) The navigation menu items rise to the top 2) In smaller devices, the logo doesn't seem to be responsive (doesn't scale down to fit screen)
Desktop view:
Mobile view:
My goals are 1) logo and links aligned vertically on the same line 2) logo scales down to smaller size to make room for navigation toggle
<div class='jumbotron grey-bg'>
<div class='container-fluid'>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav-bar">
<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="#">My Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-nav-bar">
<ul class="nav navbar-nav">
<li>Home</li>
<li class='active'><a href='#'>Link 2</a></li>
<li>Link 3</li>
<li><a href='#'>Link 4</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div><!-- /.container-fluid -->
</div><!--- end jumbotron -->
/* logo */
.navbar-brand {
width: 440px;
height: 140px;
background: url(img/logo.jpg) no-repeat;
text-indent: -999px;
padding: 0px;
margin: 0px;
}
/* end */
/* navigation */
.navbar-default {
border: none;
padding: 0 0 60px 0;
}
.navbar-default .navbar-nav>li>a {
color: #666;
padding: 11px 0;
text-align: center;
}
.navbar-default .navbar-nav>li>a:hover {
text-decoration: underline;
color: #666;
}
/* end */
img {
display: block;
height: auto;
max-width: 100%;
}
If you want the image to be responsive, don't make it a background image (include in html) and add the class "img-responsive":
<a class="navbar-brand" href="#"><img src="img/logo.jpg" class="img-responsive"></a>