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
Related
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 would like to use a bootstrap navbar fixed at the top of my page. I then would like to have a div bellow that that covers the rest of the page. I have the width solved by applying the class container-fluid. However i have adjusted the containers height to 93.5% and set the html overflow to hidden. This works fine with a full screen window. However this solution does not appear o be responsive and fails with window size adjustments. I would like the height of the div container to automatically fill the rest of the page. Code is bellow:
CSS
html {
height:100%;
overflow:hidden;
}
body {
height:100%;
}
#map-container{
height:93.5%;
border-color: black;
border-style:solid;
border-width:2px;
margin:5px;
}
.navbar{
margin-left:5px;
margin-right: 5px;
margin-top:5px;
margin-bottom:0px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>quickMap</title>
<!-- Bootstrap Core CSS -->
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="~/Content/quickMap.css" rel="stylesheet" >
</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">
<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>
<form class="navbar-form navbar-left">
<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 <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>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid" id="map-container">
<div>
</div>
</div>
<!-- jQuery -->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>
I think overflow: hidden is messing you up. I changed it to auto and it worked well enough for me.
html {
height:100%;
overflow:auto;
}
Not sure that 93.5% is the exact right number for the height, as, at least on my browser, the div ends up being slightly too tall for the window, but this can be fixed by adjusting the height slightly shorter. Something more like 91%.
I am using bootstrap framwork and trying to change few properties with navbar, like background color,
When I uses css from a local copy like, ./bootstrap.css override works fine or when I pasting whole css or just navbar css to liveweave CSS column override working.
But
when I am using maxcdn server like
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
Override is failing whether its liveweave or my pc, even after using !important override fails.
I am using
navbar navbar-default navbar-fixed-top
classes
I am sure about what I said above, even before posting this question I visited at least 10 pages or similar question to find solution but none them used CSS from maxcdn server.
Working Example
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
<script src="./google.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
<link rel="stylesheet" href="./main.css">
</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">
<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>
<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 <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>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
main.css
.navbar-default{
background-color:red;
}
If you use a local css file for override. you must be sure this file is read after the maxcdn...... file. the last one is the css element used
Having the same issue... I noticed that, when viewing the maxcdn bootstrap.min.css in my text editor, the code stops running at ".glyphicon-phone:before{content:"\e145"}.glyphicon..." so I wonder if that is relating to the issue. Hoping that it gets sorted out soon!
Bootstrap provides the following code to use as a navbar. However, when I simply paste in their code without altering it, the collapsed view doesn't work. As you resize your browser window towards more narrow, the navbar turns into a button that you can click to show all the nav components again. However, it doesn't seem to be working when I simply paste in their code. Anyone know why? The nav components do get collapsed, but clicking the button to show them doesn't do anything.
<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">
<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>
<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 <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>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
HTML
<?php include('config/setup.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Search Hound</title>
<!--This enables the website to be mobile first-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php include('config/js.php'); ?>
<?php include('config/css.php'); ?>
</head>
<body>
<?php include('template/navigation.php'); ?>
<div class="container">
<form class="form-inline" align="center">
<!-- Section to type question-->
<div class="form-group" style="display:block">
<textarea class="form-control" style="width:100%" rows="5"></textarea>
</div>
<!--Section to add money-->
<div class="input-group" id="AddMoney">
<span class="input-group-addon">$</span>
<input id="EnterMoney" type="text" class="form-control" onkeypress='validate(event)' aria-label="Amount (in dollars and cents)">
</div>
<!--Section to add file-->
<div id="AddFile">
Add File
<input type="file" id="uploadFile" style="visibility: hidden;" />
</div>
<div id="imagePreview"></div>
<!--Section for the Submit button-->
<div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<!-- /container -->
<div
</body>
<?php include('template/footer.php'); ?>
</html>
config/js.php
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
I don't see that you are including jQuery before the bootstrap.js file. jQuery is required to use bootstrap javascript components.
Add this BEFORE bootstrap.js in your config/js.php file.
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
If I understand your question correctly, here is what you want:
Jquery:
$(".navbar-toggle").click(function(){
$(".navbar").slideToggle();
});
http://jsfiddle.net/xz06armf/
I have a website I'm trying to design and I have a general layout page where everything will be placed i.e content from other pages I've made, I ran into a problem where my content overflowed and no scrollbar appeared; I looked around and tried a couple of ways to resize my content but none of them worked out so I settled for a temporary fix and made the window size static, can anyone help me with resizing my page based on the screen it's running on. I'm using webmatrix and there will be some C# code in these pages so the extension is cshtml. I am also very new to web development so sorry if my code is messy.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="/Shared/css/bootstrap.css" />
<style type="text/css">
.body
{
padding-top: 60px;
padding-bottom: 40px;
}
.renderBody {
height: 462px;
overflow: auto;
padding-top: 60px;
padding-left: 440px;
margin: initial;
}
#login{
padding-right: 0px;
}
</style>
<link rel="stylesheet" type="text/css" href="/Shared/css/bootstrap-responsive.css"/>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/js/bootstrap.min.js"></script>
<script src="/downloads/twitter-bootstrap-hover-dropdown/twitter-bootstrap-hover-dropdown.js?view=1"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="navContainer">
<img src="/Shared/Images/Logo.png" alt="LogoImage"></img>
<form class="navbar-form pull-right">
<ul class="breadcrumb" id="login">
<li> Login
<span class="divider"> /
Register</span></li>
</ul>
</form>
</div>
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="http://www.facebook.com">Some Information</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">More Information</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 class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="active">Traveling</li>
<li class="active">Moving</li>
<li class="active">Sports</li>
</ul>
<!--<form class="navbar-form pull-right">
<ul class="nav"><li class="active">Register</li></ul>
</form>
</div>-->
</div>
</div>
</div>
<div class="renderBody">
#RenderBody()
</div>
</div>
</body>
</html>
There are a few things you can try layout-wise, before you go down the road of screen measurement in script:
First, be sure to use the viewport meta tag (https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag):
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Next, wrap RenderBody with the bootstrap container class:
<div id="main" class="container">
#RenderSection("featured", required: false)
<section>
#RenderBody()
</section>
</div>
Also, if you're not already familiar with it, you may want to read up on the fluid grid system in bootstrap (http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem)
Lastly, if all else fails, you can use the overflow CSS property on your content container:
.renderBody {
overflow-x: scroll;
}