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!
Related
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.
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-->
I am trying to create a header for my website. I want to have my logo at the top left corner and my nav bar at the top right corner of the window. My issue is that the nav bar is not aligned flush with the center of my logo. Here's the goods:
#logoHeader {
float: left;
vertical-align: middle;
}
ul {
list-style: none;
display: inline block;
vertical-align: middle;
}
li {
float: right;
padding: 10px;
font-size: 22pt;
display: inline-block;
}
.header .navContainer {
height: 131px;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link type= "text/css" rel="stylesheet" href="all.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type = "text/javascript" src = "index.js"></script>
<title>JM</title>
</head>
<body>
<div class ="container">
<div class="row">
<div class="col-md-4 header">
<img id = "logoHeader" src="file:///Users/Jon/Desktop/JM.COM/images/bigJM.png"/>
</div>
<div class="cold-md-8 navContainer">
<ul class = "navBar">
<li>Home</li>
<li>Blog</li>
<li>Publications</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Follow Bootstraps Rules
http://getbootstrap.com/components/#navbar
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</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 class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</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 role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<body>
</html>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
In your bootstrap.min.css change margin-top and margin-bottom to 0px for ol and ul selectors
Example
ol, ul {
margin-top: 0px;
margin-bottom: 0px;
}
Also in your css codes in your question padding is also one of the issue. Setting a padding of 10px will result in top, bottom, left and right additional space.
change it to
li {
float: right;
/*padding: 10px;*/
padding-left: 10px;
padding-right: 10px;
font-size: 22pt;
display: inline-block;
}
I'm trying to place custom icons in a Bootstrap navbar while keeping the navbar at exactly 50px height. Even if I declare .navbar { height: 50px; }, after placing the icon, the navbar height increases a couple of pixels in height. Click on the link in the navbar and note the approx 2px space between the navbar and the dropdown menu (the navbar is 52px in this example due to the height of the icon).
See: http://jsfiddle.net/hj3h58gm/4/
I understand the current behavior, I just don't know a way around it without decreasing the height of the icon, which I don't want to do.
Any suggestions?
The icon is denoted with .el-ico.
HTML
<body>
<nav class="el-nav navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
click this
<span class="el-ico"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
CSS
.el-nav {
height: 50px;
max-height: 50px;
}
.el-ico {
display: inline-block;
width: 30px;
height: 18px;
background-image: url(icon.png);
}
You only need to use the right selector with your CSS and use a media query with your navbar when adjusting for height because at under 768px you'll have adverse effects (your mobile dropdowns background will seem invisible when really the navbar is set at 50px, default is min-height: 50px).
#media (min-width: 768px) {
.navbar.el-nav {
height: 50px;
}
}
.navbar .el-ico {
display: inline-block;
width: 30px;
height: 18px;
background-image: url(http://placehold.it/350x150/ff0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default el-nav navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Brand</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 class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="el-ico"></span>
</a>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
<li role="separator" class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I'm hand-coding my first website, and it's been a fun adventure so far, but I've run into a css glitch with the navigation menu. Here's my website-in-progress. On my 15" laptop, when I initially load the site, the nav bar extends to the full-width of the container (80% width of the screen) as I expect it to. However, if I zoom the webpage, or view it through different resolutions through screenfly, the nav bar extends past the container and also the header image becomes short. Can anyone help me figure out why this is? Below is the css, then the html
*{ margin: 0 auto;}
body {
background:black;
margin: 0 auto;
font-family:georgia, times,serif;
}
#outer-content-wrapper{
position:relative;
height:100%;
width:80%;
margin:0 auto;
}
#navwrap{
margin:0;
height:60px;
width:100%;
}
#nav{
position:relative;
background:black;
height:60px;
width:100%;
border-top-style:dashed;
border-bottom-style:dashed;
border-width:1px;
border-color:#696969;
z-index:9000;
}`
<div id="outer-content-wrapper">
<div id="header">
<div id="greenlight"></div>
</div>
<div id="navwrap">
<div id="nav">
<div id="logo"></div>
<div class="menu">
<div class="pagesmenu">
<ul>
<li>bio</li>
<li>listen</li>
<li>contact</li>
<li>blog </li>
</ul>
</div>
Peace
use bootstrap instead of plain css. Bootstraps helps to work your site as per screen resoultion http://getbootstrap.com/. use my html code for help
HTML:
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>MENU</title>
<link href="bootstrap.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="custom.css" />
<link type="text/css" rel="stylesheet" href="css/media.css" />
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<script src= "respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="application.js"></script>
</head>
<body>
<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>
<a class="navbar-brand" href="#">Brand</a>
</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 class="active">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>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<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>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</body>
</html>
Your complete site will pe resposive and can also work on mobile