IE creates unnecessary offset on menu subitems - html

I'm using a bootstrap template called sb admin 2 as reference to a project.
For some reason only in IE (as always) it has a problem with an offset being created upon the submenus. Using the inspect I could see that when I marked the line-height property off and then on again, it became the same as the other browsers.
IE:
FF:
The menu it's a plugin called metismenu, and I saw at the sb admin 2 source code a piece of javascript that seems to fix the problem but didn't work for me.
I'm using the IE11 version, but I guess it'll be the same error at others.
Here's the fiddle:
https://jsfiddle.net/macmessa/ubqqs70c/
$(document).ready(function() {
/* BootStrap */
$(".menu4").addClass("navbar-default sidebar navbar-collapse").attr("role", "navigation");
$(".menu4").addClass("navbar-collapse collapse in");
$(".menu4").attr("aria-expanded", "true");
$(".menu4 ul").addClass("nav");
$(".menu4 ul ul").addClass("nav-second-level");
$(".menu4 ul ul ul").addClass("nav-third-level");
$(".menu4 li.itemPai a:not(.isParent)").append('<span class="fa arrow"></span>');
// Plugin
$('.menu4').metisMenu();
});
.menu4 ul li a {
cursor: pointer;
}
.sidebar .sidebar-nav.navbar-collapse {
padding-right: 0;
padding-left: 0;
}
.sidebar ul {
width: 100%;
}
.sidebar ul li {
border-bottom: 1px solid #e7e7e7;
}
.sidebar ul li a.active {
background-color: #eee;
}
.sidebar .arrow {
float: right;
}
.sidebar .fa.arrow:before {
content: "\25BA";
}
.sidebar .active>a>.fa.arrow:before {
content: "\25BC";
}
.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
border-bottom: 0!important;
}
.sidebar .nav-second-level li a {
padding-left: 37px;
}
.sidebar .nav-third-level li a {
padding-left: 52px;
}
#media(min-width:768px) {
.menu4 {
width: 250px !important;
}
.sidebar {
z-index: 1;
position: absolute;
margin-top: 51px;
}
.navbar-right li {
margin-left: auto;
}
}
#media(max-width:768px) {
.menu4 {
width: auto;
}
.sidebar {
z-index: 1;
position: absolute;
width: 100%;
}
.navbar-right li {
float: left;
}
}
.navbar-right {
margin-right: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.2/metisMenu.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.2/metisMenu.min.js"></script>
<div id="pagina" class="container-fluid">
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Navegação</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" target="_blank">
<img alt="" src="/Compartilhado/Images/logo.png" height="20" />
</a>
<a class="navbar-brand" href="/PM1.MVC/">
Projeto Modelo
</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-envelope-o fa-fw"></i>
<span class="badge">42</span>
<i class="fa fa-caret-down"></i>
</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-usuario">
<li><i class="fa fa-user fa-fw"></i> Perfil do Usuário</li>
<li><i class="fa fa-gear fa-fw"></i> Configurações</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logoff</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-support fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-ajuda">
<li><i class="fa fa-book"></i> Manual</li>
</ul>
</li>
</ul>
<div class="menu4" id="mnuPrincipal">
<ul>
<li class="itemPai"><a id="mnuExemplo">Exemplo</a>
<ul>
<li><a class="isParent" href="/PM1.MVC/Menu" id="mnuExemploMenu">Menu</a></li>
<li><a class="isParent" href="/PM1.MVC/Controle" id="mnuExemploControle">Controle</a></li>
<li class="itemPai"><a id="mnuExemploMensagem">Mensagem</a>
<ul>
<li><a class="isParent" href="/PM1.MVC/MensagemAlerta" id="mnuExemploMensagemAlerta">Alerta</a></li>
<li><a class="isParent" href="/PM1.MVC/MensagemNotificacao" id="mnuExemploMensagemNotificacao">Notificacao</a></li>
</ul>
</li>
<li><a class="isParent" href="/PM1.MVC/MapaMetropolitano" id="mnuExemploMapaMetropolitano">Mapa Metropolitano</a></li>
<li><a class="isParent" href="/PM1.MVC/TratamentoErro" id="mnuExemploTratamentoErro">Tratamento de Erro</a></li>
</ul>
</li>
<li class="itemPai"><a id="mnuCadastro">Cadastro</a>
<ul>
<li><a class="isParent" href="/PM1.MVC/Usuario" id="mnuCadastroPesquisaOtimizada">Pesquisa Otimizada</a></li>
<li><a class="isParent" href="/.PM1.MVC/Item" id="mnuCadastroExemploCRUD">Exemplo CRUD</a></li>
</ul>
</li>
<li class="itemPai"><a id="mnuRelatorio">Relatório</a>
<ul>
<li><a class="isParent" id="mnuRelatorioExemplo">Exemplo de Relatório</a></li>
</ul>
</li>
<li class="itemPai"><a id="mnuUtilitario">Utilitário</a>
<ul>
<li><a class="isParent" href="/.PM1.MVC/Configuracao" id="mnuUtilitarioConfiguracao">Configuração</a></li>
<li><a class="isParent" id="mnuUtilitarioNotificacao">Notificação para Usuário</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div id="conteudo">
</div>
</div>
<div class="modal fade" id="divModalPerfilUsuario" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Perfil do Usuário</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<p>
Nome:
<br /> USER
</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<p>
Login:
<br /> USR1
</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<p>
Empresa:
<br /> C
</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<p>
Área:
<br />
</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img alt="foto" src="/Compartilhado/Images/usuarioNaoIdentificado.png" width="75" height="90" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>

You can try to put:
.sidebar ul li {
border-bottom: 1px solid #e7e7e7;
line-height:0;
color:transparent;}
and
.menu4 ul li a {
cursor: pointer;
line-height:1.45em;
}
Preview at: https://jsfiddle.net/ubqqs70c/4/

Related

How to get Responsive Bootstrap Contact Form

I'm very happy with my bootstrap contact form, however when I minimize it down to cellular level it disappears and I have to scroll all the way to the right. Can anyone help me with my CSS to size it down perfectly?
Also, is there any way to make the toggle buttons center when they visible rather than floating to the left.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="contact.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="home.html"><img class="avatar" src="images/Originals/avatar.jpg" alt>Munoz Designs</a>
<!--Toggle Button-->
<button class="navbar-toggler" type="button" data-toggle="collapse"data-target="#navbarResponsive"aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<!--Navbar links-->
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link"
href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="gallery.html">Gallery</a>
</li>
<!--Social Media Icons-->
<li class="nav-item">
<a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://twitter.com/arkadiusart" title="Follow on Twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" title="Email">
<i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</ul>
</div>
</div>
</nav>
<div class="intro">
<h1>Contact</h1>
<h4>If you would like to work with me, send me a message!</h4>
</div>
<!--Contact-->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="well well-sm">
<form class="form-horizontal" method="post">
<fieldset>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<input id="fname" name="name" placeholder="Name" type="text" class="form-control">
<label for="fname" class="fa fa-user input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<input id="email" name="email" type="text" placeholder="Email" class="form-control">
<label for="email" class="fa fa-envelope-o input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<textarea class="form-control" id="message" name="message" placeholder="Message" rows="3"></textarea>
<label for="message" class="fa fa-pencil input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-outline-secondary btn-md">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
html{
box-sizing: border-box;}
*,
*: before,
*: after {
box-sizing: inherit;
padding: 0;
margin: 0;
}
body{background-image: url();
width: 100%;
height: 100%;
background-position: bottom center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family:"Quicksand";
font-size: 1.2em;
line-height: 1.375em;
padding: 0;
margin: 0;
background-color: #2F3A3B;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
navbar-brand{
height: 3em;
width: 3em;
margin-top: -8px;
border-radius: 5.0em;
margin-right: 1em;
margin-left: -5em;
margin-bottom: -8px
}
.avatar{
border-radius: 5em;
margin-right: .5em;
margin-left: 1em;
}
.intro{
display: inline-block;
width: 100%;
padding: 65px 0 65px;
background-color: #2A2332;
background-size: cover;
font-size: 1.9em;
text-align: center;
color: #FFF;
}
h1{
font-weight: medium;
text-shadow:5px 5px 10px black;
}
h4{
font-size: -.5em;
}
.row{
margin-right: 4em;
margin-left: 4em;
margin-top: .10em;
padding-bottom: -.30em;
}
.container {
margin-left: 17em;
padding-top: 1.5em;
}
.bigicon {
font-size: 35px;
color: #808080;
}
.input-icon {
position: absolute;
left: .5rem;
top: .7rem;
/* Keep icon in center of input, regardless of the input height */
}
#message {
vertical-align: middle;
}
input {
padding-right:30px;
}
.form-control {
text-indent: 2rem;
width: 75%;
}
.input-wrapper {
position: relative;
}
.btn{
margin-right: 10em;
}
#media screen and (min-width: 640px){
}
#media screen and (min-width: 960px){
}
main {flex: 1;}
Perhaps instead of using separate li tags you can use the bootstrap row and column parameters. Try something like this:
<!--Social Media Icons-->
<li class="nav-item">
<div class="row">
<div class="col-xs-2">
<a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</div>
<div class="col-xs-2">
<a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
</div>
<div class="col-xs-2">
<a class="nav-link" href="https://twitter.com/arkadiusart" title="Follow on Twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</div>
<div class="col-xs-2">
<a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>
</div>
<div class="col-xs-2">
<a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>
</div>
<div class="col-xs-2">
<a class="nav-link" title="Email"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</div>
</div>
</li>
I found the answers:
For the contact form to be responsive I deleted the .row in CSS. Once I did that, it was working as a responsive form.
For the toggle buttons to be center, I simply added "text-center" to the collapse property. See below.
<div class="collapse navbar-collapse text-center" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link"
href="about.html">About</a>
</li>

Excluding search bar from Bootstrap's navbar collapse

I know this question has already been asked here:
Bootstrap navbar search outside collapse.
Keeping my search bar viewable when my navbar collapses with twitter bootstrap
But mine is different in the sense that my search bar is located in the middle of other nav items, and I want all these other nav items to collapse except my search bar. I wasted a week trying to fix this, but every move I make creates a mess.
This is how my navbar looks:
https://postimg.org/image/7x623zbdi3/
HTML:
<div class="container" id="responsiveContainer">
<!-- Title -->
<div class="navbar-header pull-left">
<a class="navbar-brand" href="{% url 'index' %}"> abc </a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" id="nav">
<li id="nav-form">
<form class="navbar-form">
<div class="form-group">
<input type="text" id="searchBox" class="form-control">
<button id="search" type="submit" class="btn btn-default"><span> <i class="fa fa-search"></i> </span></button>
</div>
</form>
</li>
<li class="dropdown">
Sign In/Up <b class="caret"></b>
<ul class="dropdown-menu" class="dropdownMenu">
<li> Sign Up </li>
<li> Sign In </li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-left" id="nav">
<li> Article </li>
<li> Contact </li>
</ul>
</div>
</div>
</nav>
Custom CSS:
#nav-form {
margin-right: -30px;
}
#nav input {
background-color: #D3212D;
color: white;
border: 1px solid #E32636;
}
#nav button {
background-color: #D3212D;
color: white;
border-radius: 60px;
border: 1px solid maroon;
box-shadow: 0px 0px 1px black;
font-family: FontAwesome;
font-size: 16px;
}
#nav button:hover {
background-color: #cd1b27;
box-shadow: 0px 0px 5px black;
}
input#search, select.form-control {
background: transparent;
border: none;
border-bottom: 1px solid #000000;
box-shadow: 0px 0px 5px orange;
}
#navbarToggle {
background-color: #E32636;
margin-top: 0px;
border: 1px solid #E32636;
}
#navbarToggle:hover, #navbarToggle:focus {
text-shadow: 0px 0px 1px rgb(32,42,62);
background-color: #E32636;
}
One of those articles you referenced does it here.
The person took the
< form... /form>
section and put it in it's own div. The key is to keep it out of the class="collapse navbar-collapse"
After a lot of debugging I finally found the solution and here it is:
HTML:
<!-- Navigational Bar -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id="navbarToggle">
<span class="sr-only">Toggle navigation</span>
<span><i class="fa fa-list fa-2x"></i></span>
</button>
<div class="container" id="responsiveContainer">
<!-- Title -->
<div class="navbar-header pull-left">
<a class="navbar-brand" href="{% url 'index' %}"><img id="navbar-logo" src="/static/media/Images/ditookcolored.png"></a>
</div>
<div class="navbar-header pull-right">
<!-- <button class="btn btn-default" id="mobileSearch"><i class="fa fa-search"></i></button> -->
<ul class="nav navbar-nav navbar-right" id="nav">
<li id="nav-form">
<form class="navbar-form navbar-center" id="navbarForm">
<div class="form-group">
<input type="text" placeholder="Search Ditook" id="searchBox" class="form-control">
<button id="search" type="submit" class="btn btn-default"><span> <i class="fa fa-search"></i> </span></button>
</div>
</form>
</li>
</ul>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" id="nav">
<!-- <li id="nav-form">
<form id="navbarForm">
<div class="form-group">
<input type="text" placeholder="Search Ditook" id="searchBox" class="form-control">
<button id="search" type="submit" class="btn btn-default"><span> <i class="fa fa-search"></i> </span></button>
</div>
</form>
</li> -->
<li class="dropdown">
<i class="fa fa-arrow-circle-down"></i> Sign In/Up
<ul class="dropdown-menu">
<li><i class="fa fa-user-plus"></i> Sign Up </li>
<li><i class="fa fa-sign-in"></i> Sign In </li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-left" id="nav">
<li><i class="fa fa-list-alt"></i> Article </li>
<li><i class="fa fa-phone"></i> Contact </li>
</ul>
</div>
</div>
</nav>
This actually fixed my problem:
Custom CSS:
#nav input {
position: static;
margin-left: -400px;
}
#nav button {
position: static;
margin-left: -1px;
height: 35px;
}

How to keep a div stayed in same position css

Well, I have a category panel picture and I am trying to create it into HTML.
I have tried this code but I hover over a category a sub_category panel appears but every panel seems to have margin at top. I want to have every panel same position just like in picture.
I tried top: 0 but it didn't have any affect. Can anyone help?
.category_nav {
height: 40px;
margin-top: 28px;
}
.category_nav_ul {
list-style-type: none;
padding: 0;
}
.category_nav_ul>li {
display: inline-block;
}
#category_nav_ul_category {
width: 380px;
cursor: pointer;
}
#category_nav_div {
margin-top: 5px;
width: 380px;
position: absolute;
background-color: white;
padding-bottom: 10px;
}
.category {
padding-top: 6px;
padding-bottom: 6px;
margin-bottom: 1px;
margin-left: 0 !important;
border-radius: 0 !important;
border: 0 !important;
}
.category:hover {
border: 2px;
background: linear-gradient(to right, red 0px, #E5002B 3px, transparent 3px);
background-color: white;
border-top: 1px solid grey !important;
border-bottom: 1px solid grey !important;
}
.fa-chevron-right {
font-weight: 100px !important;
font-size: 10px !important;
}
.left-menu-ul {
list-style: none;
}
.left-mega-menu {
background: #fff none repeat scroll 0 0;
left: 90%;
position: absolute;
top: 0;
width: 470px;
opacity: 0;
visibility: hidden;
z-index: 2345;
transition: .3s;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 60px;
}
.left-menu ul li:hover>.left-mega-menu {
opacity: 1;
visibility: visible;
left: 100%;
}
.sub_categories {
border-radius: 0 !important;
padding-top: 6px;
padding-bottom: 6px;
border-left: 2px solid #E5002B;
border-top: 0px !important;
border-right: 0px !important;
width: 200px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="category_nav_div" class="light-border">
<div class="left-menu collapse in" id="left-menu">
<nav>
<ul class="left-menu-ul list-group">
<li class="category list-group-item">
<i class="fa fa-camera fa-fw"></i>
<a href="/mystore/category/Camera">Camera
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Camera/sub_cat/">
<li class="list-group-item sub_categories">Camera</li>
</a>
</div>
</ul>
</div>
</div>
</li>
<li class="category list-group-item">
<i class="fa fa-angle-right fa-fw"></i>
<a href="/mystore/category/Clothes">Clothes
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Clothes/sub_cat/">
<li class="list-group-item sub_categories">Clothes</li>
</a>
</div>
</ul>
</div>
</div>
</li>
<li class="category list-group-item">
<i class="fa fa-mobile fa-fw"></i>
<a href="/mystore/category/Mobiles">Mobiles
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Mobiles/sub_cat/">
<li class="list-group-item sub_categories">Mobiles</li>
</a>
</div>
<div class="col-lg-6">
<a href="/mystorecategory/Tablet/sub_cat/">
<li class="list-group-item sub_categories">Tablet</li>
</a>
</div>
</ul>
</div>
</div>
</li>
<li class="category list-group-item">
<i class="fa fa-angle-right fa-fw"></i>
<a href="/mystore/category/Graphics Cards">Graphics Cards
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Graphics Cards/sub_cat/">
<li class="list-group-item sub_categories">Graphics Cards</li>
</a>
</div>
<div class="col-lg-6">
<a href="/mystorecategory/Computer/sub_cat/">
<li class="list-group-item sub_categories">Computer</li>
</a>
</div>
<div class="col-lg-6">
<a href="/mystorecategory/DVDs/sub_cat/">
<li class="list-group-item sub_categories">DVDs</li>
</a>
</div>
<div class="col-lg-6">
<a href="/mystorecategory/Laptop/sub_cat/">
<li class="list-group-item sub_categories">Laptop</li>
</a>
</div>
</ul>
</div>
</div>
</li>
<li class="category list-group-item">
<i class="fa fa-television fa-fw"></i>
<a href="/mystore/category/Television">Television
<i aria-hidden="true" class="fa fa-angle-right pull-right"></i>
</a>
<div class="left-mega-menu light-border">
<div class="row">
<ul class="list-group">
<div class="col-lg-6">
<a href="/mystorecategory/Television/sub_cat/">
<li class="list-group-item sub_categories">Television</li>
</a>
</div>
</ul>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div>
Remove position relative from category li and apply it to its parent
.left-menu-ul {
list-style: none;
position: relative;
}
fiddle

On a two level bootstrap navbar, I cannot make the top part stay fixed

With bootstrap, I'm creating a two level Navbar, and I want the top part, the dark blue one, to stay fixed when scrolling, but when I give .navbar-default .navbar-collapse a position:fixed, the middle part gets chopped off. Any idea of why this happens and how I could fix it?
This is my code:
<header id="header">
<nav class="navbar navbar-default hidden-sm hidden-xs" role="navigation">
<div class="navbar-collapse navbar-azul">
<ul class="nav navbar-nav navbar-left navbar-azul">
<li class="uppercase">One</li>
<li class="uppercase">Two</li>
<li class="uppercase">Three</li>
<li class="uppercase">Four</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-azul">
<li class="white"><i class="fa fa-facebook" ></i></li>
<li><i class="fa fa-twitter" ></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-youtube-play"></i></li>
<li><i class="fa fa-play-circle-o"></i>Videos
</li>
<li><i class="fa fa-television"></i>Shows
</li>
</ul>
</div>
</nav>
<div class="navbar navbar-inverse" role="banner">
<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="index.html">
<h1><img src="images/logo.png" class="logohead img-responsive" alt="logo"></h1>
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left navbar-celeste-text">
<li>Menu 1</li>
<li>Menu 2</li>
<li class="dropdown ">Menu 3 <i class="fa fa-angle-down"></i>
<ul role="menu" class="sub-menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Menu 3</li>
<!-- <li>Antigua Sports</li> -->
<li>Menu 4</li>
<li class="uppercase visible-sm-block visible-xs-block">One Small Screen</li>
<li class="uppercase visible-sm-block visible-xs-block">Two Small Screen</li>
<li class="uppercase visible-sm-block visible-xs-block">Three Small Screen</li>
<li class="uppercase visible-sm-block visible-xs-block">Four Small Screen</li>
<li class="visible-sm-block visible-xs-block"><i class="fa fa-play-circle-o"></i>Videos</li>
<li class="visible-sm-block visible-xs-block"><i class="fa fa-television"></i>Shows</li>
<li class="visible-sm-block visible-xs-block">
<div class="search">
<form role="form">
<i class="fa fa-search"></i>
<div class="field-toggle">
<input type="text" class="search-form" autocomplete="off" placeholder="Search">
</div>
</form>
</div>
</li>
</ul>
</div>
<div class="search hidden-sm hidden-xs">
<form role="form">
<i class="fa fa-search"></i>
<div class="field-toggle">
<input type="text" class="search-form" autocomplete="off" placeholder="Search">
</div>
</form>
</div>
</div>
</div>
And the CSS:
#header{
margin-bottom: 0;
padding: 0 0 30px 0;
margin: 0 auto;
width:100%;
z-index:999;
background:#00b1ec;
}
#header .navbar-inverse .container{
position: relative;
}
.pull-right {
right:50px;
position:absolute;
top:15px
}
#header .navbar {
border: 0;
margin-bottom: 0;
}
#header .navbar-toggle{
margin-top: 20px;
}
#header .navbar-brand{
padding: 0;
margin-left: 0;
}
#header .navbar-brand h1{
padding: 0;
margin: 0;
}
#header .navbar-nav.navbar-left >li:last-child{
margin-left: 20px;
}
#header .navbar-nav.navbar-left >li a {
color: #fff;
font-weight: 400;
}
.navbar-default .navbar-collapse {
position: fixed;
z-index: 999;
}
.navbar-default .navbar-collapse, .navbar-inverse .navbar-nav>li>a {
color: #fff;
}
.navbar-azul-text {
color: #fff;
font-size: 14px;
}
.navbar-celeste-text{
color: #fff;
font-size: 18px;
}
.navbar-default .navbar-nav>li>a{
color:#fff;
}
#header .navbar-inverse .navbar-nav li.active > a,
#header .navbar-inverse .navbar-nav li.active > a:focus,
#header .navbar-nav.navbar-left li > a:hover,
.navbar-inverse .navbar-nav > .open > a,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
background-color: inherit;
border: 0;
color: #E61F47;
}
You have two choices:
Add navbar-fixed-top class to nav tag with navbar class and remove your css with position: fixed.
Add width: 100% to your CSS (.navbar-default .navbar-collapse).

Footer Not Sticking To The Bottom Of The Page

My footer is not sticking to the bottom of the page. I have already tried the following:
footer { /* position must be absolute and bottom must be 0 */
height: 100px;
width: 100%;
background: rgba(255,255,255,0.2);
position: absolute;
bottom: 0;
}
footer {
height: 50px;
position: absolute;
left: 0;
right: 0;
background-color: #00A;
z-index: 150;
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 30px;
}
None of these solutions (found on stackoverflow) have worked out for me so far so I have made a codepen with what I have:
http://codepen.io/sredmond/pen/revjdv
If you expand the code pen so that you see more of the result than the code you will see that it stays
NAVBAR
JUMBOTRON
CONTENT
FOOTER
<!--
Random white space
-->
What I want it to do is go like this:
NAVBAR
JUMBOTRON
CONTENT
FOOTER
Thanks!
Put your .row in div inside footer, maybe row class override your position setting.
Not:
<footer class="row"></footer>
But:
<footer><div class="row"></div></footer>
And then:
footer {
position: fixed;
left: 0; bottom: 0; right: 0;
}
EDIT
So you need flexbox (or tables, flexbox is simplier but less backward compatible):
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Project</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Terms Of Service</li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-xs hidden-sm">
<li>
<a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a>
</li>
<li>
<a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a>
</li>
<li>
<a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-md hidden-lg hidden-sm text-center">
<li class="social-icons">
<a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a>
<a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a>
<a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div class="content-wrapper">
<div class="content-body">
<div class="jumbotron">
<h1 class="text-center">Portfolio</h1>
</div>
<div class="row">
<div class="col-xs-12 col-md-4 text-center bottom-30">
<h4 class="bold">PeppNation</h4>
<a href="http://www.peppnation.techuhost.com" target="_blank">
<img src="/Assets/Images/Images/Portfolio/PeppNation.png" width="300"/>
</a>
</div>
<div class="col-xs-12 col-md-4 text-center bottom-30">
<h4 class="bold">Brock Report - Publications Page</h4>
<a href="http://brockreport.com/publications.aspx" target="_blank">
<img src="/Assets/Images/Images/Portfolio/BrockReport.png" width="300"/>
</a>
</div>
<div class="col-xs-12 col-md-4 text-center bottom-30">
<h4 class="bold">Camp BASIC</h4>
<a href="http://campbasicdev.dev2.nsrit.com/" target="_blank">
<img src="/Assets/Images/Images/Portfolio/CampBasic.png" width="300"/>
</a>
</div>
</div>
</div>
<footer class="content-footer">
<div class="row text-center">
<div class="col-xs-12 col-md-2">
<h4 class="bold">TechU</h4>
<p>Terms Of Service</p>
<p>© 2016 - TechU</p>
</div>
<div class="col-xs-12 col-md-3">
<h4 class="bold">Contact Information</h4>
<p>Phone: <strong>(414) 255-5423</strong></p>
<p>Email: <strong>samjredmond#yahoo.com</strong></p>
</div>
<div class="col-xs-12 col-md-3">
<h4 class="bold">Business Hours</h4>
<p>Monday - Friday: <strong>9 a.m. - 5 p.m. CST</strong></p>
<p>Saturday & Sunday: <strong>Closed</strong></p>
</div>
<div class="col-xs-12 col-md-4">
<ul class="nav navbar-nav hidden-xs footer-social-button-align">
<li>
<a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a>
</li>
<li>
<a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a>
</li>
<li>
<a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a>
</li>
</ul>
<ul class="nav navbar-nav hidden-md hidden-lg hidden-sm">
<li class="social-icons">
<a class="btn" href="https://www.facebook.com/Tech-U-276023285879783/" target="_blank" onclick="ga('send','event','engagement','facebook')"><span class="fa fa-facebook"></span></a>
<a class="btn" href="https://twitter.com/TechUHost?s=09" target="_blank" onclick="ga('send','event','engagement','twitter')"><span class="fa fa-twitter"></span></a>
<a class="btn" href="https://play.google.com/store/apps/developer?id=TechU" target="_blank" onclick="ga('send','event','engagement','android')"><span class="fa fa-android"></span></a>
</li>
</ul>
</div>
</div>
</footer>
</div>
</div>
</body>
&CSS
html, body {
height: 100%;
padding-top: 0;
background-color: #cccccc;
}
.body-content {
height: 100%;
}
.content-wrapper {
display: flex;
flex-direction: column;
height: 100%
}
.content-body {
flex: 1 0 auto;
overflow-y: auto;
overflow-x: hidden;
padding-top: 50px;
}
.content-footer {
flex: 0 0 auto;
}
I tried this many times and it works perfect for me.
https://css-tricks.com/snippets/css/sticky-footer/
Hope it helps :)
The problem is, that your html and your body tag dont expand to the bottom of the screen, if you have no content. To make your html expand to the bottom add this css:
html,
body {
margin:0; /* removes any margin (especially at the bottom) */
padding:0; /* removes any padding (especially at the bottom) */
height:100%; /* will make it expand to the end */
}