I need to set the height of the logo same as the header. Though I set the height of the logo as 100% it doesn't take the height of the header. I am not sure how to set the height of the logo as the header height. Here is my code
app.css
body {
font-family: 'Open Sans', sans-serif;
border-top:none;
}
.navbar {
margin-bottom: 0px;
padding: 10px 15px;
}
.navbar img {
width : 100%;
height : 100%;
}
Master page
You can see the reference of the logo in the header element
<header>
<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>
<img src="~/Images/NGSR-logo.jpg" />
</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>Requests</li>
<li>Activities</li>
<li>Reports</li>
<li>Admin</li>
<li class="dropdown">
Country <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>
<li>Save View</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
Header view
Try to set a max-width for the logo image:
.navbar-header img{
max-width:280px;
}
and then set padding to zero for the navbar:
.navbar{
padding:0;
}
For my example I picked a random logo from google, however that should give you the general idea!
Fiddle here: https://jsfiddle.net/captain_theo/f1a5bda1/
Related
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'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'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>
Beginner question that I don't want to set in stone at the beginning of my home page before I move on to the basic content. I have a header conaining a fluid fluid container, a logo with a relative position from the left, and a menu I want relative to that logo, all on he same line. My CSS is as follows:
Top container:
.container-fluid {
background-color: #30302f;
height: 90px;
}
Menu items to the right of the logo
.dropdown-menu-right a {
color: #fff;
font-size: 16px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
position: relative;
right: 160px;
}
Assure list stays on the same line
.container li{
display: inline-block;
}
Logo
.navbar-header a {
background-color: #30302f;
height: 69px;
weidth: 367px;
position: relative;
left: 120px;
}
So is there a correc method to make sure my menu always says on the same line and to the right of the logo, and maintains flexibility for changes/additions down the road as I add to the header? (social buttons, search bar, dropdown menu for phone media, etc...)?
If your goal was to do this using twitter bootstrap as your tags suggest then you really don't need to write all of that custom css because bootstrap comes with a of that functionality built in. For more details I'd checkout bootstrap's documentation.
Example
<div class="container">
<div class="row">
<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">
<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="#">Logo</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="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>
Using the bootstrap v3 framework How do I create a Navigation header that is below or part of a jumbotron or large container (like a marquee image) but sticks to the top when user scrolls down?
I started with the bootrap example and placed it below a marquee image. However, how do you change to navbar-fixed-top and detect when user has scrolled to an appropriate position?
Example:
poolhousedigital.com
HTML:
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<div id="intro" class="container">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs ยป</a>
</p>
</div> <!-- /container -->
</div> <!-- /jumbotron -->
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</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 class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
CSS:
body {
min-height: 2000px;
padding-top: 0px;
}
.jumbotron {
position: relative;
background: none;
padding: 0px;
margin-bottom: 0px;
min-height: 500px;
}
.jumbotron:after {
content:"";
background: url("img/2gratermay20121.jpg");
background-repeat:no-repeat;
background-position: 0% 0%;
background-size: 100% 100%;
opacity: 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
See this example on Bootply: http://bootply.com/95797
The example uses a masthead, but you can replace this with your jumbotron.
Here is another example.. http://bootply.com/96188#
Both use the Affix plugin to attach the nav after scroll.