Try to add top navigation that has side navigation already. But how I put the top navigation to the main page seems wrong. How to make side nav and top nav be in the same position. The image I put below. Top nav at the above. and the side nav goes below the top nav. I want to make it looks parallel. How to do it in the correct way?
In this case, my topnav height is 60 px. Is there any better way than just add margin-top -60px to my sidebar?
TopNavigation.jsp
<div class="top_nav">
<div class="nav_menu">
<nav class="" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="javascript:;"
class="user-profile dropdown-toggle" data-toggle="dropdown"
aria-expanded="false">
<img
src="
<c:url value="/resources/images/user.png"/>
"><%=session.getAttribute("usrname")%>
<span class=" fa fa-angle-down"></span>
</a>
</ul>
</nav>
</div>
</div>
SideNavigation.jsp
<nav id="sidebar">
<div class="custom-menu">
<button type="button" id="sidebarCollapse" class="btn btn-primary">
<i class="fa fa-bars"></i> <span class="sr-only">Toggle Menu</span>
</button>
</div>
<div class="p-4">
<h1>
<img src=""/>">
</h1>
<ul class="list-unstyled components scrollBarNav mb-5">
<li class="active"><a href="#"><span class="fa fa-camera "></span>
</a>
</li>
<li><span class="fa fa-code-fork"></span>
</li>
<li><a href="#"><span class=""><i class="fa fa-user-plus" aria-hidden="true"></i></span>
</a>
</li>
</ul>
<div class="footer">
<span class="fa fa-sign-out"></span>
</div>
</div>
</nav>
Main Page
<body>
<jsp:include page='TopNavigation.jsp'></jsp:include>
<div class="wrapper d-flex align-items-stretch">
<jsp:include page='SideNavigationManagement.jsp'></jsp:include>
<div id="content" class="p-4 p-md-5 pt-5">
<h2 class="mb-4">Sidebar #05</h2>
<p>Lorem ipsum </p>
</div>
</div>
</body>
CSS
#sidebar {
min-width: 270px;
max-width: 270px;
background: #3445b4;
color: #fff;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
position: fixed;
height:100%;
}
#content {
width: 100%;
padding: 0;
min-height: 100vh;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
margin-left:270px;
}
//TopCss .main_container .top_nav {
display: block;
margin-left: 270px;
}
.nav_menu {
float: left;
background: #EDEDED;
border-bottom: 1px solid #D9DEE4;
margin-bottom: 10px;
width: 100%;
position: relative;
}
.navbar-right {
margin-right: 0;
}
.top_nav .navbar-right {
margin: 0;
width: 70%;
float: right;
}
.top_nav .navbar-right li {
display: inline-block;
float: right;
position: static;
}
Result Image :
Related
I just want to make the navbar and sidebar fixed even the user scroll down the page. And also responsive. How can I do that without changing the design of the navbar and sidebar? Can somebody help me with my problem using bootstrap? Here's my fiddle https://jsfiddle.net/exyvat08/17/
<div class="d-flex" id="wrapper">
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading"><img class="mx-auto d-block" src="../images/logo.jpg" id="logo"></div>
<div class="list-group list-group-flush">
Dashboard
User
Supplier
Purchase Order
Reports
</div>
Original Design
Change your CSS to look like this:
.navbar{
position: fixed;
left: 0px; /* the key here is to make left and right '0px' */
right: 0px;
background: linear-gradient(to top right,#0084ff,#0084ff);
}
.content-container{ /* change this to be the container of your content */
margin-top: 57px /* 57px is just the height of your navbar */
}
Fiddle: https://jsfiddle.net/exyvat08/17/
I have fixed the siderbar & Nav bar fixed using position fixed & width calc
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
if (e.target.innerText == "Show Menu") {
e.target.innerText = "Hide Menu";
} else {
e.target.innerText = "Show Menu";
}
});
body {
height: 100%;
overflow-x: hidden;
font-family: sans-serif;
}
#logo {
width: 160px;
height: 150px;
border-radius: 50%;
}
#page-content-wrapper {
margin-left: 241px;
width: calc(100% - 241px);
}
#sidebar-wrapper {
min-height: 100vh;
margin-left: -15rem;
-webkit-transition: margin .25s ease-out;
-moz-transition: margin .25s ease-out;
-o-transition: margin .25s ease-out;
transition: margin .25s ease-out;
position:fixed;
z-index: 1;
height:100vh;
}
#sidebar-wrapper .sidebar-heading {
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
}
#sidebar-wrapper .list-group {
width: 15rem;
}
#page-content-wrapper {
min-width: 100vw;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: 0;
}
.navbar {
background: linear-gradient(to top right, #0084ff, #0084ff);
position: fixed !important;
width: calc(100% - 241px);
top:0px;
}
#media (min-width: 768px) {
#sidebar-wrapper {
margin-left: 0;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<body>
<div class="d-flex" id="wrapper">
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading"><img class="mx-auto d-block" src="../images/logo.jpg" id="logo"></div>
<div class="list-group list-group-flush">
<i class="fas fa-tachometer-alt"></i>Dashboard
User
Supplier
Purchase Order
Reports
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-success border-bottom">
<button class="btn btn-outline-light btn-sm" id="menu-toggle">Hide Menu</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link text-light" href=""><i class="fas fa-home"></i> Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-light"><i class="fas fa-building"></i> Contact</a>
</li>
<li class="nav-item dropdown">
<a class="btn nav-link dropdown-toggle text-light" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user"></i> John Doe
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">See Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
So far I have a responsive side bar and top bar.
My problem is I want to make my side bar 100% height but still responsive. The reason I want it to be a 100% so the background colour runs down the screen. This is how it looks currently http://prntscr.com/gtyxt0
This is how it looks when it the browser width is shortened: http://prntscr.com/gtyxxp When clicking the icon, the side bar expands which is exactly what I want.
When I set the position of the side bar to fixed so I can set the height 100% I lose all responsiveness.
What is the best way to go about this?
Here is my HTML/CSS
HTML
<div class="navbar navbar-fixed-top navbar-default" role="navigation">
<div class="container-fluid">
<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 title" href="#">DSUM</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
{{username}} <span class="caret"></span>
<ul class="dropdown-menu">
<li>Sign Out</li>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
<!-- /.container -->
</div>
<!-- /.navbar -->
<div class="container-fluid page-header">
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="sidebar-nav">
<ul class="nav">
<li class="sidebar-item-group">Menu</li>
<li><a routerLink="/dashboard"><i class="fa fa-home" aria-hidden="true"></i> Dashboard</a></li>
<li class="nav-divider"></li>
<li class="sidebar-item-group">Quick Links</li>
<li><a routerLink="/usersearch"><i class="fa fa-search" aria-hidden="true"></i> User Search</a></li>
<li><i class="fa fa-user-plus" aria-hidden="true"></i> Create Disc Account</li>
<li><i class="fa fa-address-card-o" aria-hidden="true"></i> Create Disc Role</li>
</ul>
</div>
<!--/.well -->
</div>
<!--/span-->
<div class="col-xs-12 col-sm-9">
<br>
<div class="jumbotron">
<a class="visible-xs" data-toggle="offcanvas"><i class="fa fa-lg fa-reorder"></i></a>
<h1>Hello, world!</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
<div class="row">
</div>
<!--/row-->
</div>
<!--/span-->
</div>
<!--/row-->
</div>
<!--/.container-->
CSS
body {
padding-top: 50px;
}
footer {
padding-left: 15px;
padding-right: 15px;
}
/*
* Off Canvas
* --------------------------------------------------
*/
#media screen and (max-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
background: #ecf0f1;
}
.row-offcanvas-left .sidebar-offcanvas {
left: -40%;
}
.row-offcanvas-left.active {
left: 40%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 40%;
margin-left: 12px;
}
}
#sidebar {
padding: 15px;
margin-top: 10px;
background-color: #2F363E;
}
.title {
background-color: #1F70A8;
text-align: left;
font-family: 'Lato', sans-serif;
font-size: 24px;
font-weight: bold;
color: #e1ffff;
width: 185px;
}
.sidebar-item-group {
color: #637083;
font-family: 'Lato', sans-serif;
font-weight: bold
}
So I'm using bootstrap to build a dashboard with a side nav bar. When the navbar is open, the container content is pushed to the right and out of the screen. I want the whole container to be resized to fit the screen. So whether navbar is open or collapsed, container should be fully visible. Is there a bootstrap css class I can add to body or container to fix that issue?
<body>
<div id="wrapper">
<div class="overlay"></div>
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand">
<img src="assets/img/logo.png"></img>
</li>
<li>
<span class="icon icon-home"></span>Overview
</li>
<li>
<span class="icon icon-suitcase"></span>Account Management
</li>
<li>
<span class="icon icon-bar-graph"></span>Demand Planning
</li>
<li>
<span class="icon icon-box"></span>Inventory Planning
</li>
<li>
<span class="icon icon-light-bulb"></span>Vendor Management Invetory
</li>
<li>
<span class="icon icon-calculator"></span>Dashboards
</li>
<li>
<span class="icon icon-text-document">Reports
</li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
<div class="container">
<div class="dashhead">
<div class="dashhead-titles">
<div class="dashhead-toolbar">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
</div>
</form>
</div>
<h3 class="dashhead-title">Overview</h3>
</div>
</div>
<ul class="nav nav-bordered mt-4 mt-md-2 mb-0 clearfix" role="tablist">
<li class="nav-item" role="presentation">
Summary
</li>
</ul>
<hr class="mt-0 mb-5">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="traffic">
<div class="row text-center m-t-md">
<div class="col-lg-4"</div>
</div>
</div>
</div>
<style>
#sidebar-wrapper {
z-index: 1000;
left: 235px;
width: 0;
height: 100%;
margin-left: -235px;
overflow-y: auto;
overflow-x: hidden;
background: #252D3A;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}
#wrapper.toggled #sidebar-wrapper {
width: 235px;}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -235px;}
#page-content-wrapper {
width: 100%;
padding-top: 20px;}
#sidebar-nav {
position: absolute;
top: 0;
width: 235px;
margin: 0;
padding: 0;
list-style: none;}
</style>
Please Change the value of css.
#wrapper.toggled #page-content-wrapper {
position: absolute;
width: calc(100% - 235px);
margin-left: 235px;
}
I have coded up a bootstrap navbar, however when I tried to test its responsiveness, it does not create the little hamburger icon like it should...
I have an outer container for my page which has a fixed width, and an inner container for my fixed-top navbar of course. I have tried playing around with the containers, but it doesnt make the navbar responsive at all, so I must be missing something, or some code is conflicting with the responsive navbar??
fyi: the flex code doesnt seem to be working correctly in here :/
thanks guys
body {
padding-top: 102px;
background-color: #4d4d4d;
}
.container {
width: 1530px;
margin: 0 auto;
margin-top: 0;
}
.navbar-brand {
font-size: 50px;
padding-top: 40px;
}
.custom-nav {
min-height: 90px;
font-size: 16px;
color: #000 !important;
background-color: #fff;
}
.dropdown-menu.user-list {
width: 100%;
border-radius: 0;
box-shadow: none;
border: 0;
background-color: #F8F8F8;
font-size: 15px;
}
ul.user-list li a {
padding: 8px 30px;
}
ul.user-list li.divider {
width: 200px;
margin: 0 auto;
}
.avatar-img {
padding: 0;
}
i.fa-angle-down {
font-size: 25px;
vertical-align: middle;
font-weight: lighter;
}
/* My styles */
li.dropdown {
height: 90px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.user {
margin-left: 50px;
margin-right: 20px;
}
.label {
border-radius: 100px;
position: absolute;
top: 25px;
right: 2px;
background-color: #ff5500;
}
.navbar-default .navbar-nav>li>a {
color: #777;
padding: 30px 19px;
}
li.dropdown.bell {
margin-right: 40px;
}
.nav>li.dropdown.bell>a:hover,
.nav>li.dropdown.bell>a:focus {
background-color: transparent;
}
#search-container {
width: 300px;
}
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top custom-nav">
<div class="container">
<a class="navbar-brand navbar-left" href="#">PAGE NAME</a>
<ul class="nav navbar-nav navbar-right">
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- search bar added -->
<li class="dropdown">
<div class="input-group" id="search-container">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-search"></span></span>
</div>
</li>
<li class="dropdown bell">
<a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
<img src="http://placehold.it/50x50" class=" avatar-img img-square">
<span class="label label-info">1</span>
</a>
<ul class="dropdown-menu bell" role="menu">
<li><span class="label label-warning">4:00 AM</span>Favourites Snippet
</li>
<li><span class="label label-warning">4:30 AM</span>Email marketing
</li>
<li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
design</a>
</li>
<li class="divider"></li>
<li>View All
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="http://placehold.it/70x70" class=" avatar-img img-circle"><span class="user">Jacky Smith</span><i class="fa fa-angle-down"></i>
<!-- <span class="glyphicon glyphicon-menu-down"></span> -->
</a>
<ul id="menu" class="dropdown-menu user-list" role="menu">
<li>Action
</li>
<li class="divider"></li>
<li>Another action
</li>
<li class="divider"></li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>dfsjfhskfs</p>
<!-- <div class="chevron right">
</div>
<div style="height: 1em;">
</div> -->
</div>
</div>
</div>
</div>
You have a few issues that you need to fix.
You need a navbar-header, that includes the button that will be shown on small screen sizes.
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand navbar-left" href="#">PAGE NAME</a>
</div>
You need to wrap your menu content in a collapse div, that will be shown/hidden on button click on small screen sizes.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
3. The container inside of your menu needs to be a container-fluid.
<nav class="navbar navbar-default navbar-fixed-top custom-nav">
<div class="container-fluid">
You need to make your container class have auto width for small screen sizes, otherwise it pushes the hamburger button off the screen. A bit of CSS with a media query can achieve this.
#media(max-width: 767px) {
.container {
width: auto;
}
}
Bootstrap Navbar Documentation
body {
padding-top: 102px;
background-color: #4d4d4d;
}
.container {
width: 1530px;
margin: 0 auto;
margin-top: 0;
}
#media(max-width: 767px) {
.container {
width: auto;
}
}
.navbar-brand {
font-size: 50px;
padding-top: 40px;
}
.custom-nav {
min-height: 90px;
font-size: 16px;
color: #000 !important;
background-color: #fff;
}
.dropdown-menu.user-list {
width: 100%;
border-radius: 0;
box-shadow: none;
border: 0;
background-color: #F8F8F8;
font-size: 15px;
}
ul.user-list li a {
padding: 8px 30px;
}
ul.user-list li.divider {
width: 200px;
margin: 0 auto;
}
.avatar-img {
padding: 0;
}
i.fa-angle-down {
font-size: 25px;
vertical-align: middle;
font-weight: lighter;
}
/* My styles */
li.dropdown {
height: 90px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.user {
margin-left: 50px;
margin-right: 20px;
}
.label {
border-radius: 100px;
position: absolute;
top: 25px;
right: 2px;
background-color: #ff5500;
}
.navbar-default .navbar-nav>li>a {
color: #777;
padding: 30px 19px;
}
li.dropdown.bell {
margin-right: 40px;
}
.nav>li.dropdown.bell>a:hover,
.nav>li.dropdown.bell>a:focus {
background-color: transparent;
}
#search-container {
width: 300px;
}
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top custom-nav">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand navbar-left" href="#">PAGE NAME</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- search bar added -->
<li class="dropdown">
<div class="input-group" id="search-container">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-search"></span></span>
</div>
</li>
<li class="dropdown bell">
<a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
<img src="http://placehold.it/50x50" class=" avatar-img img-square">
<span class="label label-info">1</span>
</a>
<ul class="dropdown-menu bell" role="menu">
<li><span class="label label-warning">4:00 AM</span>Favourites Snippet
</li>
<li><span class="label label-warning">4:30 AM</span>Email marketing
</li>
<li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
design</a>
</li>
<li class="divider"></li>
<li>View All
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="http://placehold.it/70x70" class=" avatar-img img-circle"><span class="user">Jacky Smith</span><i class="fa fa-angle-down"></i>
<!-- <span class="glyphicon glyphicon-menu-down"></span> -->
</a>
<ul id="menu" class="dropdown-menu user-list" role="menu">
<li>Action
</li>
<li class="divider"></li>
<li>Another action
</li>
<li class="divider"></li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>dfsjfhskfs</p>
<!-- <div class="chevron right">
</div>
<div style="height: 1em;">
</div> -->
</div>
</div>
</div>
</div>
I am trying to add a logo as the brand on a fixed-bottom navbar.
The logo is larger than the navbar itself. I want it to overlap the body, but instead it hangs below the top of the links.
I don't know what element to style in to change.
.navbar {
height:72px;
background: transparent;
background-image: url("../images/nav-bkgd.png");
background-repeat: repeat-x;
border: 0;
text-transform: uppercase;
font-family: "Bangers","Helvetica Neue",Helvetica,Arial,sans-serif;
letter-spacing: 2px;
padding-left: 35px;
padding-right: 35px;
}
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
.navbar-fixed-bottom {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
<body>
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src='assets/images/logo.png'</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#">TROPOSHPERE</a>
</li>
<li>
<a class="page-scroll" href="#">STRATOSPHERE</a>
</li>
<li>
<a class="page-scroll" href="#">MESOSPHERE</a>
</li>
<li>
<a class="page-scroll" href="#">THERMOSPHERE</a>
</li>
<li>
<a class="page-scroll" href="#">EXOSPHERE</a>
</li>
</ul>
</div>
</div>
</nav>
try
.navbar-brand img {
margin-top: -16px;
}
I just put -16px as a random measurement but tweak it to match what you want of course.
Also the img tag within the link isn't closed (missing />)