My code is a bit messy as i am learning bootstrap.
How do i go about resolving the empty space between the top and side bar
<!DOCTYPE html>
<html lang="en">
<style type="text/css">
.navbar-brand>img {
max-height: 100%;
height: 100%;
width: auto;
margin: 0 auto;
/* probably not needed anymore, but doesn't hurt */
-o-object-fit: contain;
object-fit: contain;
}
</style>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Simple Sidebar - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<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="http://disputebills.com"><img src="http://disputebills.com/site/uploads/2015/10/dispute.png" alt="Dispute Bills"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</div>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
TER
</a>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class = "row">
<div class = "panel panel-default">
<div class = "panel-header">
<h1> TER</H1>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3">
<div class = "panel panel-default">
<div class = "panel-body">
<img src="images.jpg" class="img-circle " alt="Cinque Terre" width="200" height="200">
</div>
Toggle Menu
</div>
</div>
<div class="col-lg-6 col-md-6">
</div>
<div class="col-lg-3 col-md-3">
<h1>TER</h1>
<div class = "panel panel-default">
</div>
</div>
</div>
</div>
</div>
<div id ="charts-wrapper">
<div class = "container-fluid">
<div class = "row">
<div col = "col-lg-3">
haha
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
Attached is a snippet of the page.
I would like the side and top bar to be joined together as bar of the template frame of my webpage.
/*!
* Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
/* Toggle Styles */
#wrapper {
padding-left: 0;
-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 {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0px;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-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: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
left: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
Have you added any extra CSS to this design, or only working off of the Bootstrap default CSS file?
If the latter, just go into that file and find the classes that reference the navbar and the sidebar, then take note of the position and margin elements.
The navbar is likely going to have a 'fixed' position, which is obvious being that it is stuck to the top of the page no matter the scroll position.
You probably want the sidebar to scroll with the rest of the page though, so you'll want to set the margins for the top of the sidebar div to 0. Then you want to set the position of the sidebar-wrapper div to 'absolute' if it's not already, then add the following:
left:0;
that should do it, but if not (depending on the div hierarchy), try adding the following as well:
top:[px height of navbar];
All you should need to do is remove the margin from the bottom of the .navbar which is 20px by default.
.navbar.navbar-default {
margin-bottom: 0;
}
See working Snippet.
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
.navbar.navbar-default {
margin-bottom: 0;
}
.navbar-brand>img {
max-height: 100%;
height: 100%;
width: auto;
margin: 0 auto;
/* probably not needed anymore, but doesn't hurt */
-o-object-fit: contain;
object-fit: contain;
}
#wrapper {
padding-left: 0;
-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 {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0px;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-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: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
left: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<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="http://disputebills.com">
<img src="http://disputebills.com/site/uploads/2015/10/dispute.png" alt="Dispute Bills">
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
</div>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
TER
</a>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="panel panel-default">
<div class="panel-header">
<h1> TER</H1>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3">
<div class="panel panel-default">
<div class="panel-body">
<img src="images.jpg" class="img-circle " alt="Cinque Terre" width="200" height="200">
</div>
Toggle Menu
</div>
</div>
<div class="col-lg-6 col-md-6">
</div>
<div class="col-lg-3 col-md-3">
<h1>TER</h1>
<div class="panel panel-default">
</div>
</div>
</div>
</div>
</div>
<div id="charts-wrapper">
<div class="container-fluid">
<div class="row">
<div col="col-lg-3">
haha
</div>
</div>
</div>
</div>
Related
The issue that I'm having is that the content on my page is being pushed down by the navbar creating a small scroll gap at the bottom of the page.
I'd like to have all the content fill the page without the unnecessary scroll bar in the above image. The navbar at the top of the page is a basic Bootstrap navbar with the body making use of this code I copied from Bootsnipp consisting of a side navigation and content area, which I have modified and added a responsive toggle button.
The issue is being caused by applying position: absolute to #sidebar-wrapper which fixes the side nav to the top of the page. I have tried changing the order and positioning of the layout as well as placing the header-navbar and content inside of a wrapper with little success.
The above gif is the issue that I was having before applying position: absolute although this is only a temporary fix as when the window is resized vertically the side-nav doesn't stay fixed to the bottom of the page.
Below is a snippet of the view in question.
Thank you for your time and I will be happy to provide any further information if needed
var AccountNav = (function() {
var wWidth
$(document).ready(function() {
$('#submenu-toggle').click(function(e) {
e.preventDefault()
$('#wrapper').toggleClass('toggled')
})
getWindowWidth()
ToggleNavBar()
})
$(window).resize(function() {
getWindowWidth()
console.log(wWidth)
ToggleNavBar()
})
function ToggleNavBar() {
if (wWidth >= 768) {
$('#toggle-navbar').css("display", "none")
} else {
$('#toggle-navbar').css("display", "flex")
if ($('#wrapper').hasClass('toggled')) {
$('#wrapper').toggleClass('toggled')
}
}
}
function getWindowWidth() {
wWidth = $(window).width()
}
})();
html,
body {
overflow-x: hidden;
}
#wrapper {
padding-left: 0;
-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 {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-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: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav>.sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
color: #fff
}
.sidebar-nav>.sidebar-brand a {
color: #999999;
}
.sidebar-nav>.sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<body>
<header>
<nav class="navbar navbar-expand-md bg-dark navbar-dark py-1">
<div class="container">
<!-- Brand -->
<a asp-controller="home" asp-action="index" class="navbar-brand">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" style=" enable-background: new 0 0 32 32;" xml:space="preserve" fill="white">
<g id="logo" class="logo">
<path d="M2 20h20v2H2v-2zm2-8h2v7H4v-7zm5 0h2v7H9v-7zm4 0h2v7h-2v-7zm5 0h2v7h-2v-7zM2 7l10-5 10 5v4H2V7zm2 1.236V9h16v-.764l-8-4-8 4zM12 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
</g>
</svg> BankNet
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a asp-controller="Home" asp-action="Index" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a asp-controller="Home" asp-action="Features" class="nav-link">Features</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="false" aria-expanded="false">
Utilities
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a asp-controller="Utilities" asp-action="CurrencyConverter" class="dropdown-item">Currency Converter</a>
<a asp-controller="Utilities" asp-action="TaxCalculator" class="dropdown-item">Tax Calculator</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li href="#" class="nav-link">
<a asp-controller="Account" asp-action="Account" class="nav-link">Account</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main role="main" class="pb-3">
<nav class="navbar p-1" id="toggle-navbar">
<div class="nav-item">
<a class="btn btn-dark text-light" id="submenu-toggle">Toggle Menu</a>
</div>
</nav>
<div id="wrapper">
<div id="sidebar-wrapper" style="position:absolute">
<ul class="sidebar-nav">
<li class="sidebar-brand">
Hello {Name}
</li>
<li>
Accounts
</li>
<li>
Transfers
</li>
<li>
Loans
</li>
<li>
Account options
</li>
</ul>
</div>
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
I've changed your navbar position css to fixed, i hope this is the solution that you are looking for
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<body>
<header>
<nav class="navbar navbar--fixed navbar-expand-md bg-dark navbar-dark py-1">
<div class="container">
<!-- Brand -->
<a asp-controller="home" asp-action="index" class="navbar-brand">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32"
style="enable-background: new 0 0 32 32;" xml:space="preserve" fill="white">
<g id="logo" class="logo">
<path
d="M2 20h20v2H2v-2zm2-8h2v7H4v-7zm5 0h2v7H9v-7zm4 0h2v7h-2v-7zm5 0h2v7h-2v-7zM2 7l10-5 10 5v4H2V7zm2 1.236V9h16v-.764l-8-4-8 4zM12 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
</g>
</svg>
BankNet
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a asp-controller="Home" asp-action="Index" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a asp-controller="Home" asp-action="Features" class="nav-link">Features</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink"
data-toggle="dropdown" aria-haspopup="false" aria-expanded="false">
Utilities
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a asp-controller="Utilities" asp-action="CurrencyConverter"
class="dropdown-item">Currency Converter</a>
<a asp-controller="Utilities" asp-action="TaxCalculator" class="dropdown-item">Tax
Calculator</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li href="#" class="nav-link">
<a asp-controller="Account" asp-action="Account" class="nav-link">Account</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main role="main" class="pb-3">
<nav class="navbar p-1" id="toggle-navbar">
<div class="nav-item">
<a class="btn btn-dark text-light" id="submenu-toggle">Toggle Menu</a>
</div>
</nav>
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
Hello {Name}
</li>
<li>
Accounts
</li>
<li>
Transfers
</li>
<li>
Loans
</li>
</li>
<li>
Account options
</li>
</ul>
</div>
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
<style>
html,
body {
overflow-x: hidden;
}
.navbar--fixed {
position: fixed;
width: 100%;
z-index: 1100;
}
#toggle-navbar {
position: fixed;
height: 110px;
background: white;
z-index: 1050;
width: 100%;
}
#submenu-toggle {
margin-top: 64px;
}
#wrapper {
padding-left: 0;
-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 {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
overflow-x: hidden;
margin-left: -250px;
overflow-y: auto;
background: #000;
-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: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav>.sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
color: #fff;
}
.sidebar-nav>.sidebar-brand a {
color: #999999;
}
.sidebar-nav>.sidebar-brand a:hover {
color: #fff;
background: none;
}
#media (max-width: 768px) {
#sidebar-wrapper {
height: calc(100vh - 110px);
margin-top: 110px;
}
.container-fluid {
margin-top: 110px;
}
}
#media (min-width: 768px) {
.sidebar-nav {
margin-top: 64px;
}
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
height: 100%;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
</style>
<script>
var AccountNav = (function () {
var wWidth;
$(document).ready(function () {
$("#submenu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
getWindowWidth();
ToggleNavBar();
});
$(window).resize(function () {
getWindowWidth();
console.log(wWidth);
ToggleNavBar();
});
function ToggleNavBar() {
if (wWidth >= 768) {
$("#toggle-navbar").css("display", "none");
} else {
$("#toggle-navbar").css("display", "flex");
if ($("#wrapper").hasClass("toggled")) {
$("#wrapper").toggleClass("toggled");
}
}
}
function getWindowWidth() {
wWidth = $(window).width();
}
})();
</script>
The issue is caused by height: 100% for #sidebar-wrapper - we just reduce the height of #sidebar-wrapper by the height of the <header> which brings us to one change in your CSS:
height: calc(100% - 64px);
complete snippet below:
var AccountNav = (function() {
var wWidth;
$(document).ready(function() {
$("#submenu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
getWindowWidth();
ToggleNavBar();
});
$(window).resize(function() {
getWindowWidth();
console.log(wWidth);
ToggleNavBar();
});
function ToggleNavBar() {
if (wWidth >= 768) {
$("#toggle-navbar").css("display", "none");
} else {
$("#toggle-navbar").css("display", "flex");
if ($("#wrapper").hasClass("toggled")) {
$("#wrapper").toggleClass("toggled");
}
}
}
function getWindowWidth() {
wWidth = $(window).width();
}
})();
html,
body {
overflow-x: hidden;
}
#wrapper {
padding-left: 0;
-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 {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: calc(100% - 64px);
margin-left: -250px;
overflow-y: auto;
background: #000;
-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: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav>.sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
color: #fff
}
.sidebar-nav>.sidebar-brand a {
color: #999999;
}
.sidebar-nav>.sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<body>
<header>
<nav class="navbar navbar--fixed navbar-expand-md bg-dark navbar-dark py-1">
<div class="container">
<!-- Brand -->
<a asp-controller="home" asp-action="index" class="navbar-brand">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" style="enable-background: new 0 0 32 32;" xml:space="preserve" fill="white">
<g id="logo" class="logo">
<path
d="M2 20h20v2H2v-2zm2-8h2v7H4v-7zm5 0h2v7H9v-7zm4 0h2v7h-2v-7zm5 0h2v7h-2v-7zM2 7l10-5 10 5v4H2V7zm2 1.236V9h16v-.764l-8-4-8 4zM12 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
</g>
</svg> BankNet
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a asp-controller="Home" asp-action="Index" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a asp-controller="Home" asp-action="Features" class="nav-link">Features</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="false" aria-expanded="false">
Utilities
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a asp-controller="Utilities" asp-action="CurrencyConverter" class="dropdown-item">Currency Converter</a>
<a asp-controller="Utilities" asp-action="TaxCalculator" class="dropdown-item">Tax
Calculator</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li href="#" class="nav-link">
<a asp-controller="Account" asp-action="Account" class="nav-link">Account</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main role="main" class="pb-3">
<nav class="navbar p-1" id="toggle-navbar">
<div class="nav-item">
<a class="btn btn-dark text-light" id="submenu-toggle">Toggle Menu</a>
</div>
</nav>
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
Hello {Name}
</li>
<li>
Accounts
</li>
<li>
Transfers
</li>
<li>
Loans
</li>
</li>
<li>
Account options
</li>
</ul>
</div>
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
I want to fix my grid, right now its in the middle of page and whitespaces everywhere, what I want to do is sidebar to the side of page no margins, 2 columns next to sidebar in a row with no spaces between them so they together take over whole page which makes 3 columns together with sidebar, and navigation bar above all those 3 columns.
Html Code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<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">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 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>
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
<span>Toggle Sidebar</span>
</button>
<button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-align-justify"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
<div>
<div class="container">
<div class="row">
<div class="col-md-4">
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Home 1
</li>
<li>
Home 2
</li>
<li>
Home 3
</li>
</ul>
</li>
<li>
About
</li>
<li>
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
<div class="col-md-4 bg-info">hi</div>
<div class="col-md-4 bg-dark">hi</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
</body>
</html>
CSS code:
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #ffc107;
color: #000000;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #ffc107;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #000000;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #000000;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #000000;
background: #ffc107;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #e67e22;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
min-height: 100vh;
transition: all 0.3s;
}
#cont{
width: 1300px;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
I am having difficulty getting the logo image (red) to overflow the menu bar, currently the menu bar is extended once the logo is added (see the image).
The HTML Code:
<div id="page" class="page">
<div class="pixfort_normal_1" id="section_header_2_dark">
<div class="header_nav_1 dark pix_builder_bg" style="background-image: none; background-color: rgb(13, 52, 64); padding-top: 0px; padding-bottom: 0px; box-shadow: none; border-color: rgb(255, 255, 255); background-size: auto; background-attachment: scroll; background-repeat: repeat;">
<div class="container">
<div class="sixteen columns firas2">
<nav role="navigation" class="navbar navbar-white navbar-embossed navbar-lg pix_nav_1">
<div class="containerss">
<div class="navbar-header">
<button data-target="#navbar-collapse-02" data-toggle="collapse" class="navbar-toggle pix_text" type="button">
<span class="sr-only ">Toggle navigation</span>
</button>
<img src="images/LOGO1.png" class="pix_nav_logo">
</div>
<div id="navbar-collapse-02" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active propClone">Home</li>
<li class="propClone">About</li>
<li class="propClone">Workshops and Training</li>
<li class="propClone">Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
</div>
</div><!-- container -->
</div>
</div>
The CSS Code:
.pix_nav_1 ul li a {
color: rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
};
.pix_nav_1 ul li a:hover {
//color: rgba(0,0,0,0.85);
opacity: 0.6;
}
.header_nav_1 {
padding: 0px !important;
box-shadow: none;
}
.pix_nav_logo {
background: url(../images/t_logo.png) no-repeat;
padding-top: 0px;
overflow: visible;
}
.navbar-center {margin-left: auto;margin-right: auto;float: none;position:
relative;text-align: center; }
.navbar-center li { text-align: center;float: none;display: inline-block;}
Could someone please assist me to how I can get the logo to overflow the menu. Thanks in advance!
Try this
.pix_nav_logo {
position: absolute;
}
You can adjust the logo by playing with different values for css property left and right for .pix_nav_logo.
position: absolute : The element is positioned relative to its first positioned (not static) ancestor element.
.pix_nav_logo {
background: url(../images/t_logo.png) no-repeat;
padding-top: 0px;
overflow: visible;
width: 100px; // This for your logo size
position: absolute; // This is absolute position of logo
}
.pix_nav_1 ul li a {
color: rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
;
.pix_nav_1 ul li a:hover {
//color: rgba(0,0,0,0.85);
opacity: 0.6;
}
.header_nav_1 {
padding: 0px !important;
box-shadow: none;
}
.pix_nav_logo {
background: url(../images/t_logo.png) no-repeat;
padding-top: 0px;
overflow: visible;
width: 100px;
position: absolute;
}
.navbar-center {
margin-left: auto;
margin-right: auto;
float: none;
position: relative;
text-align: center;
}
.navbar-center li {
text-align: center;
float: none;
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="page" class="page">
<div class="pixfort_normal_1" id="section_header_2_dark">
<div class="header_nav_1 dark pix_builder_bg" style="background-image: none; background-color: rgb(13, 52, 64); padding-top: 0px; padding-bottom: 0px; box-shadow: none; border-color: rgb(255, 255, 255); background-size: auto; background-attachment: scroll; background-repeat: repeat;">
<div class="container">
<div class="sixteen columns firas2">
<nav role="navigation" class="navbar navbar-white navbar-embossed navbar-lg pix_nav_1">
<div class="containerss">
<div class="navbar-header">
<button data-target="#navbar-collapse-02" data-toggle="collapse" class="navbar-toggle pix_text" type="button">
<span class="sr-only ">Toggle navigation</span>
</button>
<img src="http://www.hjmt.com/blog/wp-content/uploads/2012/08/Logo_TV_2015.png" class="pix_nav_logo">
</div>
<div id="navbar-collapse-02" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active propClone">Home</li>
<li class="propClone">About</li>
<li class="propClone">Workshops and Training</li>
<li class="propClone">Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</div>
</div>
<!-- container -->
</div>
</div>
How can I put the text <h5 class="nav-title text-center center-block hidden-sm hidden-md hidden-lg" id="nav-center">Liam Docherty's Digital Portfolio</h5>in the middle of the navigation bar so it in line with the other nav bar webpages text?
<style>
#nav_a {
width:25%;
}
#nav_img {
width:100%;
height: 30px;
}
#media (min-width: 768px) {
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
}
.body {
font-family: 'Roboto', sans-serif;
color: black;
}
.navbar.navbar-default {
background-color: #FFFFFF;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center;
}
.dropdown .dropdown-menu {
background-color: #FFFFFF;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: black;
text-decoration: none;
font-size: 14pt;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: black;
border-radius: 9px;
transition: all .2s;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
.section {
min-height: 100vh;
}
.one {
background-color: #FFFFFF;
}
.two {
background-color: #FFFFFF;
}
#sections .section {
padding-top: 50px;
}
.hero {
background: url("https://static.pexels.com/photos/38892/pexels-photo-38892.jpeg") center center no-repeat;
background-attachment: fixed;
background-size: cover;
width: 100%;
max-width: 100%;
width: 100vw;
height: 60%;
}
.shape {
border-radius: 25px;
background: #4D5061;
content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
color: white;
height: 300px;
margin: auto;
padding: 3px;
width: 300px;
top: 15%;
left: 50%;
position: absolute;
margin-left: -150px;
z-index: 10;
}
.fa-angle-down {
color: #0000;
bottom: 0px;
margin: 0 auto;
}
.fa-angle-up {
color: #0000;
bottom: 0px;
margin: 0 auto;
}
.s1-text {
text-align: center;
color: black;
z-index: 99;
font-size: 18pt;
}
.s2-text {
text-align: center;
color: black;
z-index: 99;
font-size: 18pt;
}
.nav-text {
font-size: 14pt;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<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 id="nav_a" class="navbar-brand pull-left" href=""><img id="nav_img" class="img-responsive" src="http://i1126.photobucket.com/albums/l611/ldocherty1/logo1_zpsep8qps5m.png" alt="Logo design"></a>
<h5 class="nav-title text-center center-block hidden-sm hidden-md hidden-lg" id="nav-center">Liam Docherty's Digital Portfolio</h5>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-center">
<h5 class="nav-title text-center center-block hidden-xs ">Liam Docherty's Digital Portfolio</h5>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Unit 6
</li>
<li>Unit 14
</li>
<li>Unit 7
</li>
<li>Unit 1
</li>
</ul>
</li>
<li class="dropdown">
About <span class="caret"></span>
<ul class="dropdown-menu">
<li>About Me
</li>
<li>CV
</li>
<li>Education
</li>
</ul>
</li>
<li>Contact Me
</li>
</ul>
</div>
</div>
</nav>
<div id="sections">
<div class="section one">
<div class="shape"></div>
<div class="hero"></div>
<h1 class="s1-text center-block">WELCOME TO MY</h1>
<h1 class="s2-text center-block">PORTFOLIO</h1>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</div>
<section id="contact-me" class="section two">
<i class="fa fa-angle-up" style="font-size:100px;"></i>
</div>
<script>
$(document).ready(function() {
$('#sections').fullpage();
});
</script>
</body>
</html>
Add margin-top for centered horizontaly the text :)
.center-block {
display: block;
margin-right: auto;
**margin-top: 30px;**
margin-left: auto;
}
try,
.center-block {
display: block;
width: 100%;
position: absolute;
}
Just Put this CSS
.navbar-header h5{line-height:30px}
I'm trying to place the picture of mine which is <div class="shape"> on top of the background image which is <div class="hero"> just above the center using bootstrap.
However, the background color and image both appear above my picture. I'm looking for the background image to go behind my picture and for the background color not to be seen at this moment in time.
Please don't delete the background color if you decide to help me as I want to do something with it at a later stage.
Please open the snippet in full screen to see my issue.
<style>
.body {
font-family: 'Roboto', sans-serif;
color: black;
}
.navbar.navbar-default {
background-color: #FFFFFF;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: center;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center;
}
.dropdown .dropdown-menu {
background-color: #FFFFFF;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: black;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: black;
border-radius: 9px;
transition: all .2s;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
.section {
min-height: 100vh;
}
.one {
background-color:#c00;
}
.two {
background: #563D7C;
}
#sections .section {
padding-top: ~50px;
}
.hero {
background: url("http://mowebusa.nobletechindia.com/wp-content/uploads/2016/05/computer.jpg") center center no-repeat;
background-attachment: fixed;
position: relative;
background-size: cover;
width: 100%;
max-width: 100%;
width: 100vw;
height: 100%;
}
.shape {
border-radius: 25px;
background: #4D5061;
content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
color: white;
height: 300px;
margin: auto;
padding: 3px;
width: 300px;
margin-left: auto;
margin-right: auto;
}
</style>
!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<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>
</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">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="sections">
<div class="section one">
<div class="shape"></div>
<div class="hero"></div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</div>
<div class="section two"></div>
<i class="fa fa-angle-up" style="font-size:100px;"></i>
</div>
<script>
$(document).ready(function() {
$('#sections').fullpage();
});
</script>
</body>
</html>
You can do this by following the steps below:
add position: absolute to .shape to overlap the hero image.
add z-index: 10 to get .shape on top of .hero image
Now, to center align a positioned element, keep in mind the following trick:
use left: 50% to put the positioned element 50% from the left.
add margin-left: -150px
The 1st step would have worked just fine if the element had width of 1px (.shape will start after 50% from left) but since it has a width of 300px, you will have to add a negative margin-left equal to half the width of the element (300/2 = 150).
Similarly, for vertical alignment you can use top: 50% and a negative margin-top equal to 1/2 of the height.
Note: There was issue on padding-top: ~50px;, remove the ~ as it is invalid token. Also, padding can't be in negative.
.body {
font-family: 'Roboto', sans-serif;
color: black;
}
.navbar.navbar-default {
background-color: #FFFFFF;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: center;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center;
}
.dropdown .dropdown-menu {
background-color: #FFFFFF;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: black;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: black;
border-radius: 9px;
transition: all .2s;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
.section {
min-height: 100vh;
}
.one {
background-color: #c00;
}
.two {
background: #563D7C;
}
#sections .section {
padding-top: 50px;
}
.hero {
background: url("http://mowebusa.nobletechindia.com/wp-content/uploads/2016/05/computer.jpg") center center no-repeat;
background-attachment: fixed;
position: relative;
background-size: cover;
width: 100%;
max-width: 100%;
width: 100vw;
height: 100%;
}
.shape {
border-radius: 25px;
background: #4D5061;
content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
color: white;
height: 300px;
margin: auto;
padding: 3px;
width: 300px;
/* add this */
position: absolute;
left: 50%;
margin-left: -150px;
z-index: 10;
}
!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<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>
</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">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="sections">
<div class="section one">
<div class="shape"></div>
<div class="hero"></div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</div>
<div class="section two"></div>
<i class="fa fa-angle-up" style="font-size:100px;"></i>
</div>
<script>
$(document).ready(function() {
$('#sections').fullpage();
});
</script>
</body>
</html>