I know this has been asked a million times and I thought I had done it right, but when my friend checked my site out on his screen there was a gap between the footer and the bottom of his screen, because on my screen it sits perfectly.
The php code is from laravel, but I think this is a css issue.
I can't see where I went wrong with this.
My css
html, body{
height: 100%;
width: 100%;
}
.container-fluid {
padding-right: 0;
padding-left: 0;
padding-bottom: 20px;
}
.contact_wrapper {
background: #fff none repeat scroll 0 0;
height: 234px;
position: absolute;
}
My template
<body>
<div class="container-fluid">
<!-- BEGIN MENU SECTION -->
<nav class="navbar navbar-default main_menu_wrapper">
<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 href="{!! url('/') !!}" class="navbar-brand">
<img src="{!! asset("img/logo-for-site2.jpg") !!}">
</a>
</div>
<div class="collapse navbar-collapse menu_wrapper" id="bs-example-navbar-collapse-1">
<form action="{!! route('search') !!}" method="POST" role="search" class="navbar-form navbar-right search">
{{ csrf_field() }}
<div class="form-group">
<input type="text" class="form-control" name="search" placeholder="Search...">
</div>
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</form>
<ul class="nav navbar-nav navbar-right">
#foreach($menus_child as $grandfather)
#if($grandfather->menu_id)
<li>
#elseif($grandfather->title == 'Home')
<li class="parent {!! menu_active($grandfather->id) !!}">
#elseif(count($grandfather->menusP()->where('menu_id', '>', 0)->get()))
<li class="dropdown {!! menu_active($grandfather->id) !!}">
#else
<li class="parent {!! menu_active($grandfather->id) !!}">
#endif
#if(count($grandfather->menusP()->where('menu_id', '>', 0)->get()))
<a href="{!! url(getSeoLink($grandfather->id)) !!}" class="dropdown-toggle hidden-xs hidden-sm hidden-md desktop_dropdown" role="button" aria-haspopup="true" aria-expanded="false">
{!! $grandfather->title !!} <span class="caret"></span>
</a>
<a href="javascript:void(0);" class="dropdown-toggle visible-xs visible-sm visible-md mobile_dropdown" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
{!! $grandfather->title !!} <span class="caret"></span>
</a>
#else
{!! Html::link(getSeoLink($grandfather->id), $grandfather->title) !!}
#endif
#if(count($grandfather->menusP))
<ul class="dropdown-menu desktop">
#foreach($grandfather->menusP as $father)
#if($father->menu_id)
<li class="parent_child">
#else
<li>
#endif
{!! Html::link(getSeoLink($father->id), $father->title) !!}
#endforeach
</ul>
#endif
#endforeach
</ul>
</div>
</div>
</nav>
<!-- END MENU SECTION -->
<!-- BEGIN CONTENT SECTION -->
#yield('content')
<!-- END CONTENT SECTION -->
<!-- BEGIN FOOTER SECTION -->
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 contact_wrapper">
#include('contact::contact')
</div>
</div>
<!-- END FOOTER SECTION -->
</div>
I think I solved it. What I did was I put a div around #yield('content') and I added some extra css
html, body{
height: 100%;
width: 100%;
margin: 0; /* Add css */
padding: 0; /* Add css */
}
.container-fluid {
padding-right: 0;
padding-left: 0;
padding-bottom: 20px;
min-height: 100%; /* Add css */
position: relative; /* Add css */
}
.body-content{ /* Add css */
padding-bottom: 234px; /* Add css */
}
.contact_wrapper {
background: #fff none repeat scroll 0 0;
height: 234px;
position: absolute;
bottom: 0; /* Add css */
}
Related
I have a navbar brand image of 408px x 130. The navigation look correct in browser but i cannot make it responsive on mobile. Also the menu button does not appear. This is my navbar
<nav class="navbar default-nav">
<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 alt="#{site_title}" src="/images/logo_white.png" /></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav nav-pills navbar-right">
<li>1</li>
<li>2</li>
<li>3
</li>
<li></li>
<li class="dropdown">Accedi
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">
<form action="/" method="post" class="form">
<div class="form-group">
<label class="sr-only" for="form-username">Username</label>
<input type="text" id="username" name="email" placeholder="Email..." class="form-username form-control" />
</div>
<div class="form-group">
<label class="sr-only" for="form-password">Password</label>
<input type="password" name="password" placeholder="Password..." class="form-password form-control" id="password" />
<div class="help-block text-right">
<a href="/resetPassword"> <span class="login-link">Password dimenticata?</span>
</a>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Login</button>
</div>
<div class="checkbox">
<label> <input type="checkbox" id="rememberme" name="remember-me" /> <span>Ricordami</span>
</label>
</div>
</form>
</div>
<div class="bottom text-center">
<span>Non sei iscritto?</span> <a class="login-link" href="/register"><strong>Registrati</strong></a>
</div>
</div>
</li>
</ul></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
The style is pure bootstrap css out of this
navbar {
min-height: 130px;
line-height: 130px;
z-index: 1;
height: 130px;
}
which i need to fit the nav to the brand image height.
The problem is that when i use a mobile phone, the brand image does is not responsive, so the menu button does not appear and the logo gets all the screen...
JSFiddle
Technically the nav button is still there but because the nav element doesn't have the .navbar-default class, it isn't inheriting Bootstrap's styles. You can fix this by adding the following:
CSS
.navbar-toggle {
border-color: #ddd;
top: 37px;
}
.navbar-toggle .icon-bar {
background-color: #888;
}
You'll also need to add jQuery and Bootstrap js to enable the nav toggle for the menu
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
To fix the image you'll need to do the following (styles may need adjusting based on how you need it to look)
You can set the height of .navbar-brand to auto and remove the height from .navbar. Also, changing its box-sizing to content will allow the image to sit within the padding of the element. You'll then need to add the .img-responsive class to the logo image element.
CSS
.navbar-brand {
box-sizing: content-box;
height: auto;
}
#media (max-width: 767px) {
.navbar-brand {
max-width: 15em;
}
}
/* Optional to replace line-height centering */
#media (min-width: 768px) {
.nav {
position: relative;
top: 60px; /* ( .navbar height / 2 ) - ( #navbar height / 2 ) */
}
}
HTML
<!-- Add img-responsive class to your logo -->
<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 alt="#{site_title}" src="http://2.228.86.3:8080/images/quipark_logo_white.png" class="img-responsive" />
</a>
</div>
Here's a Codepen example: https://codepen.io/raptorkraine/pen/YrKMgg
I using Bootstrap and trying to place some text at the same line with a button. I need some words to be shown just before the button and some other after.
This is what I have:
<div class="input-group">
Match
<div class="input-group-btn" id="drop_operator_list">
<div class="btn-group btn-group-xs">
<div class="dropdown">
<button class="btn btn-primary btn-xs dropdown-toggle" id="modal-button-and-or" type="button" data-toggle="dropdown" data-target="#">
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-and-or" id="and-or" style="height: auto; max-height: 200px; overflow-x: hidden;">
<li>AND</li>
<li>OR</li>
</ul>
</div>
</div>
</div>
Everything
</div>
Although the above puts everything in the same row, it adds whitespaces before and after the strings and shows them as in the attachment:
Here's a way to achieve it with adding just one more set of div tags and moving the words outside of the input group. And a Bootply.
<div class="form-inline">
Match
<div class="input-group">
<div class="input-group-btn" id="drop_operator_list">
<div class="btn-group btn-group-xs">
<div class="dropdown">
<button class="btn btn-primary btn-xs dropdown-toggle" id="modal-button-and-or" type="button" data-toggle="dropdown" data-target="#">
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-and-or" id="and-or" style="height: auto; max-height: 200px; overflow-x: hidden;">
<li>AND</li>
<li>OR</li>
</ul>
</div>
</div>
</div>
</div>
Everything
</div>
As suggested, adding this CSS will counteract the breaking at 768px of .form-inline.
.form-inline .input-group {
display: inline-table; vertical-align: middle;
}
.form-inline .input-group .input-group-btn {
width: auto;
}
You need to set some attributes for .input-group and .input-group-btn:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.input-group {
display: inline-table;
vertical-align: middle;
}
.input-group .input-group-btn {
width: auto;
}
<div class="input-group">
Match
<div class="input-group-btn" id="drop_operator_list">
<div class="btn-group btn-group-xs">
<div class="dropdown">
<button class="btn btn-primary btn-xs dropdown-toggle" id="modal-button-and-or" type="button" data-toggle="dropdown" data-target="#">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-and-or" id="and-or" style="height: auto; max-height: 200px; overflow-x: hidden;">
<li>AND
</li>
<li>OR
</li>
</ul>
</div>
</div>
</div>
Everything
</div>
I'm attempting to preserve the position of two menu element (Home icon and Foo) that render as desired on large devices:
But are displayed as rows on a mobile device (obscuring content):
Is there a way to force these two menu items to display to the right of the Brand menu and on the same 'row'?
Sample: http://www.bootply.com/Fjq7ZXSDXc#
You can create a separate div inside the navbar-header: See example Snippet.
.navbar-header .nav-icons {
padding-top: 12px;
position: absolute;
display: inline-block;
top: 0;
}
.navbar-header .nav-icons span {
padding-left: 5px;
padding-right: 5px;
font-size: 20px
}
.navbar-header .nav-icons a {
color: #fff;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top custom-navbar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" rel="home" href="#" title="Help"> Brand</a>
<div class="nav-icons">
<a href="#"> <span class="glyphicon glyphicon-home"></span>
</a>
<a href="#"> <span> Foo</span>
</a>
</div>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse-1">
<!-- Non-collapsing right-side icons -->
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.
<br>All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
<!-- /.container -->
Try to add this in your .css
.nav-collapse .nav > li {
display: inline-block;
}
I have a bootstrap navbar like follows
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><i class="fa fa-upload"></i>link1</li>
<li>link2</li>
<li><i class="fa fa-random"></i>link3<span class="label label-info">1</span></li>
</ul>
</div>
Current scenerio looks like follows
Is it possible the 1 bubble is directly under the text buy sell online...Currently its even going out of the navbar
So that it didn't interfere with the flow, on small viewports the element is position absolute, that's because the link in the navbar is a block and I didn't want to mess with it. On larger viewports, it centers below the text. Needs a wrapper to do this.
Demo: http://jsbin.com/gozumi/1/
HTML
<header class="navbar navbar-static-top navbar-default" id="top" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" 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>
Brand Name
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li><i class="fa fa-upload"></i> link1</li>
<li>link2</li>
<li><i class="fa fa-random"></i> Some Words Go Here<span class="label-wrap"><span class="label label-info">1</span></span></li>
</ul>
</nav>
</div>
</header>
CSS
.navbar-nav .label-wrap {
position: absolute;
right: 15px;
top: 8px;
height: 10px;
}
#media (min-width:768px) {
.navbar-nav .label-wrap {
clear: both;
float: left;
height:auto;
position: static;
width: 100%;
text-align: center;
margin-top: -10px;
padding-bottom: 10px;
}
}
it's simple!
put your label inside your ancor:
from:
<li><i class="fa fa-random"></i>link3<span class="label label-info">1</span></li>
to:
<li><i class="fa fa-random"></i>link3 <span class="label label-info">1</span></li>
http://jsfiddle.net/cfvbea19/
I have the following CSS code, and my problem is that my
nav bar comes on top of my header block. How can I move
the nav bar straight down from the header?
header {
background: black;
height: 60px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
}
header img {
float: left;
margin-right: 10px;
position: relative;
}
header h1 {
color: white;
font: 26px Helvetica, Arial, sans-serif;
line-height: 60px;
margin: 0;
vertical-align: middle;
}
nav {
background: black;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
}
give the nav a margin-top that is the same height of your navbar.
nav {
background: black;
margin: 0;
margin-top:60px;
padding: 0;
position: absolute;
width: 100%;
}
#H.A; you give position absolute to your header block & nav block . So, when you give position absolute to an element then the element remove for the normal flow
CSS:
nav {
top:60px;
padding: 0;
position: absolute;
width: 100%;
}
Read this article for more http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/
<!DOCTYPE html>
<html >
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.navbar-fixed-top{
position:static;
}
</style>
</head>
<body>
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>HOST</h1>
<h3>two is better than one</h3>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
<i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span>
</li>
<li>
<i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- 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 topnav" href="/">Host</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Login
</li>
<li>
Sign up
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</body>
</html>