I am trying to push down my content whenever a user selects a links with a drop down menu. However, when clicked the dropdown goes over the content rather than pushes it down.
I have tried using position: relatives/position: absolute, etc to achieve some sort of desired result, but no such luck. I have seen other similar questions pertaining to this problem but it still has not helped me.
Any help in solving this problem would be greatly appreciated.
My HTML and CSS
body {
margin: 0;
padding: 0;
font-family: "Helvetica", "Arial", sans-serif;
font-weight: 500;
font-style: normal;
font-size: 12px;
line-height: 1.5;
}
.navbar-default {
background-color: #ffffff;
}
.navbar {
min-height: 65px;
padding-top: 5px;
margin-bottom: 0px;
border-bottom: solid 2px #eee;
}
.navbar-header {
margin-top: -12px;
}
.navbar-brand {
padding-top: 0px !important;
}
/* for button placement*/
.navbar-toggle {
margin-top: 26px;
}
/*for collapsed navbar*/
.navbar-collapse {
margin-top: 12px;
}
.site-logo {
max-width: 135px;
min-width: 120px;
}
.navbar-default .navbar-nav>li>a {
text-transform: uppercase;
background-color: #ffffff !important;
color: #333333;
}
.navbar-default .navbar-nav>li>a:hover {
color: #3381d0;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
background-color: #ffffff;
border-bottom: 2px solid #ff5d1c;
color: #ff5d1c;
bottom: -2px;
}
.nav>li {
position: static !important;
}
/* For navbar dropdown*/
.navbar .dropdown-menu {
min-width: 1349px;
width: 100%;
height: 120px;
margin-top: 51px;
z-index: 1;
left: 0;
text-align: center;
padding-right: 10px;
position: absolute;
list-style-type: none;
border-top: 2px solid #ff5d1c;
border-bottom: 2px solid #333333;
border-right: #ffffff;
border-radius: 0;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
border-left: 0;
background-color: #337ab7;
}
.dropdown-menu {
padding-left: 10px;
padding-right: 10px;
position: relative;
list-style-type: none;
}
.navbar .dropdown-menu li {
margin: 0;
padding: 0;
display: inline-block;
}
.dropdown-menu>li>a {
color: #ffffff;
line-height: 75px;
padding: 3px;
}
.dropdown-menu>li>a:hover {
color: #333333 !important;
}
.dropdown-menu>li>a:hover {
color: #ffffff;
background-color: #337ab7;
}
.m-pub {
display: inline-block;
margin: 3px 40px 0;
font-size: 13px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: .14em;
color: white;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
position: relative;
}
.m-pub:after,
.m-pub:focus {
color: #ffffff;
background-color: #337ab7;
}
.dropdown-menu li .m-pub:hover:after {
content: '';
position: absolute;
left: 50%;
margin-left: -10px;
margin-top: 55px;
border-left: 0;
border-bottom: 17px solid transparent;
border-top: 17px solid transparent;
border-left: 14px solid #333333;
transform: rotate(-90deg);
background: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" crossorigin="anonymous"></script>
<body>
<nav class="navbar navbar-default navbar-static-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>
<a class="navbar-brand" href="#">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="nav">
<li class="nav-link active">Link</li>
<li class="nav-link">Link</li>
<li class="nav-link">Link</li>
<li class="dropdown">
Drop-Down Menu<i class="fa fa-angle-down flipped"></i>
<ul class="dropdown-menu" id="menu">
<li class="nav-link">
<i class="fa fa-microphone fa-2x"></i>Option
</li>
<li class="nav-link">
<i class="fa fa-newspaper-o fa-2x"></i>Option
</li>
</ul>
</li>
<li class="nav-link">Link</li>
<li class="nav-link">Link</li>
</ul>
</div>
</div>
</nav>
<div class="container" style="background: red;height:100px; width: 100%;">
</div>
</body>
I have provided a jsfiddle:
JSFiddle
Your issue, as you suspected, is the positioning. Unfortunately, if you use position: absolute, .dropdown-menu is removed from the flow of the document, winding up on top of anything beneath it rather than moving it out of the way. If you use position: relative it forces it's parent to resize messing up your menu. As far as I know there is no solution to this problem with pure CSS. However, there is a few solutions with javascript, and since JQuery is already being used by bootstrap, we can just use that.
In order to move the content down when dropdown-menu is clicked you need to change either .container, the content, itself, or the parent/grandparent element that the dropdown-menu is relative to. I chose to add margin-bottom the grandparent, which in this case, is the nav element. You could just as easily add margin-top to .container. Either way you need to set the margin equal to the height of .dropdown-menu which is set to 120px. I created the following rule to achieve this:
nav.navbar.open {
margin-bottom: 120px;
}
The extra class .open will be added by JQuery when li.dropdown is clicked. I just used this quick bit of JQuery to acomplish this:
$("li.dropdown").click(function() {
$("nav.navbar" ).toggleClass( "open");
});
That's all that is needed. When li.dropdown is clicked a .open is added to the nav element which increases its bottom margin to the same height of .dropdown-menu. The margin doesn't affect .dropdown-menu since it's absolutely positioned and instead only pushes down .container just as if .dropdown-menu was not removed from the document flow. The reason for using li.dropdown and not #menu-trigger (the link itself) is because if you use the link, and then click on .dropdown-menu the menu is dismissed, but the margin remains. By using the parent of dropdown-menu the click event is still registered whenever a child of the parent is clicked. If a sibling is used then the trigger doesn't happen.
$("li.dropdown").click(function() {
$("nav.navbar").toggleClass("open");
});
body {
margin: 0;
padding: 0;
font-family: "Helvetica", "Arial", sans-serif;
font-weight: 500;
font-style: normal;
font-size: 12px;
line-height: 1.5;
}
.navbar-default {
background-color: #ffffff;
}
.navbar {
min-height: 65px;
padding-top: 5px;
margin-bottom: 0px;
border-bottom: solid 2px #eee;
}
.navbar-header {
margin-top: -12px;
}
.navbar-brand {
padding-top: 0px !important;
}
/* for button placement*/
.navbar-toggle {
margin-top: 26px;
}
/*for collapsed navbar*/
.navbar-collapse {
margin-top: 12px;
}
.site-logo {
max-width: 135px;
min-width: 120px;
}
.navbar-default .navbar-nav > li > a {
text-transform: uppercase;
background-color: #ffffff !important;
color: #333333;
}
.navbar-default .navbar-nav > li > a:hover {
color: #3381d0;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
background-color: #ffffff;
border-bottom: 2px solid #ff5d1c;
color: #ff5d1c;
bottom: -2px;
}
.nav>li {
position: static !important;
}
/* For navbar dropdown*/
.navbar .dropdown-menu {
min-width: 1349px;
width: 100%;
height: 120px;
margin-top: 51px;
z-index: 1;
left: 0;
text-align: center;
padding-right: 10px;
position: absolute;
list-style-type: none;
border-top: 2px solid #ff5d1c;
border-bottom: 2px solid #333333;
border-right: #ffffff;
border-radius: 0;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
border-left: 0;
background-color: #337ab7;
}
.dropdown-menu {
padding-left: 10px;
padding-right: 10px;
position: relative;
list-style-type: none;
}
.navbar .dropdown-menu li {
margin: 0;
padding: 0;
display: inline-block;
}
.dropdown-menu > li > a {
color: #ffffff;
line-height: 75px;
padding: 3px;
}
.dropdown-menu > li > a:hover {
color: #333333 !important;
}
.dropdown-menu > li > a:hover {
color: #ffffff;
background-color: #337ab7;
}
.m-pub {
display: inline-block;
margin: 3px 40px 0;
font-size: 13px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: .14em;
color: white;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
position: relative;
}
.m-pub:after,
.m-pub:focus {
color: #ffffff;
background-color: #337ab7;
}
.dropdown-menu li .m-pub:hover:after {
content: '';
position: absolute;
left: 50%;
margin-left: -10px;
margin-top: 55px;
border-left: 0;
border-bottom: 17px solid transparent;
border-top: 17px solid transparent;
border-left: 14px solid #333333;
transform: rotate(-90deg);
background: none;
}
nav.navbar.open {
margin-bottom: 120px;
}
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-default navbar-static-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>
<a class="navbar-brand" href="#"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="nav">
<li class="nav-link active">Link
</li>
<li class="nav-link">Link
</li>
<li class="nav-link">Link
</li>
<li class="dropdown">
Drop-Down Menu<i class="fa fa-angle-down flipped"></i>
<ul class="dropdown-menu" id="menu">
<li class="nav-link">
<i class="fa fa-microphone fa-2x"></i>Option
</li>
<li class="nav-link">
<i class="fa fa-newspaper-o fa-2x"></i>Option
</li>
</ul>
</li>
<li class="nav-link">Link
</li>
<li class="nav-link">Link
</li>
</ul>
</div>
</div>
</nav>
<div class="container" style="background: red;height:100px; width: 100%;">
</div>
<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.5/js/bootstrap.min.js"></script>
</body>
The snippet is small enough that it engages the mobile view, so you'll need to view it in full screen. Or you can check out the codepen.
As a note of caution, some of the stylings you have added for .dropdown-menu break the mobile version, so you may want to take a look at them, or add some media queries to fix them up a bit.
Use bootstrap accordion, it uses bootstrap css and you can use a single accordion item as a drop down to push content down, this is bootstrap code so you can just copy and depending on whether you want it closed or opened just use class="collapse" or class="show" respectively. use accordion as a dropdown wherever you want it in your navigation bar
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
</div>
</div>
</div>
Related
I have a navbar in asp.net mvc web application and when I hover on it I Want background to occupy all space but at some of the list Items it does not occupy spaces at the bottom as You can see in the image
li elements of services, signup and login occupying all spaces at the bottom but Home and aboutUs are not. i tried margin:0; at li element but nothing happens.
.navbar {
font-size: 1.25em !important;
box-shadow: 0px 0px 3px 0.5px black;
border : none;
}
.navbar-inverse {
background-color: #00ff99 !important;
}
.navbar-toggle {
background-color: #00804d;
}
.navbar-inverse .navbar-brand {
color: #000099 !important;
font-family: 'Brush Script MT' !important;
font-size: 1.50em !important;
font-weight: 400 !important;
text-shadow: 5px 5px 5px black !important;
}
.navbar-nav li{
margin:0;
}
.navbar-inverse .navbar-nav > li > a {
color: black;
}
.navbar-inverse .navbar-nav > li > a:hover, .Dropdown-btn:hover, .Dropdown-btn:focus {
/*background-color: #8080ff;*/
background-color: rgba(128, 128, 255,0.5) !important;
color: white important;
}
.glyph-pad {
left: -4px;
top: 4px;}
.Dropdown-btn {
cursor: pointer;
font-size: inherit;
border: none;
outline: none;
color: black;
font-family: inherit;
background-color: inherit;
padding: 13px 13px;
margin: 0;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: #00ff99;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-menu > li > a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
ul.dropdown-menu > li > a {
color: black !important;
}
ul.dropdown-menu > li > a:hover {
background-color: rgba(128, 128, 255,0.5) !important;
color: white !important;
}
.dropdown-menu > li > a:hover {
/*background-color: #8080ff;*/
background-color: rgba(0, 255, 153,0.8);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="navbar navbar-inverse navbar-fixed-top">
<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>
E-HealthCare
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
<div class="dropdown">
<button class="Dropdown-btn btn-block text-left dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="false">
Services
<span class="caret"></span>
</button>
</div>
</li>
<li>About Us</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<Span class="glyphicon glyphicon-user"></Span> Sign Up
</li><li>
<Span class="glyphicon glyphicon-log-in"></Span> Login
</li>
</ul>
</div>
</div>
</div>
This is working codepen link
i'm trying to change the width of my navbar which is fixed and also has a navbar-collapse property that i want to keep when screen size changes.
I also added in the Bootstrap i am using for this page, so at the moment with the code below, the navbar is fixed but is full width, it collapses when you change to mobile site, so the only thing i want is to change the width from full width so that there is atleast 30% open space on either side of the navbar so it will be centred to the page.
and also adding a logo/image to the navbar only when its collapsed
Hope you can help me!
<html>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.navbar-nav.nav-justified > li{float:none; }
.navbar{
background-color:white;
font-family: Amatic SC;
border:none;
font-size: 25px;
letter-spacing: 1px;
text-align:center;
}
.navbar:hover,
.navbar:active {
color: black;
transition: background-color 0.3s ease-oin,
color 0.3s ease-out;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: black;
}
#media (max-width: 981px) {
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0%;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
</style>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" "col-xs- col-xs-offset-0 col-md-6 col-md-offset-3" >
<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 class="navbar-collapse collapse" style="text-align:center" >
<ul class="nav navbar-nav nav-justified">
<li id="scrollDetails">Details</li>
<li id="scrollDirections">Directions</li>
<li id="navRsvp">RSVP</li>
<li id="scrollBucket">Bucket List</li>
<li id="scrollAccommodation">Accommodation</li>
</ul>
</div>
</nav>
</body>
</html>
You have to modify the width and centrally align your code in the media queries for the expected behaviour in mobile view.
You have to add the following css:
#media (max-width: 981px) {
.navbar {
width: 30%;
margin: auto;
}
}
Refer code:
.navbar-nav.nav-justified > li {
float: none;
}
.navbar {
background-color: white;
font-family: Amatic SC;
border: none;
font-size: 25px;
letter-spacing: 1px;
text-align: center;
}
.navbar:hover,
.navbar:active {
color: black;
transition: background-color 0.3s ease-oin, color 0.3s ease-out;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: black;
}
#media (max-width: 981px) {
.navbar {
width: 30%;
margin: auto;
}
.navbar-left,
.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-fixed-top {
top: 0%;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in {
display: block !important;
}
}
<nav class="navbar navbar-inverse navbar-fixed-top col-xs-offset-0 col-md-6 col-md-offset-3">
<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 class="navbar-collapse collapse" style="text-align:center">
<ul class="nav navbar-nav nav-justified">
<li id="scrollDetails">Details
</li>
<li id="scrollDirections">Directions
</li>
<li id="navRsvp">RSVP
</li>
<li id="scrollBucket">Bucket List
</li>
<li id="scrollAccommodation">Accommodation
</li>
</ul>
</div>
</nav>
I'm working on a profile website for myself and have a 'decent' concept up and running.
However it seems as if my navbar's data-spy either isn't firing off or if there is something wrong with my html / css.
This is a pen with the html / css.
This is the body (relevant data-spy reference):
<body data-spy="scroll" data-target="#navbar" data-offset="50">
This is how I've set up the navbar:
<nav id="navbar" class="collapse navbar-collapse">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navBar-target" class="navbar-toggle">
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
</button>
</div>
<div class="collapse navbar-collapse" id="navBar-target">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#top" > About </a>
</li>
<li>
<a href="#portfolio" > Portfolio </a>
</li>
<li class>
<a href="#contact" > Contact </a>
</li>
</ul>
</div>
</nav>
And here is some of the relevant css:
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
color: #333;
background-color: black;
}
.navbar-nav>li>a {
color: #000000 !important;
}
#navbar {
margin: 12px 0;
}
.navbar-default .navbar-toggle {
border-color: #ddd;
}
.navbar-toggle {
position: relative;
float: right;
padding: 9vw 10vw
margin-top: 8vw;
margin-right: 15vw;
margin-bottom: 8vw;
background-color: transparent;
background-image: none;
border: 1vw solid transparent;
border-radius: 4vw;
}
.navbar-default .navbar-collapse {
border-color: #e7e7e7;
}
.nav>li {
height: 100%;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}
.nav>li>a:focus,
.nav>li>a:hover {
text-decoration: none;
color: #722872;
background-color: #FFFFFF;
}
.nav>li a:hover {
color: #722872;
background: #FFFFFF;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.1);
}
As mentioned, a full working example is on the code-pen
Seems Bootstrap doesn't include a default style for the active nav element. Need to create a style for .navbar-nav>.active>a
Disclaimer: Pardon my stupidity when it comes to coding. I started learning last week.
I have been tinkering around with a Bootstrap 3 template from a Youtube tutorial I found to assist me in learning HTML, CSS, and eventually Java. In this example I'm working on, I am trying to get the inline unordered list to float to the right of the page. I tried adding float:right to most of the navbar elements in the CSS, but it's not doing anything for me. Any help would be greatly appreciated.
HTML:
<div class="navbar navbar-fixed-top">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="images/logo.png" alt="Your Logo"></a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li class="inactive">
Photos
</li>
<li class="inactive">
Videos
</li>
<li class="inactive">
Contact Us
</li>
</ul>
</div><!-- end nav-collapse -->
</div><!-- end container -->
</div><!-- end navbar -->
CSS:
.navbar {
position: relative;
min-height: 50px;
padding-right: 15px;
padding-left: 15px;
margin-bottom: 20px;
background-color: #eeeeee;
border-radius: 4px;
}
.navbar:before,
.navbar:after {
display: table;
content: " ";
}
.navbar:after {
clear: both;
}
.navbar:before,
.navbar:after {
display: table;
content: " ";
}
.navbar:after {
clear: both;
}
.navbar-nav {
margin-top: 10px;
margin-bottom: 15px;
}
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
line-height: 20px;
color: #777777;
border-radius: 4px;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
color: #333333;
background-color: transparent;
}
.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
color: #555555;
background-color: #d5d5d5;
}
.navbar-nav > .disabled > a,
.navbar-nav > .disabled > a:hover,
.navbar-nav > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
.navbar-nav.pull-right {
width: 100%;
}
.navbar-static-top {
border-radius: 0;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
border-radius: 0;
}
.navbar-fixed-top {
top: 0;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0;
}
.navbar-brand {
display: block;
max-width: 200px;
padding: 15px 15px;
margin-right: auto;
margin-left: auto;
font-size: 18px;
font-weight: 500;
line-height: 20px;
color: #777777;
text-align: center;
}
.navbar-brand:hover,
.navbar-brand:focus {
color: #5e5e5e;
text-decoration: none;
background-color: transparent;
}
.navbar-toggle {
position: absolute;
top: 9px;
right: 10px;
width: 48px;
height: 32px;
padding: 8px 12px;
background-color: transparent;
border: 1px solid #dddddd;
border-radius: 4px;
}
.navbar-toggle:hover,
.navbar-toggle:focus {
background-color: #dddddd;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top: 4px;
}
As you are using Bootstrap, to so you may use class .pull-right to align it to right.
For more info click here.
In Bootstrap v 3.** it is better practice to use "navbar-right" so the proper context should read:
ul class = "nav navbar-nav navbar-right"
If you are using bootstrap 3 the use navbar-right to pull right h
jsfiddle.net/makk/9yxeg7r5/2 - this is a similar example
<div id="top"></div>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<div class="navbar-header">
<a class="navbar-brand" href="#top"><span class="fa fa-book fa-3x">MATH</span></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Features</li>
<li>Courses</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
This is my first question so please excuse me if it is ridiculous/rather vague.
I have been trying for days to get a navigation that starts at the bottom and then when scrolled it sticks to the to, something that is similar to this website.
All I've managed to do so far is this:
<div id="nav" data-spy="affix" data-offset-top="443" data-offset-bottom="200">
<nav class="navbar navbar-affix-top navbar" role="navigation">
<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>
<a class="brand1" href="#why"><img src="http://dummyimage.com/228x63"></a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse navbar-right">
<ul class="nav navbar-nav">
<li>Why why why ?</li>
<li>How How How</li>
<li>Action call</li>
<li>Who who who</li>
</ul>
</div>
</nav>
</div>
And the CSS is:
.navbar-nav {
font-size: 1.4em;
font-family: "adelle";
color: #fff;
}
#nav.affix {
position: fixed;
top: 0;
width: 100%;
z-index:11; }
.navbar-nav > li > a {
color: #fff;
text-align:center;
}
.navbar-nav > li > a:hover{
color: #59aa80;
background-color: transparent;
transition: 1s;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition:1s;
}
.navbar-nav li.active:after {
content: " .";
display: block;
text-indent: -99em;
color: #fff;
height: 0px;
margin-left: -.8em;
margin-right: auto;
margin-top: 3px;
position: absolute;
left: 50%;
width: 1px;
text-align:center;}
.navbar .nav .active > a {
background-color: none;
background: 0 !important;
color: #FFF !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
text-align:center;}
.navbar {
background-color: rgba(0,0,0,.7);
box-shadow: 1px 5px 10px rgba(0,0,0,.3);
text-align:center;}
.navbar-header {
padding-left: 40px; }
I have searched stackoverflow.com as well as JSFiddle, Bootply, Bootsnip etc without any luck so it would be much appreciated if I could get some help.
You can use the Bootstrap affix component to position it to the top once scrolling reaches a specific point.
Here's a working example..
http://www.bootply.com/121595