Overlay when click on menu (and remove border) - javascript

my name is Daniel and im working on my portfolio website. I want an overlay when i click on my hamburger menu so that everything becomes darker and the focus lays on the menu. And i want it to go away when you click on the menu again, or click on one of the menu items or click on the overlay self. (only for my mobile version)
Also i have weird border-line when i open my hamburger menu on mobile and i don't know how to remove it
Link to my website so far: http://20162.hosts.ma-cloud.nl/portfoliowebsite/
(the latest version isn't online yet)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta name="author" content="Daniel Gotz">
<title>Daniel Gotz | Porfolio </title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/scrolling-nav.css" rel="stylesheet">
<link href="dist/hamburgers.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Exo+2:600,900|Roboto" rel="stylesheet">
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<section id="intro" class="intro-section">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header page-scroll">
<button class="hamburger hamburger--spin navbar-toggle visible-xs" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class=" hamburger-box">
<span class=" hamburger-inner"></span> </span>
</button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav right">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li> <a class="page-scroll" href="#intro">Intro</a> </li>
<li> <a class="page-scroll" href="#mijnwerk">Mijn werk</a> </li>
<li> <a class="page-scroll" href="#overdaniel">Over Daniel</a> </li>
<li> <a class="page-scroll" href="#contact">Contact</a> </li>
</ul>
</div>
</nav>
<div class="overlay" id="overlay"></div>
<div class="title">
<h1> Every mountain top is within reach if you just keep climbing</h1> </div>
<div class="berg">
<img src="berg.svg">
</div>
</section>
<section id="mijnwerk" class="about-section"> </section>
<section id="overdaniel" class="services-section"> </section>
<section id="contact" class="contact-section"> </section>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="js/hamburgers.js"></script>
</body>
</html>
CSS:
.overflow {
overflow-x: hidden;
position: relative;
}
.home {
height: 100vh;
width: 100vw;
background-color: #2ecc71;
}
.mijnwerk {
height: 100vh;
width: 100vw;
background-color: #27ae60;
}
.navbar-default {
background: none;
border-color: transparent;
z-index: 3;
}
.right {
float: right;
text-align: right;
}
.navbar-default .navbar-nav>li>a {
font-family: 'Roboto', sans-serif;
color: #ecf0f1;
font-size: 14px;
}
.nav>li>a {
padding: 15px 25px;
border-style: none;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
color: #ecf0f1;
border-style: none;
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
background: none
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-style: none;
}
h1 {
font-family: 'Exo 2' , sans-serif;
font-weight: 900;
font-size: 37px;
line-height: 60px;
}
.title {
font-family: 'Exo 2', sans-serif;
text-align: center;
width: 350px;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.berg {
position: absolute;
width: 100%;
bottom: 0;
margin: 0 0 -2px 0;
}
.overlay {
position: fixed;
top: 0;
z-index: 2;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: #333;
}
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
}
.top-nav-collapse {
padding: 0;
}
}
.intro-section {
height: 100%;
background: #2ecc71;
color: white;
text-align: center;
}
.about-section {
height: 100%;
background: #27ae60;
}
.services-section {
height: 100%;
background: #3498db;
}
.contact-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
JS:
// Look for .hamburger
var hamburger = document.querySelector(".hamburger");
// On click
hamburger.addEventListener("click", function() {
// Toggle class "is-active"
hamburger.classList.toggle("is-active");
// Do something else, like open/close menu
});
I hope someone can help me out with these problems! :)

With this config you just pass background to the menu, and the close button will not be included and remove the border.
.navbar-collapse navbar-ex1-collapse collapse in {
background: rgba(27, 27, 62, 0.5);
}
.navbar-default {
background: none;
border: none;
z-index: 3;
}

Related

How to hover between buttons to display content using Bootstrap3 and Jquery?

if you see my code and fiddle, the hovering is already working but i want that when a particular text is hovered, only the button relevant to it should be displayed and the previously shown button should be hidden. how can i do that? and it should also hide if i click anywhere on the screen
I have 2 buttons named "Water" and "soil" which display 1 button each. "1" for Water and 6 for soil. each of it are displayed when the mouse is hovered over either water or soil . Currently if i hover over "water" , 1 displays and then it remains displayed even if i hover over "soil" and 6 becomes activated. In principle, i want that only one category should be displayed. it should be Water or soil and not both. It should work like this:
When i hover over Water, 1 is activated and if i click anywhere on the screen, it disappears or when i hover over soil then it disappears and 6 is displayed and it should work in any order as any button can be hovered first. i have the hover button and close button which i cannot figure out where to insert but this concept is not working.How can i make this work? Here is the fiddle and the code:
https://jsfiddle.net/6u2g58qm/
$( document ).ready(function() {
$('#create_btn').on('click', function(){
$('#create_tab').tab('show')
})
$('#login_btn').on('click', function(){
$('#login_tab').tab('show')
})
$('#create_btn').on('click', function(){
$('#create1_tab').tab('show')
})
$(".hover_btn").click(function(e){
e.preventDefault();
})
$(".hover_btn").mouseenter(function(e){
e.preventDefault();
$("#tab1default").css("opacity","1");
})
$(".hover_btn2").hover(function(e){
e.preventDefault();
$("#tab2default1").css("opacity","1");
})
$(".hover_btn2").mouseleave(function(e){
e.preventDefault();
$("#tab2default1").css("opacity","0");
})
$(".hover_btn1").click(function(e){
e.preventDefault();
})
$(".hover_btn1").mouseenter(function(e){
e.preventDefault();
$("#tab2default").css("opacity","1");
})
$(".hover_btn22").hover(function(e){
e.preventDefault();
$("#tab3default1").css("opacity","1");
})
$(".hover_btn22").mouseleave(function(e){
e.preventDefault();
$("#tab3default1").css("opacity","0");
})
$("#closeButton").click(function(e){
e.preventDefault();
$("#tab1default").css("opacity","0");
})
});
#customTab a {
padding: 0;
}
.flex {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
}
#media (max-width: 576px) {
.container {
padding: 0;
}
.btn {
padding: 3px 6px;
font-size: 12px;
}
.flex .panel-default{
margin-right: 4px;
}
.flex .panel-default>.panel-heading{
padding: 0;
}
.flex .panel-default>.panel-body .btn:last-child{
margin-top: 4px;
}
}
.btn-dark {
background-color: #343a40;
color: #fff;
}
.btn-dark:hover,.btn.focus, .btn:focus {
color: #fff;
}
.btn.focus, .btn:focus,.btn:active,.btn:hover , .active >a .btn{
color: #fff;
background: blue;
}
.nav-tabs{
border: none;
}
.hover_btn{
background-image: url(air.jfif);
background-size: cover;
color: #000;
height: 200px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.hover_btn:hover{
background-image: url(air.jfif);
background-size: cover;
color: #000;
height: 200px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
opacity: 0.9;
}
<html lang="en">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<main>
<div class="container" id="customTab">
<ul class="nav " style="display: flex; justify-content: space-around; border: none;">
<li><span class="hover_btn">Water</span>
</li>
<li><span class="hover_btn1">soil</span></li>
</ul>
</div>
<div class="tab-content hover_btn2">
<div class="hover_btn2">
<div class="tab-pane fade" id="tab1default">
<div class="flex ">
<ul class="nav nav-tabs">
<li data-toggle="tab"><span class="btn btn-info">1</span></li>
</ul>
</div>
<div class="tab-pane fade" id="tab2default">
<div class="flex">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><span class="btn btn-info">6</span></li>
</ul>
</div>
</div>
</div>
</main>
</body>
</html>
:
You dont need JQuery to do a hover, its simple if you do it with css.
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<div>Hover me</div>
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
I've implemented what you need in your code...but while editing your code, I noticed you really need to learn basic concepts in coding, many <divs> were unfinished, you added the same classes twice...I think you should really go for the basics rather than diving into it. Anyways, I've added the code to change the opacities to 0 when the focus is lost, and FYI you've included the jQuery library but you're using Javascript...Check the snippet :)
$(document).ready(function() {
$('#create_btn').on('click', function() {
$('#create_tab').tab('show')
})
$('#login_btn').on('click', function() {
$('#login_tab').tab('show')
})
$('#create_btn').on('click', function() {
$('#create1_tab').tab('show')
})
$(".hover_btn").click(function(e) {
e.preventDefault();
})
$(".hover_btn").mouseenter(function(e) {
e.preventDefault();
$("#tab1default").css("opacity", "1");
})
$(".hover_btn2").hover(function(e) {
e.preventDefault();
$("#tab2default1").css("opacity", "1");
})
$(".hover_btn2").mouseleave(function(e) {
e.preventDefault();
$("#tab2default").css("opacity", "0");
})
$(".hover_btn1").click(function(e) {
e.preventDefault();
})
$(".hover_btn1").mouseenter(function(e) {
e.preventDefault();
$("#tab2default").css("opacity", "1");
})
$(".hover_btn2").mouseleave(function(e) {
e.preventDefault();
$("#tab3default1").css("opacity", "0");
})
$(".hover_btn").mouseleave(function(e) {
e.preventDefault();
$("#tab1default").css("opacity", "0");
})
$("#closeButton").click(function(e) {
e.preventDefault();
$("#tab1default").css("opacity", "0");
})
});
#customTab a {
padding: 0;
}
.flex {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
}
#media (max-width: 576px) {
.container {
padding: 0;
}
.btn {
padding: 3px 6px;
font-size: 12px;
}
.flex .panel-default {
margin-right: 4px;
}
.flex .panel-default>.panel-heading {
padding: 0;
}
.flex .panel-default>.panel-body .btn:last-child {
margin-top: 4px;
}
}
.btn-dark {
background-color: #343a40;
color: #fff;
}
.btn-dark:hover,
.btn.focus,
.btn:focus {
color: #fff;
}
.btn.focus,
.btn:focus,
.btn:active,
.btn:hover,
.active>a .btn {
color: #fff;
background: blue;
}
.nav-tabs {
border: none;
}
.hover_btn {
background-image: url(air.jfif);
background-size: cover;
color: #000;
height: 200px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.hover_btn:hover {
background-image: url(air.jfif);
background-size: cover;
color: #000;
height: 200px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
opacity: 0.9;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<main>
<div class="container" id="customTab">
<ul class="nav " style="display: flex; justify-content: space-around; border: none;">
<li><span class="hover_btn">Water</span>
</li>
<li><span class="hover_btn1">soil</span></li>
</ul>
</div>
<div class="tab-content">
<div class="hover_btn2">
<div class="tab-pane fade" id="tab1default">
<div class="flex ">
<ul class="nav nav-tabs">
<li data-toggle="tab"><span class="btn btn-info">1</span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade hover_btn3" id="tab2default">
<div class="flex">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li><span class="btn btn-info">6</span></li>
</ul>
</div>
</div>
</div>
</div>
</main>
</body>
</html>

Menu Toggle function is not working on eccomerce site

Hi I've been trying to troubleshoot this on my own but I already spent too many hours trying to figure it out. I couldn't add the images because idk how to on here but if someone could help me please. Or at least guide me in the right direction. My main.js is in a folder called js. My styles.css and html don't have folders but they seem to be working fine cause I know that matters as well.
function menuToggle() {
var MenuItems = document.getElementById("MenuItems");
MenuItems.style.maxHeight = "0px";
if (MenuItems.style.maxHeight == "0px") {
MenuItems.style.maxHeight = "200px";
} else {
MenuItems.style.maxHeight = "0px";
}
}
.menu-icon {
width: 28px;
margin-left: 20px;
display: none;
}
/*--- media query for menu ---*/
#media only screen and (max-width: 800px) {
nav ul {
position: absolute;
top: 70px;
left: 0;
background: #333;
width: 100%;
overflow: hidden;
transition: max-height 0.5s;
}
nav ul li {
display: block;
margin-right: 50px;
margin-top: 10px;
margin-bottom: 10px;
}
nav ul li a {
color: #fff;
}
.menu-icon {
display: block;
cursor: pointer;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gucci</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Assistant:wght#200;800&display=swap" rel="stylesheet">
<script src="js/main.js"></script>
</head>
<body>
<div class="header">
<div class="container">
<div class="navbar">
<div class="logo">
<img src="images/logogucci.png" width="125px">
</div>
<nav>
<ul id="MenuItems">
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Contact</li>
<li>Account</li>
</ul>
</nav>
<img src="images/carticon.png" width="30px" height="30px">
<img src="images/hamburger-menu-icon-transparent-1.jpg" class="menu-icon" onclick="menuToggle()">
</div>
The problem with your toggle function is that you're setting the height to 0px every time you toggle
You need to remove this line:
MenuItems.style.maxHeight = "0px";
function menuToggle() {
var MenuItems = document.getElementById("MenuItems");
if (MenuItems.style.maxHeight == "0px") {
MenuItems.style.maxHeight = "200px";
} else {
MenuItems.style.maxHeight = "0px";
}
}
.menu-icon {
width: 28px;
margin-left: 20px;
display: none;
}
/*--- media query for menu ---*/
#media only screen and (max-width: 800px) {
nav ul {
position: absolute;
top: 70px;
left: 0;
background: #333;
width: 100%;
overflow: hidden;
transition: max-height 0.5s;
}
nav ul li {
display: block;
margin-right: 50px;
margin-top: 10px;
margin-bottom: 10px;
}
nav ul li a {
color: #fff;
}
.menu-icon {
display: block;
cursor: pointer;
}
}
<div class="header">
<div class="container">
<div class="navbar">
<div class="logo">
<img src="images/logogucci.png" width="125px">
</div>
<nav>
<ul id="MenuItems">
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Contact</li>
<li>Account</li>
</ul>
</nav>
<img src="images/carticon.png" width="30px" height="30px">
<img src="images/hamburger-menu-icon-transparent-1.jpg" class="menu-icon" onclick="menuToggle()">

arrange side bar, navigation bar and footer

html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
overflow-x: hidden;
}
/*footer*/
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
/*navbar*/
.navbar{
background-color:black;
font-family: sans-serif;
font-size: 20px;
}
.navbar-brand{
font-size: 20px;
}
.logo1{
height: 50px;
width: 75px;
opacity: 0.1px;
left: 0px;
top: 0px;
position: absolute;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #000; /*Sets the text hover color on navbar*/
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >
a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: white; /*BACKGROUND color for active*/
background-color: #030033;
}
.navbar-default {
background-color: #0f006f;
border-color: #030033;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #66CCFF; /*change color of links in drop down here*/
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: silver; /*Change rollover cell color here*/
}
.navbar-default .navbar-nav > li > a {
color: whites; /*Change active text color here*/
}
body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}
/* side bar*/
/* 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: 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;
z-index: 1;
}
.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;
}
.btn>.btn-default{
}
#media(min-width:768px) {
#wrapper {
padding-left: 0;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
width: 0;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#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/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="style1.css" />
<link href="bootstrap.min1.css" rel="stylesheet">
</head>
<body>
<!--top bar-->
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<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>
<img class="logo1" src="images/capture.png" alt=" logo">
<a class="navbar-brand" href="#">Web Portax</a>
</div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Account Setting</li>
<li>Message</li>
<li class="dropdown">
Services<span class="caret"></span>
<ul class="dropdown-menu">
<li>Log Out</li>
<li>Edit Profile</li>
<li>Manage prefrences</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
Dashboard
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="jquery1.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="bootstrap.min1.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
<!-- body-->
<!-- Footer -->
<div class="container">
<div class="page-header">
<h1>Content</h1>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<p class="text-muted"> All rights reserved. </p>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Hey guys can anyone help me as my current page looks like this[enter image description here]
enter image description here
When i click toogle to expand my side bar it looks like this.
enter image description here
How can i fix the white spaces that is in between the header and the sidebar? How can i shift the little grey thing to toggle the sidebar to left corner? and lastly how can i shift "Web Portax" from the top nav bar slightly to the right so when i minimize it the logo and the text do not crumple together?
I am new to html thing so sorry for the amateur question. Thank you!
Use the margin property in CSS to adjust the space around your elements.
Example:
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
and the padding element to adjust the space in between the content and the border of the element.
Example:
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
You can also use the height and width properties to adjust the size of the element.
Example height: 100px;

Navbar not staying fixed

Hi guys I am trying to follow this Example and do exactly the same for my site, however I cant get my nav bar to work and follow the screen down. I have tried a lot and not sure what is going on.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<div class="parallax">
<div class="avater" style="background-image: url('Images/Pic1.jpg');background-size: cover;"></div>
<div class="info1">
<h1>Hero</h1>
<h2>Play play play</h2>
</div>
</div>
<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>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="section">
<h1> Section 1 <h1>
</div>
<div class="section2">
<h1> Section 2 <h1>
</div>
<div class="section3">
<h1> Section 3 <h1>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 70;
if ($(window).scrollTop() > navHeight) {
$('navbar').addClass('fixed');
}
else {
$('navbar').removeClass('fixed');
}
});
});
</script>
</body>
</html>
CSS:
body {
font-family: 'Open Sans', sans-serif, Arial;
font-size: 16px;
color: #6D6D6D;
background-color: #F5F5F5;
font-weight: 300;
}
h1,h2,h3,h4,h5,h6 {
font-family: 'Montserrat', sans-serif, Arial;
padding-bottom: 5px;
color: #373432;
line-height: 1em;
font-weight: normal;
}
a {
text-decoration: none;
outline: none;
}
/* Header */
.parallax {
background-image: url("../Images/back1.jpg");
min-height: 700px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 100px 20px;
}
.avater {
width: 260px;
height: 260px;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: inset 0 0 0 0 rgba(200, 95, 66, 0.4), inset 0 0 0 16px rgba(255, 255, 255, 0.16), 0 1px 2px rgba(0, 0, 0, 0.1);
margin: 0 auto;
}
.info1 {
text-align: center;
margin-top: 40px;
}
.info1 > h1 {
font-size: 60px;
color: #FFFFFF;
}
.info1 > h2 {
color: #FFFFFF;
font-size: 30px;
}
/* Navbar */
.fixed {
position: fixed;
top: 0;
height: 70px;
z-index: 1;
}
.navbar {
margin-bottom: 0px;
left: 0;
top: 0;
width: 100%;
list-style: none;
height: 70px;
}
.navbar-nav {
float: none;
margin: 0;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-nav > li > a {
line-height: 38px;
}
.navbar-nav > li > a.active {
background-color: #E7E7E7;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #333333;
background-color: #E7E7E7;
}
.navbar-toggle {
background-color: #000000;
background-image: none;
border-radius: 4px;
float: right;
margin-bottom: 8px;
margin-right: 15px;
margin-top: 18px;
padding: 9px 10px;
position: relative;
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: #2DCC70;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #000000;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border-color: transparent;
}
.section{
background-color:Red;
height: 1000px;
margin: 0;
}
.section h1 {
margin: 0;
}
.section2{
background-color:blue;
height: 1000px;
margin: 0;
}
.section3{
background-color:Black;
height: 1000px;
margin: 0;
}
If I change var navHeight = $( window ).height() - 70; to 277 it works fine however if I make the screen smaller it snaps straight up without waiting so its really weird.
Any help on this matter would be great.
Thanks
Apologies. I tried to fix your code instead of giving you a different solution. This works without the jumping.
var $window = $(window),
$el = $('nav'),
elTop = $el.offset().top;
$window.scroll(function() {
$el.toggleClass('navbar-fixed-top', $window.scrollTop() > elTop);
});

Dynamically Affixed Navbar

So I'm working on a web page, and I looked up how to make a dynamically affixed navigation bar. In other words a navbar that is fixed to the bottom of a header image but then fixes itself to the top when the user scrolls down past the header. Most of the stuff I saw was confusing, but I got a general idea of what needed to be done. I made a quick 4 line JQuery code to set the data-offset-top value to the outerHeight of the div containing the header. It worked and I was content with what I'd done. The navbar would stick to the bottom of the header and switch over even when the screen size was scaled up or down. Then I started to add content... now it's setting the data-offset-top to 23, and being new to JQuery, I can't figure out why it's doing this.
Code:
$(document).ready(function(){
var affixHeight = $(".header").outerHeight(true);
$("#affixNav").attr("data-offset-top", affixHeight);
});
/*Primary Background*/
body{
background-image: url("AtABackgroundImage.jpg");
background-position: center;
background-repeat: repeat-y;
background-attachment: fixed;
background-size: 100% 100%;
}
.horizon{
margin-top: 5px;
margin-bottom: 15px;
border-top: 2px outset #8c8c8c;
margin-right: 50px;
}
/*div{
border: 5px solid red;
}*/
/*Navbar/Header*/
.navElement{
width: 100px;
text-align: center;
height: auto;
padding-left: 5px;
padding-right: 5px;
padding-top: 1px;
padding-bottom: 1px;
margin-right: 10px;
}
.navbar-inverse{
background-image: url("AtABackgroundImage.jpg");
background-size: 100% 100%;
border-width: 0;
}
.hovering:hover{
background-color: #1f1f14;
border-radius: 15px;
padding: 0px;
}
.button-images{
text-align: center;
height: auto;
width: 100%;
}
.header{
position: relative;
width: 100%;
height: 30%;
overflow: none;
margin-left: 0;
margin-right: 0;
padding: 0;
border-bottom: 3px ridge #333333;
}
.headerimg{
margin-top: -125px;
width: 100%;
overflow: none;
}
.affix {
top: 0;
width: 100%;
}
/*Index Content*/
.row{
margin-left: 0;
margin-right: 0;
}
.content-area{
}
.logoArea{
text-align: center;
padding-left: 0px;
}
.logoImg{
width: 100%;
height: auto;
}
.indexTextImg{
text-align: left;
height: 55px;
width: 225px;
}
.index-text{
padding-left: 20px;
color: #e6e6e6;
font-size: 13pt;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="atamain.css">
<link rel="icon"
type="image/ico"
href="favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="jquery-1.12.3.min.js"></script>
<script src="atamain.js"></script>
<title>Ashes to Ashes</title>
</head>
<body>
<div class="header container-fluid">
<img class="headerimg" src="header\AtAWallpaper.jpg">
</div>
<nav class="navbar-inverse navbar" data-spy="affix" id="affixNav">
<div class="container-fluid nav-containment">
<div class="navbar-header active-page">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="hovering navElement"><img class="button-images" src="NavButtonAssets\HOME2.png"></li>
<li class="hovering navElement"><img class="button-images" src="NavButtonAssets\NEWS2.png"></li>
<li class="dropdown hovering navElement">
<a class="dropdown-toggle" data-toggle="dropdown"><img class="button-images" src="NavButtonAssets\ABOUT2.png"></span></a>
<ul class="dropdown-menu">
<li>The Game</li>
<li>The Server</li>
<li>Factions</li>
</ul>
<li class="hovering navElement"><img class="button-images" src="NavButtonAssets\MEDIA2.png"></li>
<li class="hovering navElement"><img class="button-images" src="NavButtonAssets\APPLY2.png"></li>
</ul>
</div>
</div>
</nav>
<div class="content-area">
<div class=" row">
<div class="col-sm-5 logoArea"><img class="logoImg" src="NavBarLogo\AshesWebNavBarLogo.png" alt="AtA Logo"></div>
<div class="col-sm-7 welcomeTextArea">
<img class="indexTextImg" src="NavButtonAssets\WELCOME.png">
<hr class="horizon">
<p class="index-text">Placeholder text is here to test if the page works... it will eventually be changed to something actually useful and meaningful. For now... it's just here.</p>
</div>
</div>
</div>
</body>
</html>

Categories

Resources