I was wondering if you could tell me how to get a collapsable box to appear on on a website using javascript?
What I want on the website is to resize the screen (to like a mobile for example) and it replaces the nav bar with a drop down box that has to be clicked on.
Is this possible?
Thanks in advance to all!
#navLocation {
position:relative;
float: right;
top: 55;
right: 125;
font-size: 155%;
}
<div id="navLocation">
<a id="container" id="navLocation" href="index.html">home</a> about projects news contact
</div>
Here is JSFiddle
.navbar-inverse {
background-color: #000000;
margin-top:10px;
float: right;
border: none;
margin-right: 10px;
border-radius: 0px;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {
color: #FFFFFF;
background-color: #000000;
border: none;
}
.navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover {
color: #FFFFFF;
background-color: 000000;
}
ul li{
font-size: 20px;
}
ul li a{
text-decoration: none;
color: #000000;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Menu 1</li>
<li>Menu 2 </li>
<li>Menu 3</li>
</ul>
</div>
</div>
</nav>
is this the same that you want?
hope this helps.
I have made an example for you. Please have a look.
`https://jsfiddle.net/ibrahimince/yrashdfm/`
ups. I have forgotten to add jquery library. You need to add jquery library.
https://jsfiddle.net/ibrahimince/qntz5w3u/
Related
My app requires Bootstrap. However, it is overriding my custom CSS then the navbar that I have set is now displayed in a weird manner. What am I doing wrong and what can do to fix it? My end goal is to let the bootstrap work along side with the css.
Here is the image for more clarification:
The HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Client Server Application Project</title>
<link rel="stylesheet" href="faq.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
/>
<!--BootStrap CSS-->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
crossorigin="anonymous"
/>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"
></script>
</head>
<body>
<nav>
<div class="logo">Revolutionary Fitness</div>
<ul>
<div class="items">
<li>Home</li>
<li>
Our Services
<ul>
<li>Gyms Training</li>
<li>Gym Location</li>
</ul>
</li>
<li>
Login
</li>
</div>
<li class="search-icon">
<input type="search" placeholder="Search">
<label class="icon">
<span class="fas fa-search"></span>
</label>
</li>
</ul>
</nav>
<div class="container">
<div class="header">
<h1>Frequently Asked Questions</h1>
</div>
<br><br>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-whatsapp"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<ul class="list">
<li>
About Us
</li>
<li>
Contact Us
</li>
<li>
FAQs
</li>
</ul>
<p class="copyright">
<small>©2022 Singapore Polytehnic</small>
</p>
</footer>
<!--BootStrap JavaScript-->
</body>
</html>
The CSS code:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav{
background: #1b1b1b;
}
nav:after{
content: '';
clear: both;
display: table;
}
nav .logo{
float: left;
color: white;
font-size: 27px;
font-weight: bold;
line-height: 70px;
padding-left: 60px;
}
nav ul{
display: flex;
justify-content: center;
align-items: center;
list-style: none;
float: right;
margin-right: 40px;
}
nav ul li{
display: inline-block;
background: #1b1b1b;
margin: 0 5px;
}
nav ul li a{
color: white;
text-decoration: none;
line-height: 70px;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover{
color: cyan;
border-radius: 5px;
box-shadow: 0 0 5px #33ffff,
0 0 5px #66ffff;
}
nav ul ul li a:hover{
color: cyan;
box-shadow: none;
}
nav ul ul{
position: absolute;
top: 90px;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
nav ul li:hover > ul{
top: 70px;
display: flex;
flex-direction: column;
opacity: 1;
visibility: visible;
}
nav ul ul li{
position: relative;
margin: 0px;
width: 150px;
float: none;
display: list-item;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
nav ul ul li a{
line-height: 50px;
}
nav ul .search-icon{
height: 40px;
width: 240px;
display: flex;
background: #f2f2f2;
border-radius: 5px;
}
nav ul .search-icon input{
height: 100%;
width: 200px;
border: none;
outline: none;
padding: 0 10px;
color: #000;
font-size: 16px;
border-radius: 5px 0 0 5px;
}
nav ul .search-icon .icon{
height: 100%;
width: 40px;
line-height: 40px;
text-align: center;
border: 1px solid #cccccc;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
nav ul .search-icon .icon:hover{
background: #e6e6e6;
}
nav ul .search-icon .icon span{
color: #222222;
font-size: 18px;
}
#media screen and (max-width:968px){
nav .logo{
display: none;
}
nav ul div.items{
flex: 3;
}
nav ul .search-icon{
display: none;
}
}
.header{
width: 100%;
height: 100px;
margin-top: 100px;
background-color: crimson;
color:white;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.container{
display: block;
margin: 0 auto;
width: 100%;
height: 700px;
}
.footer{
padding: 40px;
background-color: chartreuse;
}
.footer .social{
text-align: center;
padding-bottom: 25px;
color:#4b4c4d;
}
.footer .social a{
display: inline-block;
height: 40px;
width: 40px;
background:rgb(0, 0, 0);
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color:#ffffff;
transition: all 0.5s ease;
}
.footer .social a:hover{
color:#24262b;
background-color: #ffffff;
}
.footer ul{
margin-top: 0;
padding: 0;
list-style: none;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
text-align: center;
}
.footer ul li a{
color:inherit;
text-decoration: none;
opacity: 0.8;
}
.footer ul li{
display: inline-block;
padding: 0 15px;
}
.footer ul li a:hover{
opacity: 1;
}
.footer .copyright{
margin-top: 15px;
text-align: center;
font-size: 20px;
color:black;
}
Much help is appreciated!
I think Your Bootstrap link is not working properly.
actually, Bootstrap purpose is reducing css No of line codes.
simply, You can follow my steps..
Try to use this Link:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
Finally, you can search on bootstrap, what you want to use.
https://getbootstrap.com/docs/5.1/components/navbar/
If you want to use Navbar? simply copy and paste your project..
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
My dropdown menu on my nav bar does not show up on iPhone 6 or iPad. However, the drop-down menu shows on my laptop (MacBook air) on chrome, safari, and firefox. My website is http://emilypedersen.me
The code for my navbar is as follows:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Emily Pedersen</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
</head>
<body>
<!-- .navbar -->
<nav class="navbar navbar-full navbar-dark bg-primary">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#mainNavbarCollapse">
☰
</button>
<a class = 'navbar-brand' href="home" id = 'brand'> <img src="images/emily_pedersen_2.jpg"></a>
<div class="collapse navbar-toggleable-md" id="mainNavbarCollapse">
<ul class="nav navbar-nav pull-lg-right">
<li class="nav-item">
<a class="nav-link" href="home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" id="navbarDropdown1" data-toggle="dropdown">About ▿</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown1">
<li><a class="dropdown-item" href="about_me">About Me</a></li>
<li><a class="dropdown-item" href="my_travels">My Travels</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link" id="navbarDropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Portfolio ▿</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown1">
<li><a class="dropdown-item" href="resume">Resume</a></li>
<li><a class="dropdown-item" href="projects">Projects</a></li>
<li><a class="dropdown-item" href="writings">Writings</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- /.navbar -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js'></script>
</body>
</html>
Here is the css for my nav bar:
#media (max-width: 62em) {
.navbar-nav {
padding-top: .425rem;
padding-left: 0.75rem;
}
.navbar-nav .nav-item {
float: none;
}
.navbar-brand {
float: right;
}
#brand {
width:80%;
}
.navbar-toggler {
width: 10%;
}
.navbar-brand,
.navbar-nav .nav-item {
display: block;
}
.navbar-nav .nav-item + .nav-item {
margin-left: 0;
}
.dropdown-menu {
position: relative;
float: none;
background-color: white;
}
.dropdown-menu > li > a {
color: black;
background-color: white;
}
}
.navbar-dark .navbar-nav .nav-link {
color:white;
}
.nav-link {
text-transform: uppercase;
font-size: 12px;
font-weight: 400;
line-height: 1em;
letter-spacing: 1px;
}
.navbar-nav > li > a {
padding: 5px;
margin-top: 30px;
}
.nav > li > a:focus, .nav > li > a:hover {
background-color: transparent;
}
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
background-color: transparent;
}
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
background-color:transparent;
color:#7EB6FF;
}
.dropdown-item {
display:block;
font-size:12px;
text-transform: uppercase;
}
.navbar-brand {
margin-top:10px;
}
I'm not sure if this is an issue of #media tags or the hardware on which my website is running. The drop-down menu works on desktop computers, laptops, and Android 7.0.
Any guidance or suggestions would be greatly appreciated!
So I found that this stackover answer: (Bootstrap 4 navbar dropdown menu item not clickable on mobile devices).
Basically in my navigation.html I need to change from:
<a class="nav-link" id="navbarDropdown1" data-toggle="dropdown">About ▿</a>
to:
<a class="nav-link" href="#" role="button" id="navbarDropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About ▿</a>
This is my html and css.please help me with the scrollspy as I dont know what exactly is the problem .If possible let me know the code you have written to solve the problem
MY HTML:
<nav class="navbar navbar-default center navbar-fixed-top" id="navbar">
<button class="navbar-toggler hidden-sm-up"type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">☰</button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<a class="navbar-brand" href="#"></a>
<div class="navbar-inner">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" data-target="#jumbotron">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#skills">SKILLS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<div class=" jumbotron" id="jumbotron"></div>
<div id="about"></div>
<div id="skills"></div>
<div id="contact"></div>
MY CSS
and the divs are of 750px in heights
body
{
background: none;
position: relative;
margin: 0;
padding: 0;
font-family: 'Droid Serif', Georgia, Times, serif;
}
/* --------------------------------------------Navbar CSS--------------------------------------------------- */
.navbar-default
{
background-color: #610B0B ;
border-radius:0px;
}
.navbar-default .navbar-nav > li > a
{
color: white;
font-size: 15px;
font-family: 'Droid Serif', Georgia, Times, serif;
letter-spacing: 1px;
margin: 3px 10px -3px 10px;
border: 2px solid transparent;
padding: 8px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus
{
border: 2px solid white;
border-radius: 5px;
color: white;
padding: 8px;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus
{
border: 2px solid white;
border-radius: 5px;
color: #555;
background-color: #E7E7E7;
}
There are a couple of things wrong.
First, 3 of your nav-link anchors have data-target= when they should have href=
Second, you need to set the data-target= to the <body> of the navbar. This allows Javascript to find what to target with Scrollspy:
<body data-target="#navbar">
and third, if you haven't, you need to call Scrollspy via Javascript:
$('body').scrollspy({ target: '#navbar' })
Here is a Codepen with a working example:
http://codepen.io/charliebeckstrand/pen/NrWpXP
I had same problem in bootstrap 5 and downloaded bootstrap 4.3.1
and replace it with previous version.
I have trouble creating a mega-dropdown menu for Products. I want to create a responsive (I use Bootstrap) dropdown which drops down from the entire nav like most big companies.
Here is how it looks like:
I want the dropdown to be from NAME to CONTACT. I will populate it with divs with pictures and text. How can I do that?
Advice, directions or explanation would be very helpful. Thanks in advance.
Here is the navigation in the HTML file:
<nav id="mainNav" class="navbar navbar-default 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">
<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 page-scroll" href="#page-top">INVACU</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>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Products <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>VSU 200</li>
</ul>
</li>
<li>
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Here is the navigation in the CSS file:
.navbar-default {
border-color: rgba(34,34,34,.05);
font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
background-color: #fff;
-webkit-transition: all .35s;
-moz-transition: all .35s;
transition: all .35s;
}
.navbar-default .navbar-header .navbar-brand {
text-transform: uppercase;
font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
font-weight: 700;
color: #f05f40;
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
color: #eb3812;
}
.navbar-default .nav > li>a,
.navbar-default .nav>li>a:focus {
text-transform: uppercase;
font-size: 13px;
font-weight: 700;
color: #222;
}
.navbar-default .nav > li>a:hover,
.navbar-default .nav>li>a:focus:hover {
color: #f05f40;
}
.navbar-default .nav > li.active>a,
.navbar-default .nav>li.active>a:focus {
color: #f05f40!important;
background-color: transparent;
}
.navbar-default .nav > li.active>a:hover,
.navbar-default .nav>li.active>a:focus:hover {
background-color: transparent;
}
#media(min-width:768px) {
.navbar-default {
border-color: rgba(255,255,255,.3);
background-color: transparent;
}
.navbar-default .navbar-header .navbar-brand {
color: rgba(255,255,255,.7);
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
color: #fff;
}
.navbar-default .nav > li>a,
.navbar-default .nav>li>a:focus {
color: rgba(255,255,255,.7);
}
.navbar-default .nav > li>a:hover,
.navbar-default .nav>li>a:focus:hover {
color: #fff;
}
.navbar-default.affix {
border-color: rgba(34,34,34,.05);
background-color: #fff;
}
.navbar-default.affix .navbar-header .navbar-brand {
font-size: 14px;
color: #f05f40;
}
.navbar-default.affix .navbar-header .navbar-brand:hover,
.navbar-default.affix .navbar-header .navbar-brand:focus {
color: #eb3812;
}
.navbar-default.affix .nav > li>a,
.navbar-default.affix .nav>li>a:focus {
color: #222;
}
.navbar-default.affix .nav > li>a:hover,
.navbar-default.affix .nav>li>a:focus:hover {
color: #f05f40;
}
}
Im a beginner in hmtl css jquery js..
I have a navigation that is sticky but can not add sub menu to navigation, also if sub menu is created i want the navigation to stay sticky. Is that possible?
Any help would to thanks...
Here is my current html
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="row">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
<h3>TEST NAV LOGO</h3>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>ABOUT</li>
<li>TEAM</li>
</ul>
</div>
</div>
</div>
Here is the CSS
.navbar-default {
background: #FFFFFF;
border: none;
box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.08);
margin: 0 !important;
}
.navbar-default .navbar-brand {
color: #0066cc;
height: 65px;
line-height: 40px;
padding-left: 0px;
margin-LEFT: -10;
width:100px;
FLOAT: right;
}
.navbar-default .navbar-brand h3 {
font-weight: bold;
}
.navbar-default .navbar-nav li a {
color: #ff0000;
font-weight: bold;
height: 65px;
line-height: 30px;
FONT-SIZE: 14.5px;
}
.navbar-default .navbar-nav li a:hover {
color: #0066cc;
ul {
list-style:none;
padding:0;
}
}
.navbar-default .navbar-nav > li > a:focus {
color: #0066cc;
}
.navbar-default .navbar-toggle {
margin-top: 16px;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #66AF33;
color: #FFFFFF;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #0066cc;
background-color: transparent;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #FFFFFF;
}
.navbar-default .navbar-toggle:hover .icon-bar {
backgroundcolor:#66AF33;
}
You can try below code:
$(document).scroll(function() {
if ($(this).scrollTop() > 150) {
$('.navbar').css('position','fixed');
$('.navbar').css('top','0');
}
else {
$('.navbar').css('position','static');
}
});
Here in above code 150 is dummy value you can try a number as per your requirement.
OR
Try this link : http://www.backslash.gr/demos/jquery-sticky-navigation/
example
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>