Design a web page which should contain Bootstrap’s responsive navigation bar, a responsive circle image and a responsive footer.
The snap shot of the web page is given below:
Image 1: Web page in large devices
https://drive.google.com/file/d/1szF9Fc8uX_2wtVw2ase_Lxmg_7ZHitzy/view?usp=sharing
Image 2: web page in small devices:
https://drive.google.com/file/d/1RclzRGsN_PTptMHzrDznFlTzrY2yK5fc/view?usp=sharing
Note:
The web page ‘responsive.html’ template is given. You have to write the code only for the specified part of the 'responsive.html' file and 'app.css' file.
Key Points:
Add responsive feature to the navigation bar. The collapsing nature is tripped by a button with the id ‘btn-id’ belongs to Bootstrap’s navigation toggle class and then features two data- elements. The first, data-toggle, is used to tell the JavaScript what to do with the button, and the second, data-target, indicates various elements like navigation links, forms, and other contents to toggle
Set the navigation brand as ‘MyBrand’.
Create three icon bars (hamburger button) with appropriate Bootstrap class. This will toggle the elements that are in the navigation collapsible div tag.
Add responsive features to the images so that it can automatically adjust to fit the size of the screen.
Make the image to scale down if it has to, but never scale up to be larger than its original size. Set the properties accordingly. For this override necessary css properties of the ‘img-responsive’ class in ‘app.css’ file. Set the max-width of the image to 100% and height to 'auto'.
After written the code I am facing some errors :
Fail 1 : Set the collapsible nature to the button
Fail 2 : Set the icon bar for the 'span' tags
Fail 3 : Set 3 icon bar for the 'span' tags
Fail 4 : The data-toggle should be 'collapse'
Fail 5 : The data target should be the id of the tag for toggling elements like nav links, forms, and other contents.
Can you please tell what should I do after this to resolve these errors.
Here is the code I have written :-
body {
font-family: 'Open Sans', sans-serif;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #333;
color: #ddd;
padding: 20px;
text-align: center;
}
article {
padding: 40px;
}
article img {
text-align: center;
box-shadow: 6px 6px 8px #777;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
article p {
font-size: 16px;
}
.img-responsive {
max-width: 100%;
height: auto;
}
/* The following code is used to create same-sized columns
in a multi-column layout.
Code from:
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
*/
/* columns of same height styles */
.container-xs-height {
display: table;
padding-left: 0px;
padding-right: 0px;
}
.row-xs-height {
display: table-row;
}
.col-xs-height {
display: table-cell;
float: none;
}
#media (min-width: 768px) {
.container-sm-height {
display: table;
padding-left: 0px;
padding-right: 0px;
}
.row-sm-height {
display: table-row;
}
.col-sm-height {
display: table-cell;
float: none;
}
}
#media (min-width: 992px) {
.container-md-height {
display: table;
padding-left: 0px;
padding-right: 0px;
}
.row-md-height {
display: table-row;
}
.col-md-height {
display: table-cell;
float: none;
}
}
#media (min-width: 1200px) {
.container-lg-height {
display: table;
padding-left: 0px;
padding-right: 0px;
}
.row-lg-height {
display: table-row;
}
.col-lg-height {
display: table-cell;
float: none;
}
}
<!-- DO NOT ALTER THIS TEMPLATE. FILL YOUR CODE IN THE SPECIFIED PLACES -->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="btn navbar-toggle collapsed" data-toggle="collapse" data-target="#btn-id">
<span class="sr-only">Toogle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- FILL YOUR CODE FOR BRAND AND TOGGLE (ICON BAR) FOR RESPONSIVE NAVIGATION BAR -->
<a class="navbar-brand" href="#">MyBrand</a>
</div>
<!-- Collect the nav links, forms, and other contents for toggling -->
<div class="collapse navbar-collapse" id="btn-id">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a class="nav-link" href="#">Sports</a></li>
<li class="nav-item"><a class="nav-link" href="#">Activities</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact Us</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</header>
<div class=" ">
<div class=" ">
<section class=" ">
<article>
<!-- WRITE YOUR CODE FOR RESPONSIVE CIRCLE IMAGE -->
<img class="img-responsive img-circle" id="image" src="https://www.capecod.com/wp-content/gallery/nature-walk-through-harwich-conservation-trust-lands/SK_West-Harwich-Nature-Walk-Through-Consevation-Trust-Lands_10.23.18-7.jpg" alt="Nature Image" />
</article>
</section>
</div>
</div>
<footer class="footer">
<p class=" ">Lorem ipsum</p>
</footer>
</body>
</html>
Try changing the id of collapsable div from "bin-id" to "bs-example-navbar-collapse-1" so it will look something like this:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a class="nav-link" href="#">Sports</a></li>
<li class="nav-item"><a class="nav-link" href="#">Activities</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact Us</a></li>
</ul>
</div>
This will remove the following errors:
Fail 1 : Set the collapsible nature to the button
Fail 2 : Set the icon bar for the 'span' tags
Fail 4 : The data-toggle should be 'collapse'
Fail 5 : The data target should be the id of the tag for toggling elements like nav links, forms, and other contents.
For the error,
Fail 3 : Set 3 icon bar for the 'span' tags
Try removing the first span (Toogle Navigation) as only 3 span tags are required.
<button type="button" class="btn navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Related
I've created a basic horizontal navigation bar. It has your generic options: Homepage, contact us, about, and games. However, even though contact us, games, and Homepage are close together, I want to make it so about is on the opposite side of the web page/navigation bar, far away from the others but still connected to it through a huge empty space of the navigation bar. How would I go about doing this? Below is my current CSS code if it helps:
.horiznavli {
display: inline;
padding:20px 32px 20px;
border-color: #333333;
background-color: #333;
color:white;
text-align: center;
font-family: "Lucida Grande", Times, Serif
}
.horiznavli:hover{
background-color: #4CAF50;
}
.horiznavli:active{
background-color: grey;
}
#HorizNav{
position: relative;
left: -60px
}
#HorizNav #spaced {
}
EDIT: My apologies here is the HTML code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="frontpage.css">
<meta charset="UTF-8">
<meta name="description" content="Official Dark Matter Studios site">
<meta name="keywords" content="HTML, Studio, Game, Dark Matter">
<meta name="author" Content="Matt Jones">
<title> Dark Matter Studios </title>
</head>
<body>
<ol id = "HorizNav" style = "list-style-type:none">
<li class = "horiznavli"> HomePage </li>
<li class = "horiznavli"> About </li>
<li class = "horiznavli"> Games </li>
<li class = "horiznavli" id = "spaced"> Conact Us </li>
</ol>
<h1 id="title_screen"> Dark Matter Studios</h1>
<div id="wrapper">
<h1> What is Dark Matter Studios all about? </h1>
<p> Dark Matter studios is an independent game development dedicated to producing quality games out of a passion and love for gaming.<br>
Born from the frustration of anti-consumerism, microtransactions and DLC eccentric practices held by many AAA companies </p>
<br>
<br>
<h1> WHAT WE'RE ALL ABOUT </h1>
<p> Dark Matter Studios was founded around the principle of honesty and integrity with our fans. After all, without them we wouldn't get anywhere! Though Dark Matter studios holds itself responible the following standards: </p>
<ol style="list-style-type: circle">
<li> Honesty with our customers. </li>
<li> No Microtransactions or overpriced DLC</li>
<li> We are honest with our customers, we don't promise things and not deliver</li>
<li> We promise high quality games, with no graphical downgrades on release</li>
<li> We stick to our word, we do not mislead our customers to gain a quick buck off them</li>
</ol>
</div>
</body>
</html>
.horiznavli {
float:left;
padding:20px 32px 20px;
border-color: #333333;
background-color: #333;
color:white;
text-align: center;
font-family: "Lucida Grande", Times, Serif
}
.horiznavli:hover{
background-color: #4CAF50;
}
.horiznavli:active{
background-color: grey;
}
#HorizNav{
position: relative;
left: -60px
}
#HorizNav #spaced {
}
#HorizNav.ul li:nth-child(3)
{
float:right!important;
margin-left:100px!important;
}
It's better if you had added your html code as well. Anyway if you are using bootstrap you can use this code and no need of css.
<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">Homepage <span class="sr-only">(current)</span></li>
<li>Contact us</li>
<li>Games</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>About</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Otherwise if you are using html and css only, use this code.
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>Games</li>
<li>Contact</li>
<li style="float:right">About</li>
</ul>
</body>
Tell me if this is what you wanted.
I saw this post Navigation Menu CSS loads slowly, causes it to align vertically for a few seconds?
Tried it but it didn't help.
Using it in asp.net project.
Site.Master code:
<head>
<style>
.body {
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}
.navbar {
margin-bottom: 0;
background-color: black;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 2px;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
color: black !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #fff !important;
background-color: #fbb534 !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
</style>
</head>
<body data-target=".navbar">
<header>
<nav class="navbar navbar-default" style="margin-bottom: 0px; clear: none; background-color: white; border-color: white;">
<div class="container" style="margin-left: 0px;">
<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>
<img src="../../Images/Logo.png" width="130" height="40" style="margin-right: 40px;" />
</div>
<div class="collapse navbar-collapse" id="myNavbar" >
<ul class="nav navbar-nav navbar-left">
<li style="padding-left: inherit"><a id="A1" runat="server" href="~/Admin" title="Admin">ADMIN</a></li>
<li style="padding-left: inherit"><a id="A2" runat="server" href="~/Configuration" title="Configuration">CONFIGURATION</a></li>
<li style="padding-left: inherit"><a id="A3" runat="server" href="~/Reports" title="Reports">REPORTS</a></li>
<li style="padding-left: inherit"><a id="A4" runat="server" href="~/Upload" title="Upload">UPLOAD</a></li>
<li style="padding-left: inherit"><a id="A5" runat="server" href="~/Billing" title="Billing">BILLING</a></li>
</ul>
</div>
</div>
</nav>
</header>
</body>
after 1-2 seconds:
----------------------EDIT STARTS HERE-----------------------
Note: Bootstrap css were not used, extremely sorry for that.
Plain css and html in site.master page are used.
Ok, So I finally, kind of, found the issue myself.
Trials: Tried all the suggestions provided in the answers, Thank you all for that but they didn't help.
Issue: I created an empty aspx page with no content in it and loaded it with master page. What I see is below:
On the other hand when the page with some content loads it sets the navbar correctly like this, looks like when the Admin page loads it is empty for 1-2 seconds and when it renders it sets the correct style:
So what I did is I put below code to make it less ugly :(
li{
display: inline;
}
which now will show up like :
Any other suggestions guys ?
Your code is missing the part where you include Bootstrap, and that is the main point. Your navbar is styled by Bootstrap, so it won't be styled until the Bootstrap's CSS file is loaded.
Put the Bootstrap CSS in the <head> part of your page in a <link> element.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
This is your code without bootstrap: https://jsfiddle.net/xa2ychxn/ and this is your code with the Bootstrap's CSS file in the <head> section: https://jsfiddle.net/edaovwjt/
You are using class names from Bootstrap (navbar navbar-default). As you don't have any CSS code to make the navbar inline, when you finally get the expected result that means that something else gets loaded: that's Bootstrap.
I think you are loading something in the page using Ajax, and the content that is loaded contains bootstrap's CSS. That's why you don't know that you are using it, and why it is loaded some time after the page rendering.
Have you tried putting the styles in a CSS file or in a style tag in the head?
<html>
<head>
<style type="text/css">
.navbar {
margin-bottom: 0px;
clear: none;
background-color: white;
border-color: white;
}
.container {
margin-left: 0px;
}
.navbar-header img {
margin-right: 40px;
width: 130px;
height: 40px;
}
.navbar-left li {
padding-left: inherit;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<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>
<img src="../../Images/Logo.png" />
</div>
<div class="collapse navbar-collapse" id="myNavbar" >
<ul class="nav navbar-nav navbar-left">
<li><a id="A1" runat="server" href="~/Admin" title="Admin">ADMIN</a></li>
<li><a id="A2" runat="server" href="~/Configuration" title="Configuration">CONFIGURATION</a></li>
<li><a id="A3" runat="server" href="~/Reports" title="Reports">REPORTS</a></li>
<li><a id="A4" runat="server" href="~/Upload" title="Upload">UPLOAD</a></li>
<li><a id="A5" runat="server" href="~/Billing" title="Billing">BILLING</a></li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
Alternatively, if you do have a linked CSS sheet, check the styles applied to the classes in your header. Some of the elements are probably rendered according to the CSS styles first, then the inline styles are overriding them as elements are rendered.
I know this might be a longshot but can you try using Minified versions of the bootstrap and jquery.Just give it a try and let me know
Try using these :
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
The problem seems to come from external style sheets.
During the brief period where the LI elements are displayed vertically, i guess you're still busy loading CSS from external files.
Does it still happen if you add the following CSS to the style element in the head of your page?
.navbar ul
{
list-style:none;
}
.navbar ul li
{
display:inline-block;
}
.navbar ul li a
{
/* i have no idea if this is right. it is just an approximation. */
/* you will have to fiddle with it until it is right. */
padding:10px 20px;
}
(or see this codepen)
I've been trying to get my site's navbar-brand text to be responsive: I want it to get smaller as the screen is resized. Right now, what happens is that my brand text won't change size on mobile. This creates an ugly stacking of the navbar links over the navbar-brand. I've tried putting
#media (max-width: 400px) {
.navbar-brand {
font-size: 14px;
}
}
in my CSS, but to no avail. Is there something simple that I'm missing?
Here's a screenshot, to show you what I mean:
Medium-sized screens
HTML:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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" href="index.html">Sample Company Law Group, Inc.</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>
Home
</li>
<li>
About
</li>
<li>
Attorneys
</li>
<li>
Practice Areas
</li>
<li>
References
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
https://jsfiddle.net/frzbpkjk/
First, I tested your css and it works. You can see an example working on this link:
http://codepen.io/eMineiro/pen/Kzjymp
<div class="navbar-brand">
<p>Test</p>
</div>
1) The problem could be on your css code. Check if you have another "font-size" that may be overloading your code.
2) The most easily way to see what is happening is to open you browser developer tools and check what style browser is calling when your media screen is less than 400px
Any example below could override your code:
/* Any media with max-width greater than 400px could override your code */
#media (max-width: 500px) {
.navbar-brand {
font-size: XXpx;
}
}
/* Any media with min-width lower than 400px could override your code */
#media (min-width: 200px) {
.navbar-brand {
font-size: XXpx;
}
}
/* Any media with max-width greater than 400px could override your code */
#media (max-width: 500px) {
.navbar-brand {
font-size: XXpx;
}
}
/* Any media with min-width lower than 400px could override your code and max-width greater than 400px */
#media (min-width: 200px) and (max-width: 500px) {
.navbar-brand {
font-size: XXpx;
}
}
My main issue with using CSS libraries is that they often overwrite custom CSS styles that I specifically set. For example, here I have a list that exists within a Bootstrap expand/collapse menu:
<ul class="nav navbar-nav">
<li>
<img src="images/arrow.gif" style="width: 20px;">Link A
</li>
</ul>
I want to set my own font color, so I use the following CSS:
nav li {
font-size: 16px;
color: #004687;
}
But when I view in Firefox's Inspector, I see the color I have chosen is being overridden by Bootstrap.
My custom CSS occurs after the Bootstrap files have been loaded in the of the HTML document.
How do I prevent this happening without setting style="color: #004687" to every element?
EDIT: Thanks for the suggestions thus far, but none have been successful. I'm pasting the full original code to give you greater detail:
<div class="container">
<header class="navbar navbar-static-top bs-docs-nav">
<div class="col-md-4 visible-xs" id="mobile-nav-outer">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Menu
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" id="mobile-nav-inner" role="navigation">
<ul class="nav navbar-nav">
<li>
<img src="images/arrow.gif" style="width: 20px;">Link A
</li>
</ul>
</nav>
</div>
</header>
</div>
My CSS is included like this:
<head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/docs.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
#mobile-nav-outer {
border: 1px solid #CCC;
background-color: #FFF;
}
#mobile-nav-inner {
border: 1px solid #CCC;
background-color: #FFF;
margin: 3px;
}
nav li {
font-size: 16px;
color: #004687;
}
.nav-mobile-link {
font-size: 16px;
color: #004687;
}
</style>
</head>
EDIT 3: I have found a cheap workaround by using ID's rather than classes which works due to CSS specificity (ID's override classes). This isn't a very clean solution and I'd still like to know why I cannot override the Bootstrap classes with my own.
Overwrite it with additional class added to the list:
<ul class="nav navbar-nav custom-class">
<li>
<img src="images/arrow.gif" style="width: 20px;">Link A
</li>
</ul>
and in your custom styles:
.nav.custom-class li {
font-size: 16px;
color: #004687;
}
try to place custom css file below bootstrap.css.
or
nav li {
font-size: 16px !important;
color: #004687 !important;
}
I'm designing a website using Twitter's Bootstrap, and I'm having difficulty with the responsive navbar. In bootstrap, the navbar allows a mobile user to click an icon to extend the navbar and display navigation links. I'm unable to find how to adjust the maximum height... when I try and use one of the drop down bars, the navbar doesn't change size accordingly, and the user is unable to see any of the links.
Thanks for any help you can provide.
-A
EDIT: here's the code that I'm using for the navbar (html) the css that I'm using is the standard bootstrap.css and bootrstrap-responsive.css:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="http://example.com">organization</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home</li>
<li class="active">Contact</li>
<li>Now Playing</li>
<li class="dropdown">
Public Resources <b class="caret"></b>
<ul class="dropdown-menu">
<li>Observatory</li>
<li>Planetarium</li>
<li class="divider"></li>
<li class="nav-header">For Teachers and Schools</li>
<li>Programs</li>
<li>Host an Event</li>
<li>Educational Initiatives</li>
</ul>
</li>
<li class="dropdown">
Undergraduate Resources <b class="caret"></b>
<ul class="dropdown-menu">
<li>Observatory</li>
<li>Planetarium</li>
<li class="divider"></li>
<li class="nav-header">Physics</li>
<li>Physics Homepage</li>
<li>Physics and Astronomy</li>
</ul>
</li>
<li>Volunteer</li>
<li>FAQ</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
The default navbar html code is the following:
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
And if you inspect the navbar element you will find that the inside div (navbar-inner) has the class:
.navbar-inner {
min-height: 40px;
}
You can remove this value and find that the navbar remains the same height, that's normal, because the height of the navbar is set to "auto". Therefore if you remove the min-height the height will depend of the link tags padding, inside the <ul></ul>, and the <a class="brand"></a> padding as well.
.navbar .nav > li > a {
float: none;
**padding: 10px 15px 10px;**
color: #777;
text-decoration: none;
text-shadow: 0 1px 0 #FFF;
}
.navbar .brand {
display: block;
float: left;
**padding: 10px 20px 10px;**
margin-left: -20px;
font-size: 20px;
font-weight: 200;
color: #777;
text-shadow: 0 1px 0 #FFF;
}
If you change it, you will find that the height of the "navbar" parent will automatically change. You can also maintain the min-height property and just change its value, adjusting the padding of the elements I've mentioned above.
For the responsive part, you can edit all the styles in the bootstrap-responsive.css, inside the specific media query for the resolution that you want to edit.
EDIT: Just saw your HTML, check the padding of your link tags inside the navbar, reduce it, change the .navbar-inner min-height too, and play with the values.
Ok, the way I fixed the first part (having a header that didn't resize when I wanted to) was by changing the min width value in the bootstrap-responsive.css like so:
#media (min-width: 1200px) {
.nav-collapse.collapse {
height: auto !important;
overflow: visible !important;
}
}
where 1200px was changed to 1200 from 980. Tricky tricky... for the record, it's on line 1104.