I am using simple nav bar with drop downs. However I am not able to click on any of them. Below is the code
.search-box{
margin-top: 10px;
width: 200px;
border-radius: 5px;
}
#btn1{
background-color:transparent;
}
.top-banner{
text-align: center;
background-color:#595959 ;
}
.dropdown-menu {
min-width: 200px;
}
.dropdown-menu.columns-3 {
min-width: 600px;
}
.dropdown-menu li a {
padding: 5px 15px;
font-weight: 300;
}
.multi-column-dropdown {
list-style: none;
}
.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.428571429;
color: #333;
white-space: normal;
}
.multi-column-dropdown li a:hover {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
#media (max-width: 767px) {
.dropdown-menu.multi-column {
min-width: 240px !important;
overflow-x: hidden;
}
}
<div class="row" id="top-banner">
<div class="col-xs-12 col-sm-11">
<nav class="navbar navbar-inverse bg-inverse">
<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 class="navbar-brand" >Movie Flix</a>
<input type="search" class="search-box" placeholder="Search" >
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Select Type <b class="caret"></b>
<ul class="dropdown-menu">
<li>Movies</li>
<li>Series</li>
</ul>
</li>
<li class="dropdown">
Genre <b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Action</li>
<li>Adventure</li>
<li>Sci-Fi</li>
<li>Thriller</li>
<li>Crime</li>
<li>News</li>
<li>Talkshow</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Drama</li>
<li>Fantasy</li>
<li>Comedy</li>
<li>History</li>
<li>Biography</li>
<li>Documentary</li>
<li>War</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Mystery</li>
<li>Romance</li>
<li>Western</li>
<li>Animation</li>
<li>Horror</li>
<li>Family</li>
</ul>
</div>
</div>
</ul>
</li>
</ul>
</div>
<!--/.navbar-collapse-->
</nav>
</div>
</div>
I am using Gulp to add all the dependencies,
After adding dependencies my index.html looks like
<!DOCTYPE html>
<html lang="en" ng-app="movieflix">
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<!--bower:css -->
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
<!--endinject-->
<!--vendor:css-->
<!--endinject-->
<!--inject:css-->
<link rel="stylesheet" href="styles/catalog.tmpl.css">
<!--endinject-->
<!--app:css-->
<!--endinject-->
<body>
<header>
</header>
<section ng-view>
</section>
<footer>
</footer>
<!--bower:js-->
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-route/angular-route.js"></script>
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular-messages/angular-messages.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!--endinject-->
<!--inject:js-->
<script src="app/modules/movieflixmodule.js"></script>
<script src="app/services/login.service.js"></script>
<script src="app/services/catalog.service.js"></script>
<script src="app/controllers/signup.controller.js"></script>
<script src="app/controllers/login.controller.js"></script>
<script src="app/controllers/catalog.controller.js"></script>
<script src="app/app.js"></script>
<!--endinject-->
<!--vendor:js-->
<!--endinject-->
<!--app:js-->
<!--endinject-->
</body>
</html>
Below is my Gulp file
gulp=require('gulp'),
clean =require('gulp-clean'),
inject=require('gulp-inject'),
bowerfiles=require('main-bower-files'),
gulpfilter=require('gulp-filter'),
angularFileSort=require('gulp-angular-filesort'),
concat=require('gulp-concat'),
cleanCss=require('gulp-clean-css'),
cleanJS=require('gulp-uglify'),
merge=require('merge-stream'),
browserSync=require('browser-sync').create();
var config={
paths:{
src:'./src',
build:'./build',
bower:'./bower_components'
}
};
gulp.task('clean',function(){
return gulp.src(config.paths.build,{read:false}).pipe(clean());
});
gulp.task('inject',function(){
var cssFiles=gulp.src([config.paths.src+'/**/*.css'],{read:false});
var jsFiles=gulp.src([config.paths.src+'/**/*.js']);
return gulp.src(config.paths.src+'/index.html').
pipe(inject(gulp.src(bowerfiles(),{read:false}),{name:'bower'}))
.pipe(inject(cssFiles,{
ignorePath:'src',addRootSlash:false
})).
pipe(inject(jsFiles.pipe(angularFileSort()),{
ignorePath:'src',addRootSlash:false
})).pipe(gulp.dest(config.paths.build));
});
gulp.task('serve',['inject'],function(){
browserSync.init({
server:{
baseDir:[config.paths.build,config.paths.bower,config.paths.src],
routes:{
'/bower_components':'bower_components'
}
},
files:[
config.paths.src+'/**'
]
})
});
gulp.task('minifyCss',function(){
var vendorStyles=gulp.src(bowerfiles()).pipe(gulpfilter(['**/*.css'])).
pipe(concat('vendor.min.css')).
pipe(cleanCss({debug:true})).
pipe(gulp.dest(config.paths.build+'/styles'));
var appStyles=gulp.src(config.paths.src+'/**/*.css').
pipe(concat('app.min.css')).
pipe(cleanCss({debug:true})).
pipe(gulp.dest(config.paths.build+'/styles'));
return merge(vendorStyles,appStyles);
});
gulp.task('minifyJS',function(){
var vendorJS=gulp.src(bowerfiles()).pipe(gulpfilter(['**/*.js'])).
pipe(concat('vendor.min.js')).
pipe(cleanJS({debug:true})).
pipe(gulp.dest(config.paths.build+'/scripts'));
var appJS=gulp.src(config.paths.src+'/**/*.js').
pipe(angularFileSort()).
pipe(concat('app.min.js')).
pipe(cleanJS({debug:true})).
pipe(gulp.dest(config.paths.build+'/scripts'));
return merge(vendorJS,appJS);
});
gulp.task('html',function(){
return gulp.src([config.paths.src+'/**/*.html','!'+config.paths.src+'/index.html'])
.pipe(gulp.dest(config.paths.build));
});
gulp.task('fonts',function(){
return gulp.src(bowerfiles()).pipe(gulpfilter(['**/*.{svg,eot,tt,woff,woff2}'])).
pipe(gulp.dest(config.paths.build+'/fonts'));
});
gulp.task('other',function(){
return gulp.src([config.paths.src+'/**/*','!**/*.html','!**/*.css','!**/*.js']).
pipe(gulp.dest(config.paths.build+'/other'));
});
gulp.task('build',['html','fonts','other','minifyJS','minifyCss'],function(){
var vendorFiles=gulp.src([config.paths.build+'/styles/vendor.min.css',config.paths.build+'/scripts/vendor.min.js'],{read:false});
var appFiles=gulp.src([config.paths.build+'/styles/app.min.css',config.paths.build+'/scripts/app.min.js'],{read:false});
return gulp.src(config.paths.src+'/index.html').
pipe(inject(vendorFiles ,{name:'vendor',ignorePath:'build',addRootSlash:false})).
pipe(inject(appFiles,{name:'app',ignorePath:'build',addRootSlash:false})).
pipe(gulp.dest(config.paths.build));
});
I was not able to figure what is wrong with my code. I am not able to click on the drop downs on nav bar.
Can someone tell me what is wrong with my code. Apologies for dumping all the code.
Appreciate any help
Thank you
Here is the fiddle: https://jsfiddle.net/besr6sju/
<div class="row" id="top-banner">
<div class="col-xs-12 col-sm-11">
<nav class="navbar navbar-inverse bg-inverse">
<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 class="navbar-brand" >Movie Flix</a>
<input type="search" class="search-box" placeholder="Search" >
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Select Type <b class="caret"></b>
<ul class="dropdown-menu">
<li>Movies</li>
<li>Series</li>
</ul>
</li>
<li class="dropdown">
Genre <b class="caret"></b>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Action</li>
<li>Adventure</li>
<li>Sci-Fi</li>
<li>Thriller</li>
<li>Crime</li>
<li>News</li>
<li>Talkshow</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Drama</li>
<li>Fantasy</li>
<li>Comedy</li>
<li>History</li>
<li>Biography</li>
<li>Documentary</li>
<li>War</li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li>Mystery</li>
<li>Romance</li>
<li>Western</li>
<li>Animation</li>
<li>Horror</li>
<li>Family</li>
</ul>
</div>
</div>
</ul>
</li>
</ul>
</div>
<!--/.navbar-collapse-->
</nav>
</div>
</div>
Your dropdown is working fine. Can you please specify the exact issue?
Include the jquery.js script before the bootstrap.js in footer.
Related
I am trying to list my drop-down and it is working fine but after I click on Finance Report link I want the remaining content of <nav> tag to move down and the drop-down should open inside the, <nav>. Any help please, I appreciate.
This is my code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse visible-xs">
<div class="container-fluid">
<ul>
<li class="active">Dashboard</li>
<li>#</li>
<li>#</li>
<li>#</li>
<li>#</li>
<li> #</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row content">
<div class="col-sm-2 sidenav hidden-xs" id="all">
<ul class="nav nav-pills nav-stacked">
<li class="active">Dashboard</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Financial Department Report<span class="caret"></span></a>
<ul class="dropdown-menu" id="menu">
<li>Operational Report </li>
<li>Profitability Report</li>
<li>Working Capital</li>
<li>Resource Management and Chain Management</li>
<li>Human Resource Management</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Production Department Report<span class="caret"></span></a>
<ul class="dropdown-menu" id="menu">
<li>Sales Forecast Report</li>
<li>Batch Produced Report</li>
<li class="nav-link"><a class="m-pub" href="#content8" onclick="show('Page3')">Production Plan Report</a></li>
</ul>
</li>
<li>
<form action="${pageContext.request.contextPath}/logout" method="post"><button type="submit">Logout</button></form>
</li>
</ul>
</div>
</div>
</div>
I think you need this implementation don't forget to add Popper.js to your head tag Bootstrap needs it for the data-toggle. Here is my solution based on the accordion method:
let page1, page2, page3, logout;
let pages;
function show(selection) {
let page;
pages.removeClass('hidden');
pages.addClass('hidden');
if (selection) {
page = getPage(selection);
$(page).removeClass('hidden');
}
}
function getPage(selection) {
for (let index = 0; index < pages.length; index++) {
item = pages[index];
if (item.id === selection) {
return item;
}
}
}
$(function() {
console.log('ready!');
page1 = $('#page1');
page2 = $('#page2');
page3 = $('#page3');
logout = $('#logout');
pages = $([]).add(page1).add(page2).add(page3).add(logout);
pages.addClass('hidden');
});
body {
font-family: "Lato", sans-serif;
}
.hidden {
display: none;
}
#content {
height: 100%;
overflow: auto;
text-align: center;
line-height: 300px;
}
.card {
min-width: 300px !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row content">
<div class="col-sm-5 sidenav hidden-xs" id="all">
<ul id="accordion" class="nav nav-pills nav-stacked">
<li class="card">
<div class="card-header" id="headingOne">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" onclick="show('page1');">Dashboard</button>
</div>
</li>
<li class="card">
<div class="card-header" id="headingTwo">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Financial Department Report<span class="caret"></span></button>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
<ul>
<li class="nav-link">Operational Report </li>
<li class="nav-link">Profitability Report</li>
<li class="nav-link">Working Capital</li>
<li class="nav-link">Resource Management and Chain Management</li>
<li class="nav-link">Human Resource Management</li>
</ul>
</div>
</div>
</li>
<li class="card">
<div class="card-header" id="headingThree">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Production Department Report<span class="caret"></span></button>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
<ul>
<li class="nav-link">Sales Forecast Report</li>
<li class="nav-link">Batch Produced Report</li>
<li class="nav-link"><a class="m-pub" href="#content8" onclick="show('Page3')">Production Plan Report</a></li>
</ul>
</div>
</div>
</li>
<li class="card">
<div class="card-header" id="headingOne">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" onclick="show('logout');">Logout</button>
</div>
</li>
</ul>
</div>
<div id="content" class="col-sm-7">
<div id="page1">Page 01</div>
<div id="page2">Page 02</div>
<div id="page3">Page 03</div>
<div id="logout">Logout</div>
</div>
</div>
</div>
If i understood u , if u want make side Navbar for Dashboard , use this and change code if u want ...
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
function myAccFunc() {
var x = document.getElementById("demoAcc");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-color";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-green", "");
}
}
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
#dropDow{
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
transition: 0.3s;
}
.w3-green, .w3-hover-color:hover{
background-color: #fff;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="mySidenav" class="sidenav">
×
About
Services
<button class="w3-button w3-block w3-left-align" id="dropDow" onclick="myAccFunc()">
Accordion <i class="fa fa-caret-down"></i>
</button>
<div id="demoAcc" class="w3-hide w3-white w3-card">
Link
Link
</div>
Contact
</div>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
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>
I'm having a lot of trouble adding a fixed black background to my bootstrapped navbar. In my CSS, I declared the background-color as black, but it doesn't seem to change anything. My own CSS is declared after bootstrap's core CSS, so it wouldn't be overridden by a default color. The nav bar shows as transparent, with opaque lettering. Not sure what the problem is, especially since I already declared the color of the navbar!
Here is the HTML for the navbar:
<div class="jumbotron">
<div class="container">
<nav class="navbar fixed-top">
<div class="navbar-fixed-top container">
<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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>
Personal Projects<span class="caret"></span>
</li>
<li>Bullet Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav
And here is my CSS. Please help. I am going insane.
.jumbotron navbar-fixed-top container{
background: #2E2F31;
position: fixed;
width: 100%;
}
.navbar .navbar-nav li a {
color: white;
font-size: 16px;
}
.navbar .navbar-nav li a:hover {
background: #BFC1C3;
}
.navbar .navbar-nav .dropdown-menu li a:hover {
background: #BFC1C3;
}
change your css from .jumbotron navbar-fixed-top container to .jumbotron .navbar-fixed-top.container I updated your code check here
.jumbotron .navbar-fixed-top.container{
background: #2E2F31;
position: fixed;
width: 100%;
}
.navbar .navbar-nav li a {
color: white;
font-size: 16px;
}
.navbar .navbar-nav li a:hover {
background: #BFC1C3;
}
.navbar .navbar-nav .dropdown-menu li a:hover {
background: #BFC1C3;
}
<html lang="en">
<head>
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar-inverse jumbotron">
<div class="container">
<!-- Header -->
<nav class="navbar fixed-top">
<div class="navbar-fixed-top container">
<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>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>
Personal Projects<span class="caret"></span>
</li>
<li>Bullet Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</body>
</html>
I think this is exactly what you need
<head>
<link rel="stylesheet" href="farji.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class=" jumbotron">
<div class="container">
<!-- Header -->
<nav class="navbar-fixed-top navbar-inverse">
<div class="container">
<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>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home <span class="sr-only">(current)</span></li>>
<li>About</li>
<li>
Personal Projects<span class="caret"></span>
</li>
<li>Bullet Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</body>
OPTIONAL--and if you want to change it even further with any other color use the following css:
.navbar-inverse {
background-color: #122c46;
border-color: #122c46;
}
my navbar submenu goes like this when i go to mobile screen
this is what i want to be happen to my navbar submenu when i use mobile screen.
here is the code i used. someone tries to explain to me
.navbar-toggle {
z-index:3;
}
.navbar-nav {
float:none;
display: block;
text-align: center;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
<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-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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Sauce</li>
<li class="dropdown">
Syrup <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</li>
<li>Frappe</li>
<li>Accessories</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
You can do this in this way--
Working Example
<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
#dropdown-menu {
position: absolute;
background-color: white;
border: 2px;
}
.navbar-nav {
float:none;
display: block;
text-align: center;
}
.navbar-nav > li {
display: inline-block;
float:left;
}
</style>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav">
<div class="row">
<div class="col-xs-2">
<li>Home</li>
</div>
<div class="col-xs-2">
<li>Sauce</li>
</div>
<div class="col-xs-2">
<li class="dropdown">
Syrup <b class="caret"></b>
<ul id="dropdown-menu" class="dropdown-menu">
<li >Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</li>
</div>
<div class="col-xs-2">
<li style="float: right;">Frappe</li>
</div>
<div class="col-xs-2">
<li style="float: right;">Accessories</li>
</div>
<div class="col-xs-2">
<li style="float: right;">Contact</li>
</div>
</div>
</ul>
<!-- /.navbar-collapse -->
</nav>
</div>
</body>
</html>
Hope this helps!
I'm using Bootstrap.
I have links that are outside of the Navbar.
</nav>
<ul>
<li>Outside Link</li>
<li>Outside Link</li>
<li>Outside Link</li>
<li>Outside Link</li>
<ul>
I also have the same links inside the Navbar, but with a "visible-xs" class attached, so that they only appear inside the Mobile Navbar. (with hamburger toggle icon menu)
<ul class="visible-xs">
<li>Outside Link</li>
<li>Outside Link</li>
<li>Outside Link</li>
<li>Outside Link</li>
<ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
My current code works the way I would like, however, I do not want to write out the HTML links twice.
http://codepen.io/Goatsy/pen/yJeqjz
How do I place the outside links, inside ONLY the Mobile Navbar, without having to write the links twice in the HTML?
Ultimately, I would like these "outside links" to show on Desktop, outside of the navbar.
For Mobile, they will be, essentially, "moved" inside the navbar.
You can do this with CSS and the right HTML structure. Seperate your outside links from your standard links using navbar-right, then use position: absolute inside a media query so they are only out of the navbar above 767px.
#media (min-width: 767px) {
.navbar.navbar-default .ul-outside {
position: absolute;
top: 100%;
left: 0;
}
}
Working Example I
/*FOR DEMO ONLY*/
.navbar.navbar-default {
margin-bottom: 0;
}
/*FOR DEMO ONLY*/
#media (min-width: 767px) {
.navbar.navbar-default .ul-outside {
position: absolute;
top: 100%;
left: 0;
}
}
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<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="#navbar" 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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-left">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
<ul class="nav navbar-nav navbar-right ul-outside">
<li>Outside
</li>
<li>Outside
</li>
<li>Outside
</li>
<li>Outside
</li>
</ul>
</div>
</div>
</nav>
<!--DEMO CONTENT-->
<div class="jumbotron">
<div class="container">
<h1>
Outer Links
</h1>
</div>
</div>
<!--DEMO CONTENT-->
Working Example II:
/*FOR DEMO ONLY*/
.navbar.navbar-default {
margin-bottom: 0;
}
/*FOR DEMO ONLY*/
#media (min-width: 767px) {
.navbar.navbar-default .ul-outside {
position: absolute;
width: 100%;
top: 100%;
left: 0;
}
.navbar.navbar-default .ul-outside > li {
float: none;
}
}
<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.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<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="#navbar" 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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-left">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
<ul class="nav navbar-nav navbar-right ul-outside">
<li>Outside
</li>
<li>Outside
</li>
<li>Outside
</li>
<li>Outside
</li>
</ul>
</div>
</div>
</nav>
<!--DEMO CONTENT-->
<div class="jumbotron">
<div class="container">
<h1>
Outer Links
</h1>
</div>
</div>
<!--DEMO CONTENT-->