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 */
}
Related
I have a navbar which has 4 anchor tag buttons in the center (home, about, services, contact). I dont know how to center it on the navbar. I have another anchor tag on the far left of the navbar (a phone number link). It appears that the part I want to center is centered between the boundary of that far left link and the far right of the page.
I cant figure out how to center these 4 tags on the grid.
Hope that makes sense, im not too good with the jargon.
<a href="tel:1-530-680-8255" style="color:grey; display:inline-block">1-530-680-
8255</a>
<a href="tel:1-530-680-8255"><i class="fas fa-phone" style="display:inline-block">
</i>1-530-680-8255</a>
</div>
<nav class="navigation nav-block secondary-navigation nav-right">
<ul>
<!-- Dropdown Cart Overview
<li>
<div class="dropdown">
<span class="cart-indication"><span class="icon-shopping-cart"></span> <span class="badge">3</span></span>
<ul class="dropdown-list custom-content cart-overview">
<li class="cart-item">
<a href="single-product.html" class="product-thumbnail">
<img src="images/design-agency/portfolio/grid/no-margins/project-6-square.jpg" alt="" />
</a>
<div class="product-details">
<a href="single-product.html" class="product-title">
Cotton Jump Suit
</a>
<span class="product-quantity">2 x</span>
<span class="product-price"><span class="currency">$</span>15.00</span>
</div>
</li>
<li class="cart-item">
<a href="single-product.html" class="product-thumbnail">
<img src="images/design-agency/portfolio/grid/no-margins/project-7-square.jpg" alt="" />
</a>
<div class="product-details">
<a href="single-product.html" class="product-title">
Cotton Jump Suit
</a>
<span class="product-quantity">2 x</span>
<span class="product-price"><span class="currency">$</span>15.00</span>
</div>
</li>
<li class="cart-item">
<a href="single-product.html" class="product-thumbnail">
<img src="images/design-agency/portfolio/grid/no-margins/project-8-square.jpg" alt="" />
</a>
<div class="product-details">
<a href="single-product.html" class="product-title">
Cotton Jump Suit
</a>
<span class="product-quantity">2 x</span>
<span class="product-price"><span class="currency">$</span>15.00</span>
</div>
</li>
<li class="cart-subtotal">
Sub Total
<span class="amount"><span class="currency">$</span>15.00</span>
</li>
<li class="cart-actions">
View Cart
<span class="icon-check"></span> Checkout
</li>
</ul>
</div>
</li> -->
<!-- Dropdown Search Module
<li>
<div class="dropdown">
<span class="icon-magnifying-glass"></span>
<div class="dropdown-list custom-content cart-overview">
<div class="search-form-container site-search">
<form action="#" method="get" novalidate>
<div class="row">
<div class="column width-12">
<div class="field-wrapper">
<input type="text" name="search" class="form-search form-element no-margin-bottom" placeholder="type & hit enter...">
<span class="border"></span>
</div>
</div>
</div>
</form>
<div class="form-response"></div>
</div>
</div>
</div>
</li> -->
<li>
<div class="v-align-middle" style="margin-left: 60px;">
<i class="fab fa-facebook-f"></i>
</div>
</li>
<li class="aux-navigation hide">
<!-- Aux Navigation -->
<a href="#" class="navigation-show side-nav-show nav-icon">
<span class="icon-menu"></span>
</a>
</li>
</ul>
</nav>
<nav class="navigation nav-block primary-navigation nav-center">
<ul>
<li class="current">Home <i class="fas fa-home"></i></li>
<li class="current">About <i class="fas fa-at"></i></li>
<li class="current">Services <i class="fas fa-wrench"></i> </li>
<li class="current">Contact <i class="fas fa-phone"></i> </li>
</ul>
</nav>
</div>
</div>
</div>
</header>
You can use floats to position elements side by side on the page and then play with the widths and padding to arrange them how you like. If you are unsure how to use CSS I suggest following some online tutorials.
nav ul {
list-style-type: none;
display: inline-block;
margin: 0px;
padding: 0px;
width: 100%;
}
nav ul li {
display: inline-block;
text-align: center;
width: 60px;
margin: 0px;
padding: 0px;
}
nav ul li span {
font-size: 0.7em;
}
nav ul li i {
font-size: 2em;
}
.left {
width: 40%;
float: left;
}
.right {
width: 60%;
float: right;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<nav>
<div class="left">
<p>000 000 0000</p>
</div>
<div class="right">
<ul>
<li><i class="fas fa-phone"></i><br><span>Contact</span></li>
<li><i class="fas fa-wrench"></i><br><span>Services</span></li>
<li><i class="fas fa-at"></i><br><span>About</span></li>
<li><i class="fas fa-home"></i><br><span>Home</span></li>
</ul>
</div>
</nav>
there is alot of existing css that came with this template. For me to run your css and html, it would change too many properties to the point where its unrecognizable. Despite that this is a perfect answer. HOWEVER: I took your css:
nav ul {
list-style-type: none;
display: inline-block;
margin: 0px;
padding: 0px;
width: 100%;
}
and i changed it to these values:
nav ul {
display: inline-block;
text-align: center;
width: 1100px;
margin: 200px;
padding: 200px;
}
Its centered. But now the container is vertically huge. Need it the original height
Screenshot
Ok lets start over. I just want to center these 4 anchor tag li's inside of this ul.
Is there someway I can wrap these four into one container, and then move them to the left with css? I just want those 4 items to appear centered in that ul.
Heres a picture of what im talking about
Below is my total header in html. Theres a lot of CSS so i dont know what to link people to but ill put what i have been playing with below.
<!-- Header -->
<header class="header header-fixed header-fixed-on-mobile header-transparent" data-bkg-threshold="100">
<div class="header-inner">
<div class="row nav-bar">
<div class="column width-12 nav-bar-inner">
<div class="logo">
<div>
<a href="tel:1-530-680-8255" style="color:grey; display:inline-block">1-530-680-
8255</a>
<a href="tel:1-530-680-8255"><i class="fas fa-phone" style="display:inline-block">
</i>1-530-680-8255</a>
</div>
</div>
<nav class="navigation nav-block secondary-navigation nav-right">
<ul>
<li class="aux-navigation hide">
<!-- Aux Navigation -->
<a href="#" class="navigation-show side-nav-show nav-icon">
<span class="icon-menu"></span>
</a>
</li>
</ul>
</nav>
<nav class="navigation nav-block primary-navigation nav-center">
<ul>
<li class="current">Home <i class="fas fa-home"></i></li>
<li class="current">About <i class="fas fa-at"></i></li>
<li class="current">Services <i class="fas fa-wrench"></i> </li>
<li class="current">Contact <i class="fas fa-phone"></i> </li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!-- Header End -->
---CSS---
nav ul li {
display: inline-block;
text-align: center;
width: 100px;
margin: 00px;
padding: 0px;
}
I made a webpage with a "sticky" footer(the footer is at the bottom of content if the content is large, or at the bottom of the viewport if the content is small) by using flexbox. I am now trying to make it so the content will be at the center of the remaining height(vh - height of navbar - height of footer) if the content is small enough. Below is an image to demostrate what I just said.
Here is my code.
<div id="app">
<div>
<div class="d-flex flex-column full-height">
<div id="div-top" class="d-flex flex-column" style="flex: 2">
<nav class="navbar navbar-expand-md navbar-dark bg-primary sticky-top">
<div class="container">
<a class="navbar-brand" href="/">
<img class="logo d-inline-block align-top" src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-256.png" width="30" height="30"> Brand</a>
<button type="button" class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="ml-auto navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/aaar">Ada</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/bbbr">sdfsdfs</a>
</li>
</ul>
</div>
</div>
</nav>
<br>
<div class="container d-flex align-items-center justify-content-center h-100" id="div-1">
<div class="row w-100">
<div class="text-center col col-md-12 col-lg-6">
<img class="logo" src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-256.png" width="256" height="256" alt="logo">
<h2 class="pt-2 pb-3 font-weight-normal">Description</h2>
<div>
Add
<p>description</p>
</div>
<p class="pt-4 text-muted">v1.0.0</p>
</div>
<div class="d-none d-lg-block col col-lg-6">test</div>
</div>
</div>
</div>
<footer class="footer">
<div class="text-center container">
<span class="d-block">Copyright © 2018</span>
<span class="text-muted">Some text here</span>
</div>
</footer>
</div>
</div>
</div>
#div-1 {
background-color: #00ff00;
}
.full-height {
height: 100vh;
}
.footer {
margin: auto auto 0 auto;
width: 100%;
padding-top: 1.2rem;
padding-bottom: 1.2rem;
background-color: #ff0000;
}
The height of the content won't change, I'm just trying to support multiple screen sizes. I have encountered 2 problems by using this approach. First, it does not work on landscape mode on mobile(emulated using chrome dev tools). Second, the navbar shrinks in height.
jsfiddle is available here. You can also compare it with the original version. Adding /embedded/result/ to the end of the url will open the result in fullscreen. Thanks for helping!
If you change the following it will work as you asked for:
change to min-height: 100vh in the .full-height rule
remove align-items-center/h-100 and add m-auto in the id="div-1" elements class list
Do note, the <br> you had after the </nav> in the markup is invalid, so i removed it. If you want a gap there, use margin's padding's
Updated fiddle
Stack snippet
#div-1 {
background-color: #00ff00;
}
.full-height {
min-height: 100vh;
}
.footer {
margin: auto auto 0 auto;
width: 100%;
padding-top: 1.2rem;
padding-bottom: 1.2rem;
background-color: #ff0000;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<div id="app">
<div>
<div class="d-flex flex-column full-height">
<div id="div-top" class="d-flex flex-column" style="flex: 2">
<nav class="navbar navbar-expand-md navbar-dark bg-primary sticky-top">
<div class="container">
<a class="navbar-brand" href="/">
<img class="logo d-inline-block align-top" src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-256.png" width="30" height="30"> Brand</a>
<button type="button" class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="ml-auto navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/aaar">Ada</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/bbbr">sdfsdfs</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container d-flex justify-content-center m-auto" id="div-1">
<div class="row w-100">
<div class="text-center col col-md-12 col-lg-6">
<img class="logo" src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-256.png" width="256" height="256" alt="logo">
<h2 class="pt-2 pb-3 font-weight-normal">Description</h2>
<div>
Add
<p>description</p>
</div>
<p class="pt-4 text-muted">v1.0.0</p>
</div>
<div class="d-none d-lg-block col col-lg-6">test</div>
</div>
</div>
</div>
<footer class="footer">
<div class="text-center container">
<span class="d-block">Copyright © 2018</span>
<span class="text-muted">Some text here</span>
</div>
</footer>
</div>
</div>
</div>
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/
I am working on a bootstrap project and I have to create a navigation menu like this:
I used absolute position for it but it is not responsive when I scale it to smaller resolution (it becomes too small when I scale down). Is there any method to make a responsive navigation menu (like the image above)?
Here's my source:
<div id ="top" class="container">
<div class="top-menu row">
<ul class="top-menu-buttons col-lg-12 col-xs-12">
<li class="col-lg-3 col-xs-3">
<a href="#" class="top-menu-button menu-bt-active">
<img class="img-responsive" src="img/home-bt-enable.png">
</a>
</li>
<li class="col-lg-3 col-xs-3">
<a href="#" class="top-menu-button menu-bt-inactive">
<img class="img-responsive" src="img/deal-bt.png">
</a>
</li>
<li class="col-lg-3 col-xs-3">
<a href="#" class="top-menu-button menu-bt-inactive">
<img class="img-responsive" src="img/about-bt.png">
</a>
</li>
<li class="col-lg-3 col-xs-3">
<a href="#" class="top-menu-button menu-bt-inactive">
<img class="img-responsive" src="img/contact-bt.png">
</a>
</li>
</ul>
</div>
</div>
CSS:
.top-menu ul,
.top-menu li{
display: inline-block;
}
.top-menu{
padding-left: 170px;
padding-right: 170px;
padding-bottom: 0;
bottom: 0;
top:auto;
}
.top-menu-button{
display: inline-block;
position: absolute;
width: 100%;
}
.menu-bt-active{
top: 22px;
}
.menu-bt-inactive{
top: 37px;
}
<div class="nav navbar-default navbar-static-top">
<div class="container-fluid">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeadCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand collapse navbar-collapse navHeadCollapse">
<a href="#">
<img id="img_navbar" src="img/home-bt-enable.png">
</a>
<a href="#">
<img id="img_navbar" src="img/deal-bt.png">
</a>
<a href="#">
<img id="img_navbar" src="img/about-bt.png">
</a>
<a href="#">
<img id="img_navbar" src="img/contact-bt.png">
</a>
<div id="search"class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
Try this CSS
#img_navbar
{
margin-left: 3%;
float: left;
margin-bottom: 10;
width:3%;
height:3%;
}
#search
{
width:20%;float:right;
}
I want to create navigation bar [vertical] with bootstrap 3.
I tried this but it didn't work.
<ul class="nav nav-pils nav-stacked">
<li>jedan</li>
<li>dva</li>
<li>tri</li>
<li>cetriri</li>
<li>pet</li>
</ul>
I tried a lot of examples but it is all with old bootstrap. How to create that navigation with new bootstrap?
nav-pills class needs two l:
<ul class="nav nav-pills nav-stacked">
<li>jedan</li>
<li>dva</li>
<li>tri</li>
<li>cetriri</li>
<li>pet</li>
</ul>
http://getbootstrap.com/components/#nav-pills
It looks like you are missing an l in nav-pills (you have it listed as nav-pils)
<ul class="nav nav-pills nav-stacked">
<li>jedan</li>
<li>dva</li>
<li>tri</li>
<li>cetriri</li>
<li>pet</li>
</ul>
http://getbootstrap.com/components/#nav-pills
you could use the pills or you just could write this:
your html:
<!--navigation-->
<div class="navbar navbar-inverse navbar-fixed-left">
<a class="navbar-brand" href="#">LOGO</a>
<ul class="nav navbar-nav">
<li><i class="fa fa-home"></i><span> Link1 </span></li>
<li><i class="fa fa-info-circle"></i><span> Link2 </span></li>
<li><i class="fa fa-heart"></i><span> Link3 </span></li>
<li><i class="fa fa-briefcase"></i><span> Link4 </span></li>
<li><i class="fa fa-envelope"></i><span> Link5 </span></li>
</ul>
</div>
<!--end navigation-->
<!-- 1st section-->
<div class="wrapper">
<div class="container" id="home">
<div class="row">
<h2>Link 1</h2>
</div>
</div>
<!-- 2nd section-->
<div class="container" id="info">
<div class="row">
<h2>Link 2</h2>
</div>
</div>
<!--3rd section-->
<div class="container" id="love">
<div class="row">
<h2>Link 3</h2>
</div>
</div>
<!--4th section-->
<div class="container" id="work">
<div class="row">
<h2>Link 4</h2>
</div>
</div>
<!--5th section-->
<div class="container" id="contact">
<div class="row">
<h2>Link 5</h2>
</div>
</div>
</div>
your css:
/* CSS used here will be applied after bootstrap.css */
.navbar-fixed-left {
width: 140px;
position: fixed;
border-radius: 0;
height: 100%;
}
.navbar-fixed-left .navbar-nav > li {
float: none; /* Cancel default li float: left */
width: 139px;
}
.navbar-fixed-left + .container {
padding-left: 160px;
}
.container {
height: 1000px;
}
.wrapper {
margin-left: 140px;
}
working example here: bootply
I came late to the party but in case you just got here and you would like to add toggle to your vertical nav:
<nav class="list-group">
<ul class="nav">
<li>
<a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false" class="list-group-item">Item 1
</a>
<ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
<li>
<a href="#" class="list-group-item">
Item 2
</a>
</li>
<li>
<a href="#" class="list-group-item">
Item 3
</a>
</li>
</ul>
</li>
</ul>
</nav>
Use navbar-pills. It will work.