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.
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
I am writing a basic website for a friend, who makes short films and wants to have a site to present his work.
I have a very easy question but sadly can't find a good (or at least understandable for me) answer for it.
I have a site with 5 pictures in a row, each picture is a short film.
Now I want to make sth. to show the "movie details" like this
Since I am not a "pro" I was thinking to use a modal or popover, but I'm struggling trying to customize the layout in both.
So my questions are
Can I customize the layout of modals & popovers, not only colors etc?
Should I use one before the other? It appears to me that modals are "better" if targeting mobile phones, since popovers normally react to hover actions (not possible in many mobiles)
Here my "testing" CodePend https://codepen.io/rgomez/pen/opvyNq
/* HEADER CSS*/
#font-face {
font-family: 'CoffeeTin';
src: url('../fonts/CoffeeTinInitials.eot');
src: url('../fonts/CoffeeTinInitials.eot?#iefix') format('embedded-opentype'), url('../fonts/CoffeeTinInitials.woff') format('woff'), url('../fonts/CoffeeTinInitials.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#myHeader .navbar {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: black !important;
}
#myHeader .navbar-brand:hover {
color: red !important;
}
#myHeader .active {
font-size: 120%
}
#navbarHome .nav-link {
font-size: 150%;
font-family: 'CoffeeTin';
color: red
}
/* BODY CSS*/
.tooltip>.tooltip-inner {
background-color: #f00;
max-width: 1000px
}
.tooltip>.tooltip-arrow {
border-bottom-color: #f00;
}
.tooltip {
width: 100%
}
html,
body {
width: 100%;
height: 100%
}
#movies {
margin-top: 4rem;
margin-bottom: 4rem
}
#movies img {
transition: all .3s ease-in-out;
}
#movies img:hover {
transform: scale(1.5)
}
/*Footer CSS*/
#myFooter {
background-color: #000000;
color: white;
}
#myFooter h5 {
font-size: 18px;
color: white;
font-weight: bold;
margin-top: 30px;
}
#myFooter a {
color: #ffffff;
text-decoration: none;
}
#myFooter a:hover,
#myFooter a:focus {
color: rgb(250, 4, 4);
}
#myFooter .social-networks {
text-align: center;
padding-top: 30px;
padding-bottom: 16px;
}
#myFooter .social-networks a {
font-size: 32px;
color: #f9f9f9;
padding: 10px;
transition: 0.2s;
}
#myFooter .contact:hover {
color: #ffffff;
background-color: #ef1a1a
}
#myFooter .facebook:hover {
color: #0077e2;
}
#myFooter .google:hover {
color: #ef1a1a;
}
#myFooter .twitter:hover {
color: #00aced;
}
#myFooter .btn {
color: rgb(0, 0, 0);
background-color: #ffffff;
border-radius: 10px;
border: 0px;
width: 10rem;
margin: 0 auto;
margin-top: .5rem;
margin-bottom: 1.5rem;
text-align: center;
display: block;
line-height: 25px;
}
<html lang="es">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-108836206-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "UA-108836206-1");
</script>
<!-- These meta tags come first. -->
<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/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href<!DOCTYPE html>
<html lang="es">
<head>
<!-- Include Global site tag (gtag.js) - Google Analytics -->
<title>Panoja Films - Guillermo Paniagua</title>
<link rel="shortcut icon" href="assets/icons/favicon.ico" type="image/x-icon">
<!-- These meta tags come first. -->
<meta charset="utf-8">
<meta name="keywords" content="film,director,pelicula,guillermo,paniagua,panoja">
<meta name="description" content="Guillermo Paniagua - Film Director Personal-Site - PanojaFilms 2017">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="application-name" content="Panoja Films">
<meta property="og:url" content="{{pageUrl}}">
<meta property="og:image" content="{{imageUrl}}">
<meta property="og:description" content="{{description}}">
<meta property="og:title" content="{{pageTitle}}">
<meta property="og:site_name" content="{{siteTitle}}">
<meta property="og:see_also" content="{{homepageUrl}}">
<!-- Include the CSS -->
<link href="https://fonts.googleapis.com/css?family=Nosifer" rel="stylesheet">
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/footer.css">
<link rel="stylesheet" href="assets/css/body.css">
<link rel="stylesheet" href="assets/css/header.css">
<!-- Include jQuery (required) and the 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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
});
</script>
</head>
<body style="background-color: black">
<header id="myHeader">
<a href="index.html">
<div id="logoHeader" class=" jumbotron-fluid img-fluid" href="#logoHeader" href="index.html" style="background: url(assets/img/logo-banner.jpg); background-size: 100% 100%; height: 15rem"></div>
</a>
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHome" aria-controls="navbarsExampleDefault">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarHome">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="cortometrajes.html">Cortometrajes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="guiones.html">Guiones</a>
</li>
<li class="nav-item">
<a class="nav-link" href="fotografia.html">Fotografia</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">Sobre Mi</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="container-fluid" id="movies">
<div class="row">
<div class="col-md">
<img class="img-fluid w-50" src="http://via.placeholder.com/200x250" data-toggle="modal" data-target="#myModal" data-placement="auto" data-trigger="click">
<p style="color: white">With Modal Test</p>
</div>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Carousel -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles">
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago">
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="col-md">
<img class="img-fluid w-50" src="http://via.placeholder.com/200x250" alt="Card image cap" data-toggle="popover" data-placement="auto" data-trigger="hover click" data-html="true" title="Cuerdos y Locos" data-content="<h1>TEST</h1>">
</div>
<div class="col-md">
<img class="img-fluid w-50" src="http://via.placeholder.com/200x250" alt="Card image cap" data-toggle="popover" data-placement="auto" data-trigger="hover click" data-html="true" title="Cuerdos y Locos" data-content="<h1>TEST</h1>">
</div>
<div class="col-md">
<img class="img-fluid w-50" src="http://via.placeholder.com/200x250" alt="Card image cap" data-toggle="popover" data-placement="auto" data-trigger="hover click" data-html="true" title="Cuerdos y Locos" data-content="<h1>TEST</h1>">
</div>
<div class="col-md">
<img class="img-fluid w-50" src="http://via.placeholder.com/200x250" alt="Card image cap" data-toggle="popover" data-placement="auto" data-trigger="hover click" data-html="true" title="Cuerdos y Locos" data-content="<h1>TEST</h1>">
</div>
</div>
</div>
<footer id="myFooter" class="">
<div class="container-fluid">
<div class="row">
<div class="col social-networks">
<h5>Youtube</h5>
<a href="https://www.youtube.com/user/panojas90" target="_blank" class="google">
<i class="fa fa-youtube"></i>
</a>
</div>
<div class="col social-networks">
<h5>Facebook</h5>
<a href="#" class="facebook">
<i class="fa fa-facebook"></i>
</a>
</div>
<div class="col social-networks">
<h5>Twitter</h5>
<a href="#" class="twitter">
<i class="fa fa-twitter"></i>
</a>
</div>
</div>
<div class="row">
<a class="btn btn-light contact text-center" href="mailto:" role="button">Contáctame</a>
</div>
<div class="footer-copyright text-center mt-5">
<p>© 2017 Copyright
PanojaFilms - All Rights Reserved. </p>
</div>
</div>
</footer>
</body>
The page container shrinks when a cell inside a row is empty or does not have enough contents.
html,
body {
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #f3f3f4;
color: #676a6c;
height: 100%;
}
.box {
border: 1px red dotted;
}
#side-menu {
background-color: #2f4050;
padding: 0px;
}
#side-menu h1 {
color: #1f3647;
text-align: center;
margin: 10px 0px;
font-size: 25px;
}
.display-table {
display: table;
padding: 0px;
height: 100%;
}
.display-table-row {
display: table-row;
height: 100%;
}
.display-table-cell {
display: table-cell;
height: 100%;
float: none;
}
.valign-top {
vertical-align: top;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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 -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/default.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid display-table">
<div class="row display-table-row">
<!-- side menu -->
<div class="col-md-2 display-table-cell valign-top" id="side-menu">
<h1>Navigation</h1>
</div>
<!-- main content -->
<div class="col-md-10 display-table-cell valign-top box">
<div class="row">
<header>
<div class="col-md-5">
<input type="text" name="term" placeholder="Search anythhing ...">
</div>
<div class="col-md-7">
<ul>
<li>Welcome to administration area</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-bell" aria-hidden="true"></span>
<span class="label lable-warning">3</span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
<span class="label lable-message">3</span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Log out
</a>
</li>
</ul>
</div>
</header>
</div>
<div class="row">
<footer>
<div class="pull-left"><b>Copyright</b> © 2017</div>
<div class="pull-right"><b>Admin System</b></div>
</footer>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
And as you can see i am using bootstrap to build my page. Container class is <div class="container-fluid display-table">
The page is supposed to be 100% width but it is having a left and right margins as shown here :
And when i fill the col-md-5with some text that is what i get :
Any idea why this is happening ??
I got this working with just adding width: 100% to the table element.
.display-table {width: 100%;}
Hope this solves the issue.
Agreed added 100% on display-table will give you your result you are wanting.
See screenshot screenshot
In my code when size of screen changes, the collapse icon appears but when i click that icon none of contents are visible.
and another problem is i want background of section element to be an image, so i added background-image in css but that's not working.
body {
padding-top: 70px;
}
.navbarhead{
background-color: #BDBDBD;
height: 100px;
border-style: solid;
border-right: none;
border-top: none;
border-left: none;
}
#navitem{
font-size: 20px;
color: black;
}
.btn-small{
padding:10px 25px;
}
#btnin, #btnin:hover,#btnin:focus {
color: #fff;
font-family: 'open_sanssemibold';
font-size:20px;
background-color:black;
text-decoration:none;
}
#btnup, #btnup:hover,#btnup:focus {
color: black;
font-family: 'open_sanssemibold';
font-size:20px;
background-color:white;
text-decoration:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>ShortFundly-LeaderBoard</title>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width, initial-scale=1.0">
<!-- Viewport Meta Tag -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
<!-- Style sheet -->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/leaderboard.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/leaderboard-responsive.css" media="screen">
</head>
<body>
<!--navbar starts-->
<nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top navbarhead">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse in navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="https://www.shortfundly.com">
<img src="https://www.shortfundly.com/tpl/main/v4/images/logo.svg" class="img-fluid" alt="Shortfundly Logo" />
</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item" id="navitem">
<a class="nav-link" href="#">Community</a>
</li>
<li class="nav-item" id="navitem">
<a class="nav-link" href="#">Collaborate</a>
</li>
<li class="nav-item" id="navitem">
<a class="nav-link">LeaderBoard</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right my-lg-0 m-0">
<li>sign in</li>
<li>sign up</li>
</ul>
</div>
</nav>
<!--navbar ends-->
<!-- HEADING STARTS -->
<section style="background-image: url('banner.png');margin-top: 100px;">
<div class="container">
<div class="Jumbotron">
<h1>My Jumbotron</h1>
<p>Think BIG with a Bootstrap Jumbotron!</p>
</div>
</div>
</section>
<!--HEADING ENDS-->
</body>
</html>
mgur.com/CE0Fm.jpg
Add these two scripts in your section, bootstrap doesn't work if you haven't defined jquery and bootstrap.js scripts
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
Make sure you have added all the Bootstrap 4 cdns to your project. It looks like you're missing the necessary JavaScripts.
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
Also, I'd remove height: 100px; from your .navbarhead in your css to make sure the collapsed menu displays properly.
You should also add some styles to your .navbar-brand at the collapse breaking point for good measure. On very small screens, I would take the margin off of your login buttons. The use of !important here is bad practice, but sometimes it is useful when doing overrides for edge cases.
#media screen and (max-width: 992px) {
.navbar-brand {
align-self: flex-end;
margin-top: -2.5rem;
}
.m-4 {
margin: 0 !important;
}
}
See the: CodePen Demo
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?