I have used Bootstrap's nav classes for navigation menus on several projects, but never run into this before and after poking the code for this all day, I just can't seem to figure out what's causing the links in the menu items to appear below the actual menu item.
Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous">
</script>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<title>My Page</title>
</head>
<style>
.topbar {
background-color: #572700;
width: 100%;
/* display: block; */
height: 45px;
margin-right: 0px;
margin-left: 0px;
}
.brownbar-text-header {
color: #FFF;
font-size: 18px;
display: table-cell;
height: 45px;
vertical-align: middle;
}
header div .container-fluid {
margin-top: 10px;
margin-left: 0px;
padding-left: 0px;
margin-right: 0px;
padding-right: 0px;
}
.brownbar-text-header a {
color: #FFF;
font-size: 18px;
}
.brownbar-text-header a:hover {
transition: color 0.1s ease 0s;
transition-property: color;
transition-duration: 0.1s;
transition-timing-function: ease;
transition-delay: 0s;
color: #3a9b81;
opacity: 0.3;
}
</style>
<body>
<header>
<div class="row topbar">
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topbar-nav" 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>
</div>
<div class="collapse navbar-collapse" id="topbar-nav">
<ul class="nav navbar-nav brownbar-text-header">
<li>
Welcome User Logout
</li>
<li> Some Text Goes Here Link</li>
<li> Some Text Goes Here Link</li>
<li> Some Text Goes Here Link</li>
<li> Some Text Goes Here Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</header>
</body>
</html>
The text inside your list tags is wrapping. Just put the whole thing inside a span, like so:
<li><span>Some Text Goes Here Link</span></li>
If I understand your problem correct I think I found a solution :)
Your li's are wrong
<li> Some Text Goes Here Link</li>
You need to do it like this:
<li>Some Text Goes Here</li>
Here is your jsfiddle updated
Also if this is intended, the reason why your 'Link' goes below your navbar is that you put a fixed height on your .topbar class of 45px, you could remove the height as in my jsfiddle, and it will go as far as there is content for it to show :)
Hope I could help you out
// Marc Hjorth
Related
Using Bootstrap 4 beta.
My responsive navbar contains a logo in the navbar-brand on the left side and an inline menu of links on the right side. When the viewport changes, the navbar collapses correctly, but the logo does not shrink as it should. This forces the hamburger to wrap below the logo for the smallest viewports.
I would like the logo to shrink to the point where wrapping the toggler button is not necessary.
MIG Logo
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/>
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<style>
#wrapper {
min-height:100%; /* For Sticky Footer */
position:relative;
}
.mig-header-menu-bar{
border-style: solid;
border-width: 3px;
border-color: #7C9D63;
}
.mig-header-menu-bar a:link, a:visited{
color: #00008B;
text-decoration: none;
}
.mig-header-menu-bar a:hover, a:active {
color: #7C9D63;
text-decoration: none;
}
.mig-header-menu-toggle-button{
color: white;
background-color: #7C9D63;
max-height: 50px;
z-index: 9900;
margin-top: 1.5rem;
}
.mig-header-menu-bar .nav-pills .nav-item.show .nav-link {
background-color: #7C9D63;
}
.mig-header-menu-bar .dropdown-menu {
border-bottom-width: 4px;
border-bottom-color: #7C9D63;
}
.more-rounded {
border-radius: .50rem;
}
</style>
</head>
<body>
<div id ="wrapper">
<nav class="navbar navbar-expand-md navbar-toggleable fixed-top pt-0" style="background-color: #515254;"> <!-- navbar-expand -->
<div class="nav w-100 justify-content-between align-middle">
<a class="navbar-brand mt-2" href="http://www.methodinvestmentgroup.com">
<img class="img-fluid" alt="Method Investment Group logo" src="https://i.stack.imgur.com/s3oSY.jpg">
</a>
<!-- </div> -->
<button class="navbar-toggler mig-header-menu-toggle-button" type="button" data-toggle="collapse" data-target="#MIGnavbarToggler" aria-controls="MIGnavbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon ">☰</span>
</button>
<div class="collapse navbar-collapse justify-content-end " id="MIGnavbarToggler">
<div class='mig-header-menu-bar more-rounded bg-faded'>
<ul class='nav nav-pills more-rounded bg-light' >
<li class='nav-item'>
<a class='nav-link' href="index.php">Login</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="About.php">About Us</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="ShowFAQ.php">Frequently Asked Questions</a>
</li>
</ul>
</div>
</div> <!-- End of collapse div -->
</div>
</nav>
<!-- jQuery first, then Popper, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I added an id to the parent div and the following media query:
#media screen and (max-width: 340px){
#mig-header > a {
max-width: 200px;
}
#mig-header > button {
padding: 0.25rem;
}
}
It works perfectly.
This works for me to shrink the logo on mobile:
.navbar-brand img {
max-width: 100%;
}
You should set fixed dimensions for your logo like so:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="https://placehold.it/60" width="30" height="30" alt="">
</a>
</nav>
That's because the height of the navbar does NOT change and that's the officially recommended way of doing it:
https://getbootstrap.com/docs/4.0/components/navbar/#brand
In a Bootstrap nav-bar, I'm trying to create two items whose drop-shadows intersect each other.
http://codepen.io/anon/pen/gaEJWY
It currently looks like this:
But I want it to look like this:
Anyone have an idea how to make this happen(using CSS preferably)?
.navbar-inner {
box-shadow: 0px 4px 8px #888888;
}
.navbar-brand {
background: #F8F8F8;
width: 160px;
height: 160px;
border-radius: 50%;
position: absolute;
box-shadow: 0px 10px 8px #888888;
margin-top: -25px;
padding-top: 29px;
padding-left: 29px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine or request Chrome Frame -->
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<!-- Use title if it's in the page YAML frontmatter -->
<title>My Product</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link href="/stylesheets/all.css" rel="stylesheet" />
<script src="/javascripts/all.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="navbar-inner">
<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="#">
<img src="//placehold.it/100x100">
</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">Store Locator</li>
<li>Share</li>
<li>Cocktails</li>
<li>Shop</li>
<li>Blog</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</nav>
<!--<div class="container">-->
<!--<img src="images/header-video.jpg">-->
<!--</div>-->
</body>
</html>
Many thanks!
You can create a pseudo element that will be behind your circle with the same color and height as the navbar.
You have to do the maths on the positioning, but it works.
.navbar-brand:before{
/* bigger than the circle to mask the shadow 1*/
width:200px;
/* same height as navbar */
height:50px;
content:".";
overflow:hidden;
text-indent:99999px;
display:block;
background: #F8F8F8;
position: absolute;
/* cause your div has margin -25px */
top:25px;
/* so it will mask everything on the sides */
left:-15px;
}
.navbar-brand > * {
/* everything inside the navbar brand need to have its positioning set */
position: relative;
}
Pen
I've a bootstrap formatted page with a fixed top navbar.
What I want is to set a full width (fixed height) cover image just over the nav (responsive possibly...).
I've tried this, but the cover just not show.
UPDATE1:
the navbar is showed in bottom of the page (like a footer)... don't understand why...
Here is my HTML:
<div class="CoverImage FlexEmbed FlexEmbed--3by1" style="background-image:url(http://placeimg.com/1000/1000/nature)"></div>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
...
...
...
Navbar CSS customization and cover CSS:
body {
min-height: 2000px;
padding-top: 70px;
}
.navbar-brand,
.navbar-nav li a.main-bar{
line-height: 70px;
height: 70px;
padding-top: 0;
}
.FlexEmbed {
display: block;
overflow: hidden;
position: relative;
}
.FlexEmbed:before {
content: "";
display: block;
width: 100%;
}
.FlexEmbed--3by1:before {
padding-bottom: 33.33333%;
}
Thanks in advance stackoverflow community!
UPDATE 2:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>MySite</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css" rel="stylesheet">
<link href="dist/css/navbar-fixed-top.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="CoverImage FlexEmbed FlexEmbed--3by1" style="background-image:url(http://placeimg.com/1000/1000/nature)"></div>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">
<img style="max-width:70px; margin-top: 9px;" alt="IBA" src="#">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Mydropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>element1</li>
<li class="divider"></li>
<li>element2</li>
<li>element3</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>element4</li>
<li>element5</li>
<li>element6</li>
</ul>
</div>
</div>
</nav>
<div class="container" id="content"></div> // here I paste all the content via jQuery
</body>
</html>
Heres a fiddle to my problem.
I hope I understood your question correctly. One option is to position your background fixed as well. By adding width: 100%; and background-size: cover; you'll get it to cover completely.
Update:
To get it to be more like a "Facebook cover image" add a height to the image and remove the padding-top: 70px; on the body. Then you should be set.
.FlexEmbed {
display: block;
position: fixed;
top: 0;
width: 100%;
height: 70px;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
You could also add some margin to your .navbar-fixed-top to see that the background is displayed on top.
.navbar-fixed-top {
top: 70px;
}
Check out my updated demo here.
Use JsFiddle to create a live demo.
The navbar is at the bottom because you have the image display as block;
I'm not quite sure either about what you're trying to achieve but, have you tried with z-index?
I am using twitter bootstrap in Bonfire. I am trying to have a footer at the bottom page if there is less content, and if there is more content, the footer goes towards the end.
I have been trying for hours, and not able to find out what I am missing. I checked examples and codes available, but not able to find out what is different, or missing.
Would really appreciate if anyone could point out what is missed here.
<!doctype html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/jumbotron/css/bootstrap.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/assets/css/bootstrap-responsive.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/jumbotron/css/footer_style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/jumbotron/css/jumbotron.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/default/screen.css" media="screen" />
<link rel="shortcut icon" href="http://localhost/bonfire/public/favicon.ico">
</head>
<body>
<div class="wrapper">
<div class="navbar navbar-inverse navbar-fixed-top" 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="#">Brokerage Free - PAN Services </a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-left">
<li class="dropdown">
Apply for PAN <b class="caret"></b>
<ul class="dropdown-menu">
<li >New PAN Application</li>
<li class="divider"></li>
<li>Replacement PAN Application</li>
<li class="divider"></li>
<li>Correction PAN Application</li>
</ul>
</li>
<li >FAQ</li>
<li>Track Application Status</li>
<li>Contact Us</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
<div class = "container">
<h1> Privacy Policy </h1>
We are a financial Services Company, offering a wide variety of Financial Services.
</div><div class="push"></div>
<footer>
<div class="container">
<div class="span12">
<div clas="row">
<div class="span2 offset1">About US</div>
<div class="span2 ">Privacy Policy</div>
<div class="span2 ">Terms of Use</div>
<div class="span2 ">Contact Us</div>
</div>
<div class="push"></div>
</div>
<div class="row">
<p align="center">© Brokerage Free 2014. - All rights reserved.
</div>
</div>
</footer>
</div>
The footer_style.css is given below:
<style>
html, body {
height: 100%;
}
footer {
color: #666;
background: #222;
padding: 17px 0 18px 0;
border-top: 1px solid #000;
height: 150px;
position: relative;
}
footer a {
color: #999;
}
footer a:hover {
color: #efefef;
text-decoration: none;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -250px;
}
.push {
height: 63px;
}
/* not required for sticky footer; just pushes hero down a bit */
.wrapper > .container {
padding-top: 60px;
padding-bottom: 60px;
}
#main {
overflow:auto;
padding-bottom:250px; /* this needs to be bigger than footer height*/
}
.container .credit {
margin: 20px 0;
}
</style>
This problem is a CSS problem and had nothing to do with Bonfire. I am posting this solution so if someone has a similar problem in the future, might benefit out of this.
The following link helped me with finding a solution:
http://css-tricks.com/snippets/css/sticky-footer/
The way to go about fixing this issue was to have a wrapper div, and a footer div that is outside of the wrapper div. The link has details.
Best.
I've been using bootstrap3 and Jekyll to improve a website. I've made a header.html file for the _include folder that will be included in pages to provide a jumbotron and navbar beneath.
This is a link to a copy of the entire folder in case I omit anything here and the index page should load in other people's browsers who may or may not experience my problem: https://www.dropbox.com/sh/bv59k92zjt142vp/F62a6bxeCJ
My problem is that if I load index.html in my browser at localhost 4000 (Jekyll server set to watch mode), everything in the header.html and my index.html content is displayed correctly, but as I scroll, sometimes when the navbar becomes fixed to the top the content of the page beneath it continues to scroll over it and overlap the bar, and sometimes it does not. In addition if I mouse over a button in the index page content when the content is not overlapping the navbar, upon mouse over it does overlap the navbar and stays there.
I'm having trouble understanding why this is so. I've provided my header.html code and css below in addition to the link to the folder.
The header as you can see has a navbar with affix behavior:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{ page.title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="{{ site.description }}">
<link href="/css/bootstrap.css" rel="stylesheet">
<link href="/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css" type="text/css"/>
<style>
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></sc\
ript>
<![endif]-->
</head>
<body>
<!-- First we begin the main container that contains all content, this is closed in the footer.html file right at the end -->
<div class="container-fluid main">
<!-- Start of JumboTron -->
<div class="jumbotron">
<div class="row">
<div class="col-lg-4">
<img src="{{ page.headimage }}" class="img-rounded">
</div>
<div class="col-lg-8">
<div class="page-header">
<h2> {{ page.title }} </h2>
<p> <h2> <small> {{ page.subtitle }} </small> </h2> </p>
</div>
</div>
</div>
</div>
<!-- End of JumboTron -->
<!-- Start of the Navigation Bar, this is supposed to have sticky behaviour -->
<div class="row-fluid">
<div id="menubar" class="navbar navbar-inverse affix-top" data-spy="affix" data-offset-top="280">
<div class="navbar-header">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="https://github.com/Ward9250/HybRIDS">HybRIDS</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About HybRIDS</li>
<li>Getting Started</li>
<li>Quick Start</li>
<li>Full Documentation</li>
<li>Contact</li>
<li class="dropdown">
Download<b class="caret"></b>
<ul class="dropdown-menu">
<li>GitHub Repository</li>
<li>Download TAR</li>
<li>Download ZIP</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- End of the navbar, it stretches across the screen like the jumbotron does and lies immediately below it -->
<!-- Now we open up the container that holds all the other content in the webpage that lies underneath this standard header -->
<div class="container">
The navbar is supposed to be affixed to the top. The corresponding relevant CSS for the index page is defined in my custom.css file:
/* Set the page's background colour */
body {
background-color: #333333;
padding-bottom: 100px;
}
/* Alter class for navbar to give format and special behaviour */
.navbar {
position: sticky;
}
.container-fluid .main{
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
/* For making paragraphs white in font */
.whitep {
color: white;
}
.jumbotron {
margin-bottom: 0px;
background-image: url(../img/carouelbackground.jpg);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
color: white;
text-shadow: black 0.3em 0.3em 0.3em;
}
/* Styling for the side menubar and affixed navbar for the pages */
#menubar.affix {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
}
Try to move <div class="container"> in the next _includes/ file instead of keeping it in the header.