Menu Toggle function is not working on eccomerce site

Menu Toggle function is not working on eccomerce site - javascript

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()">

Related

jquery search bar expand on overlay menu

I want to create a menu like http://www.barangaroo.com/
I have opened the overlay section when click on the humburger menu icon.It worked as i expected.
But for the search option, It doesn't close when closing the overlay.
Here is the code from jsfiddle
https://jsfiddle.net/g7pe9uw6/11/
jQuery(function($) {
'use strict';
$('#toggle').click(function () {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
$('.icon').on('click',function(e){
e.preventDefault();
$('#toggle').addClass('active');
$('#overlay').addClass('open');
$('.search').addClass('expanded');
});
$('.button__container__icon.active').click(function () {
$('.search').removeClass('expanded');
});
}); // JQuery end
header {
height: 400px;
background: rgba(0,0,0,.5);
}
header .header__menu__list li {
display: inline-block;
}
header .header__menu__list li .header__menu__list__search {
display: block;
padding: 0 25px;
}
header .header__menu__list li .header__menu__list__search i {
font-size: 40px;
}
header .header__menu__list .brand img {
margin-top: -30px;
}
.button__container {
position: fixed;
top: 70px;
left: 70px;
float: left;
width: 100%;
height: 27px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
}
.button__container:hover {
opacity: 1;
}
.button__container__icon {
width: 35px;
height: 27px;
float: left;
position: relative;
}
.button__container__icon.active .top {
transform: translateY(11px) translateX(0) rotate(45deg);
background: #fff;
}
.button__container__icon.active .middle {
opacity: 0;
background: #fff;
}
.button__container__icon.active .bottom {
transform: translateY(-11px) translateX(0) rotate(-45deg);
background: #fff;
}
.button__container span {
background: #fff;
border: none;
height: 2px;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
.button__container span:nth-of-type(2) {
top: 10px;
}
.button__container span:nth-of-type(3) {
top: 20px;
}
.overlay {
position: fixed;
background: #000;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
opacity: 0;
visibility: hidden;
transition: opacity .35s,visibility .35s;
overflow: hidden;
}
.overlay.open {
opacity: 1;
visibility: visible;
overflow: auto;
}
.overlay.open li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
animation-delay: .50s;
}
.overlay .overlay-menu {
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-size: 50px;
font-weight: 400;
text-align: center;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #FFF;
text-decoration: none;
overflow: hidden;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
width: 100%;
}
.overlay ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: #FFF;
transition: .35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.box {
position: relative;
width: 220px;
}
.search {
width: 200px;
max-width: 0;
padding: 5px;
transition: all .5s ease;
position: absolute;
right: 20px;
box-sizing: border-box;
opacity: 0;
}
.search.expanded {
max-width: 200px;
opacity: 1;
}
.icon {
width: 20px;
height: 20px;
background: red;
position: absolute;
right: 0;
}
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="src/css/app.css">
<title>Hello, world!</title>
</head>
<body>
<div id="app">
<header>
<div class="header__menu">
<div class="container">
<div class="header__menu_icon">
<div class="button__container">
<div class="button__container__icon" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<ul class="header__menu__list">
<li>
<!-- <form action="#">
<a href="#" class="header__menu__list__search" id="search-toggle">
<i class="fa fa-search"></i>
</a>
<input type="text">
</form> -->
<div class="box">
<input class="search" type="search" placeholder="Search" />
<div class="icon">s</div>
</div>
</li>
<li>
<a href="#" class="brand">
<img src="http://via.placeholder.com/176x40" alt="" class="img-fluid">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- header__menu -->
</header>
<div class="overlay" id="overlay">
<div class="overlay-menu">
<div class="container">
<div class="row">
<div class="col-md-4">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="col-md-4">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="col-md-4">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
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>
<script src="src/js/app.js"></script>
</body>
</html>
Can you please help me to fix the function?
Thanks

Check below js fiddle with your issue resolved if that's what you were looking for
https://jsfiddle.net/g7pe9uw6/27/
You just needed to remove "expanded: class from search box to close it.
$('#toggle').click(function () {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
$('.search').removeClass('expanded');
});

Not the nicest solution, but it is working :D
Edited
jQuery(function($) {
'use strict';
$('#toggle').click(function () {
var dat = $(this).data('from');
$(this).toggleClass('active');
if (typeof dat === 'undefined') {
$('#overlay').toggleClass('open');
} else {
$('.search').toggleClass('expanded');
}
$(this).removeData('from');
});
$('.icon').on('click',function(e){
e.preventDefault();
var toggleOpened = $('#toggle').hasClass('active');
var dat = $('#toggle').data('from');
if (!toggleOpened) {
$('#toggle').toggleClass('active');
}
if (typeof dat === 'undefined') {
$('#toggle').data('from', 'search');
} else {
$('#toggle').removeData('from');
}
$('#overlay').removeClass('open');
$('.search').toggleClass('expanded');
});
$('.button__container__icon.active').click(function () {
$('.search').removeClass('expanded');
});
}); // JQuery end

Carousel's image is bigger I expected

Carousel's image is bigger I expected.
My Code
* {
margin: 0;
padding: 0;
}
.menu {
background-color: gray;
width: 500px;
height: 100%;
float: left;
}
.title {
color: white;
font-size: 30px;
margin: 0px 5px;
margin-left: 40px;
text-align: center;
}
.first {
padding-top: 30px;
}
html,
body,
.menu {
height: 100%;
}
body {
margin: 0;
}
.relative {
position: relative;
}
li {
list-style: none;
}
li a {
display: block;
text-decoration: none;
color: white;
text-align: center;
font-size: 20px;
}
li a img {
width: 100%;
height: 100%;
}
.float-right {
width: calc(100% - 500px);
overflow: hidden;
float: right;
}
<link rel="stylesheet" href="home.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="menu" id="menu">
<h2 class="title first">SITE</h2>
<ul class="">
<li><a class="home" href="">Home</a></li>
<li><a class="profile" href="">Detail</a></li>
</ul>
</div>
<div class="imgArea float-right" id="carousel">
<ul>
<li><img src="photo1.jpg" alt=""></li>
<li><img src="photo2.jpg" alt=""></li>
</ul>
</div>
<script src="carousel.js"></script>
when I run this web site,carousel's image is bigger than the original image like yellow arrow in picture.(It does not show image...)
I wanna put carousel in browser remaining of area of and carousel's image's size is adjusted 100% in the area.
So I really cannot understand why carousel's image is zoomed.When I wrote in html like <a href="#"><img src="photo1.jpg" width="100px" height="100px" alt=""> same situation happens.

In the css you have provided:
li a img{
width: 100%;
height: 100%;}
you need to change it too
li a img{
width: 100px;
height: 100px;}
Also as you are already using bootstrap u may want to look into bootstrap's carousel https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
ul {
list-style: none;
margin: 0;
padding: 0;
}
.main-container {
width: 100%;
float: left;
}
.header {
float: left;
width: 100%;
}
.sidebar {
float: left;
width: 20%;
height: 100%;
}
.imgArea {
float: left;
width: 75%;
height: 100%;
}
<body>
<div class="main-container">
<div class="header">SITE</div>
<div class="sidebar" id="menu">
<ul class="sidebar-ul">
<li><a class="home" href="">Home</a>
</li>
<li><a class="profile" href="">Detail</a>
</li>
</ul>
</div>
<div class="imgArea" id="carousel">
<ul class="carousel-ul">
<li>
<img src="http://lorempixel.com/400/200" alt="" />
</li>
<li>
<img src="http://lorempixel.com/400/200" alt="" />
</li>
</ul>
</div>
</div>
<script src="carousel.js"></script>
</body>
Right now i dont have your carousel.js so i hope this will work.

Overlay when click on menu (and remove border)

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;
}

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;

Arrows on Slick Carousel not appearing

I did a test of the slick carousel on it's own in an empty html page before integrating it into the rest of my code. It worked perfectly and the arrows were there. I copy and pasted my test code into a page with code that already existed. The carousel still worked as intended, but the arrows to toggle the images have now disappeared. I'm not sure what happened or how to fix it.
This is my code:
$(document).ready(function() {
$('.slider').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed: 5000,
});
});
#header {
height: 40px;
position: relative;
margin: 80px auto 0;
}
#header ul {
margin: 0 auto;
width: 800px;
padding: 0;
list-style: none;
}
#header ul li {
float: left;
width: 97px;
}
#header ul li:nth-of-type(4) {
margin-left: 217px;
}
#header ul li a {
text-transform: lowercase;
text-decoration: none;
display: block;
text-align: center;
padding: 12px 0 0 0;
height: 28px;
color: #000;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
#header ul li a:hover {
color: #c4c4c4;
}
.logo {
position: absolute;
left: 50%;
margin: -60px 0 0 -124px;
}
#media screen and (max-width: 800px) {
.logo {
bottom: 100%;
}
#header ul li:nth-of-type(4) {
margin-left: 0;
}
#header ul {
width: 600px;
position: relative;
}
}
ul.sub-menu {
display: none;
position: absolute;
top: 30;
left: 0;
width: auto!important;
overflow: hidden;
padding: 0 1em;
z-index: 2;
background: white;
}
.sub-menu li {
display: block;
float: none!important;
}
.more {
position: relative;
}
.more:hover .sub-menu {
display: inline-block;
}
#filler {
height: 100px;
}
.slider {
width: 750px;
margin: 20px auto;
background: white;
text-align: center;
}
.slider div img {
height: 500px;
margin: auto;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Whatever Photography</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="Content/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="slick/slick.css" />
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="header">
<a class="logo">
<img src="imgs/logo.jpg" alt="Whatever Photography" height="140" width="230" />
</a>
<ul>
<li>About
</li>
<li class="more">
Galleries <span class="caret"></span>
<ul class="sub-menu">
<li>Portraits
</li>
<li>Landscapes
</li>
<li>Personal
</li>
</ul>
</li>
<li>Blog
</li>
<li>Info/Rates
</li>
<li>Prints
</li>
<li>Contact
</li>
</ul>
</div>
<div class="container">
<div class="col-md-12" id="filler">
</div>
<div class="col-md-12">
<div class="slider">
<div>
<img src="imgs/slider01.jpg" />
</div>
<div>
<img src="imgs/slider02.jpg" />
</div>
<div>
<img src="imgs/slider03.jpg" />
</div>
<div>
<img src="imgs/slider04.jpg" />
</div>
<div>
<img src="imgs/slider05.jpg" />
</div>
<div>
<img src="imgs/slider06.jpg" />
</div>
<div>
<img src="imgs/slider07.jpg" />
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>

I figured it out. I had the carousel set to a white background and the arrows/dots are colored white by default hence the "disappearance," so I just have to go in and restyle the colors....

You 2 time Add jquery-1.11.0.min.js
one more thing first load jquery library file
Demo link https://jsfiddle.net/a9g1bum6/1/

Develop Reference

JavaScript is the programming language of the Web.

Menu Toggle function is not working on eccomerce site - javascript

Related

jquery search bar expand on overlay menu

Carousel's image is bigger I expected

Overlay when click on menu (and remove border)

arrange side bar, navigation bar and footer

Arrows on Slick Carousel not appearing

Categories

Resources