I have 2 divs nested in the body (a) and (b). Div (b) has a negative top margin so it sits on top of div (a).
Everything's fine except the content's of div (b) are stuck a the bottom, below div (a) as it would appear the css properties of their parent have not affected them.
Here's the html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Website</title>
<script src="js/jquery-1.9.1.min.js"></script>
<link href="css/carousel.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top-menu">
<div class="container">
<div class="logo"><img src="img/logo.png" alt="logo"></div>
<ul class="nav">
<li>who we are</li>
<li>what we do</li>
</ul>
<input type="text" placeholder="login/register" class="header-login">
<button type="submit" class="header-btn"></button>
<span class="za"><img src="img/south-africa.png"></span>
<span class="sng"><img src="img/singapore.png"></span>
</div>
</div>
<div class="carousel-main">
<div id="myCarousel" class="carousel slide">
<div class="container">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
</div>
<div class="carousel-inner home-carousel">
<div class="item active">
<img src="img/1.jpg">
<div class="container">
<div class="carousel-caption">
<h3>Risk Management and<br>
Business Finance made simple. </h3>
</div>
</div>
</div>
<div class="item">
<img src="img/2.jpg">
<div class="container">
<div class="carousel-caption">
<h3>Manage my company.</h3>
</div>
</div>
</div>
<div class="item">
<img src="img/3.jpg">
<div class="container">
<div class="carousel-caption">
<h3>Investing my money.</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sub-menu">
<ul>
<li>finance</li>
<li>Manage</li>
<li>invest</li>
</ul>
</div>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 9000
});
$('#myCarousel').carousel('pause');
});
</script>
</body>
</html>
Here's the style.css
#charset "utf-8";
/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
#import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900);
html, body
{
width:100%;
height:100%;
font-family: 'Source Sans Pro', sans-serif !importantsa;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.top-menu
{
height:70px;
width:100%;
}
.logo
{
height:100%;
width:277px;
float:left;
}
.logo img
{
height:100%;
}
.container
{
width:960px;
margin:0 auto;
position:relative;
}
.top-menu .nav
{
float:left;
}
.top-menu ul li
{
display:inline-block;
padding:30px 10px;
text-transform:uppercase;
font-family: 'Source Sans Pro', sans-serif;
color:#808184;
}
.header-login
{
font-family: 'Source Sans Pro', sans-serif;
margin:25px;
padding-left:10px;
font-size:17px;
text-transform:uppercase;
background-color:#ededed;
border:none;
max-width:140px;
float:left;
}
.header-btn
{
height:30px;
width:30px;
background-image:url(../img/login.png);
background-color:transparent;
border:none;
margin-top:22px;
margin-left:-20px;
margin-right:30px;
float:left;
}
.top-menu span
{
margin-top:27px;
float:left;
margin-left:10px;
}
.sub-menu
{
width:100%;
height:170px;
margin-top:-280px;
background-color:rgba(247,148,30,0.6);
z-index:2;
}
.sub-menu ul
{
margin:0 auto;
width:600px;
height:100%;
}
.sub-menu ul li
{
display:inline-block;
height:200px;
width:190px;
text-transform:uppercase;
color:#fff;
}
Here's the carousel.css:
#charset "UTF-8";
/* CSS Document */
.carousel {
margin-bottom: 20px;
line-height: 1;
float:left;
z-index:-1;
}
.carousel-inner {
position: relative;
width: 100%;
height:700px;
overflow: hidden;
z-index:-1;
}
.carousel-inner > .item {
position: relative;
display: none;
overflow: hidden;
-webkit-transition: 0.6s ease-in-out left;
-moz-transition: 0.6s ease-in-out left;
-o-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
height:100%;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
line-height: 1;
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
display: block;
}
.carousel-inner > .active {
left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel-inner > .next {
left: 100%;
}
.carousel-inner > .prev {
left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
left: 0;
}
.carousel-inner > .active.left {
left: -100%;
}
.carousel-inner > .active.right {
left: 100%;
}
.carousel-indicators {
position: absolute;
top:600px;
right:0;
z-index: 5;
margin: 0 auto;
list-style: none;
}
.carousel-indicators li {
display: block;
float: left;
width: 20px;
height: 20px;
margin-left: 5px;
text-indent: -999px;
background-image:url(../img/indicator.png);
background-repeat:no-repeat;
opacity:0.6;
}
.carousel-indicators .active {
opacity:1;
}
.slider
{
height:700px;
width:800px;
margin: 0 auto;
margin-bottom:20px;
}
.slider img
{
width:100%;
}
.carousel-main
{
height:700px;
background-color: transparent;
margin: 0 auto;
width:100%;
}
.home-carousel > .item > img, .home-carousel > .item > a > img {
display: block;
line-height: 1;
min-height:100%;
width:100%;
max-height:100%;
}
.inner-carousel > .item > img, .inner-carousel > .item > a > img {
display: block;
line-height: 1;
height:350px;
width:800px;
}
.carousel-caption {
position: absolute;
top: -400px;
font-family: 'Source Sans Pro', sans-serif;
}
.carousel-caption h3 {
font-weight:900;
font-size:45px;
line-height:44px;
letter-spacing:-1px;
color:#fff;
text-shadow: rgba(0,0,0, 0.5) 1px 1px 2px;
}
.carousel-caption p {
font-weight:100;
font-size:18px;
line-height:38px;
margin-top:-30px;
}
.carousel-main #myCarousel
{
width:100%;
height:700px;
margin: 0 auto;
margin-bottom:-200px;
}
.carousel-control {
position: absolute;
top: 400px;
left: 0px;
width: 60px;
height: 60px;
margin-top: -20px;
font-size: 60px;
font-weight: 100;
line-height: 30px;
color: #ffffff;
text-align: center;
background-image:url(../img/leftarrow.png);
background-size:cover;
background-color:transparent;
border: 0px solid rgb(255, 255, 255);
border-radius: 100px;
opacity: 1;
filter: alpha(opacity=50);
transition: all 2s ease-in-out;
-webkit-transition: all .6s ease-in-out; /** Chrome & Safari **/
-moz-transition: all .6s ease-in-out; /** Firefox **/
-o-transition: all .6s ease-in-out;
}
.carousel-control.right {
right:0;
left: auto;
background-image:url(../img/rightarrow.png);
}
.carousel-control:hover {
color: rgb(255, 255, 255);
opacity:.6;
text-decoration: none;
}
.carousel-control:focus {
background-color:none;
text-decoration: none;
opacity: 0.9;
}
.home-carousel .carousel-caption h4 {
font-weight:500;
font-size:29px;
color:#F7F4ED;
line-height:35px;
margin: 20px 0 20px;
text-align:center;
}
.home-carousel .carousel-caption .introduction {
font-weight:300;
font-size:13px;
line-height:19px;
text-align:center;
margin:0 auto;
color:#F7F4ED;
height:200px;
width:250px;
}
#media (max-width: 1030px) {
.carousel-control {
position: absolute;
bottom:0;
left: 0px;
margin-top:225px;
width: 60px;
height: 60px;
font-size: 60px;
font-weight: 100;
line-height: 30px;
color: #ffffff;
text-align: center;
background-image:url(../img/leftarrow.png);
background-size:cover;
background-color:#474C71;
border: 0px solid rgb(255, 255, 255);
border-radius: 0px;
opacity: 1;
filter: alpha(opacity=50);
transition: all 2s ease-in-out;
-webkit-transition: all .6s ease-in-out; /** Chrome & Safari **/
-moz-transition: all .6s ease-in-out; /** Firefox **/
-o-transition: all .6s ease-in-out;
}
.carousel-control.right {
left: 61px;
background-image:url(../img/rightarrow.png);
}
}
Here's a working version of the same:
http://deeptest.co.za/apexpeak/
Please help and thank you
Your content is at the bottom because element with class name 'carousel' (this element with id='myCarousel') has set to:
float: left;
it is in carousel.css on line 3.
Margins (and thus, negative margins) are handled differently for floated and inline elements than they are for non-floated block-level elements.
If you want to use this method to position the sub-menu you will need to add
float: left;
to the sub-menu div and its siblings
so:
.carousel-main, top-menu, #myCarousel{
float: left;
}
or similar in the correct place in your existing CSS.
.sub-menu {
width: 100%;
height: 200px;
/*margin-top: -280px; - REMOVE THIS */
background-color: rgba(247, 148, 30, 0.4);
z-index: 2;
/* ADD THE FOLLOWING */
position: relative;
top: -280px;
}
Related
I am having a problem with a responsive menu. While I'm in my offline server, the responsive menu works fine in mobile format, but when It's in the real server, it does not work. I've been struggling with this for hours. Here is my code:
HTML
<div class="menu">
<div class="menu_bar">
<img id="logo-mobile" src="design/logo-titol-prova-1.PNG">
<span class="icon-menu"></span>
</div>
<nav>
<img id="logo" src="design/logo-titol-prova-1.PNG">
<ul>
<li class="first">About</li>
<li>Surf/Kitesurf</li>
<li>The Tour</li>
<li>Lodging</li>
<li>Testimonials</li>
<li>Reserve Now</li>
</ul>
</nav>
</div>
CSS
/*Menu*/
.menu{
width: 100%;
position:fixed;
top:0;
margin:0 auto;
padding: 0;
box-sizing: border-box;
font-size: 15px;
text-align: center;
background-color: transparent;
-webkit-transition: background-color .5s;
z-index:1000;
}
.menu nav {
display: table;
max-width:1200px;
max-width:100%;
margin:0 auto;
padding: 20px;
box-sizing: border-box;
text-align: center;
z-index:1000;
-webkit-transition: margin-left .5s;
}
.menu_bar {
display:none;
}
.menu nav ul {
width:100%;
overflow:hidden;
margin: 0;
padding: 0;
display: inline;
list-style:none;
text-align: center;
}
.menu nav ul li {
display: inline;
width:100%;
margin: 0;
padding: 0;
padding-left: 30px;
text-align: center;
background: url(design/list.png) left no-repeat;
}
.menu nav ul li.first {
background:none;
}
.menu nav ul li a {
display: inline-block;
margin:15px 15px 0 15px;
padding:15px 0;
color:#303030;
font-family: 'Dosis';
font-style: normal;
font-weight: 400;
text-transform: uppercase;
text-decoration:none;
letter-spacing:1px;
}
.menu nav ul li a:hover {
color:#ffc000;
text-decoration: none;
transition: all .5s linear;
-o-transition: all .5s linear;
-moz-transition: all .5s linear;
-webkit-transition: all .5s linear;
}
.menu nav ul li a:active {
color:#71e1b0;
}
section {
padding:20px;
}
img#logo{
float:left;
display: block;
margin:0;
padding:0;
-webkit-transition: width .5s;
}
#media screen and (max-width:1100px){
img#logo{
max-width:300px;
margin-left: 10px;
}
.menu{
width: 100%;
padding-top:10px;
padding:0;
font-size:15px;
float:right;
}
.menu nav ul li a {
margin:10px 15px 0 15px;
}
.menu nav {
width:100%;
max-width:100%;
margin:0 auto;
text-align: center;
z-index:1000;
}
#media screen and (max-width:800px){
img#logo{
display:none;
}
.menu nav {
max-width:250px;
height:100%;
right:-100%;
margin:0;
position: fixed;
background: #fff;
}
.menu nav ul li {
display:block;
float:none;
padding:0;
background:none;
}
.menu nav ul li a {
display:block;
padding:20px 20px 20px 0;
margin:0;
color:#303030;
font-family: 'Dosis', sans-serif;
font-size: 15px;
font-weight:400;
text-align: right;
text-transform: uppercase;
background: none;
border-right:4px solid #71e1b0;
}
.menu nav ul li a:hover {
color:#71e1b0;
text-decoration: none;
border-bottom:none;
}
.menu_bar {
display:block;
max-width:100%;
padding:15px;
background:#fff;
}
.menu_bar .bt-menu {
display:block;
padding:20px;
color:#33e873;
text-decoration:none;
text-align:right;
font-weight:bold;
font-size:27px;
}
img#logo-mobile{
float:left;
max-width:200px;
margin: 7px 0 0 10px;
padding:0;
}
menu.js
$(document).ready(main);
var contador = 1;
function main(){
$('.bt-menu').click(function(){
// $('nav').toggle();
if(contador == 1){
$('nav').animate({
right: '0'
});
contador = 0;
} else {
contador = 1;
$('nav').animate({
right: '-100%'
});
}
});
}
script-menu.js
$(document).ready(function(){
$("#banner").css({"height":$(window).height() + "px"});
var flag = false;
var scroll;
$(window).scroll(function(){
scroll = $(window).scrollTop();
if(scroll > 100){
if(!flag){
$("#logo").css({"width": "200px"});
$(".menu").css({"top":"0", "margin":"0 auto", "padding":"0", "background-color": "#fff", "box-shadow": "0 1px 1px #71e1b0"});
flag = true;
}
}else{
if(flag){
$("#logo").css({"width": "400px",});
$(".menu").css({"top":"0", "margin":"0 auto", "padding":"0", "background-color":"transparent", "box-shadow": "none"});
flag = false;
}
}
});
});
This is the website: http://marsurftours.com/. I've tried everything and spent many hours trying to find a solution. If you know how to solve this issue, I would appreciate it. Thanks for the help!
I think you forgot to add js/ before menu.js
So instead
<script src="menu.js"></script>
Try
<script src="js/menu.js"></script>
You are trying to link a file in system storage , you need to link a url
example: www.stackoverflow.com/navigation.js
I am trying to create a website, but i'm having a strange problem wiht my submenu in nav bar as you can see in this picture:
submenu problem
What I want is that my submenus elements have the same size, so I mean the same height.
This is my HTML part:
<header>
<div class="menu_bar">
<span class="icon-menu"></span>Menu
</div>
<div class="logo">
<img src="logo.png">
</div>
<div class="box">
<form>
<input type="text" name="" placeholder="Type...">
<input type="submit" name="" value="Search">
</form>
</div>
<nav>
<ul>
<li><span class="icon-home"></span>Acceuil</li>
<li><span class="icon-briefcase"></span>Cities</li>
<li class="tete">
<span class="icon-rocket"></span>Activites<span class="flash icon-circle-down"
<ul class="sousmenu">
<li>Venice</li>
<li>Rome</li>
<li>Pisa</li>
</ul>
</li>
<li><span class="icon-earth"></span>Services</li>
<li><span class="icon-envelop"></span>Contacter</li>
</ul>
</nav>
</header>
And this is CSS:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;}
body {
line-height: 1;
overflow-x:hidden;}
ol, ul {
list-style: none;}
blockquote, q {
quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;}
table {
border-collapse: collapse;
border-spacing: 0;}
.menu_bar {
display:none;}
header {
width: 100%;}
header nav {
background:rgba(255, 0, 0, 0.2);
z-index:1000;
max-width: 1400px;
width:100%;
margin-top: 0px; }
header nav ul {
list-style:none;
margin-left: 220px;}
.logo{
float: left;
padding-top:8px;
padding-left: 20px;
cursor: pointer;}
.box{
position: absolute;
top: 4.5%;
left: 95%;
width: 700px;
transform: translate(-50%, -50%); }
input{
position:relative;
display: inline-block;
font-size: 20px;
box-sizing: border-box;
transition: 0.5s}
input[type="text"]
{
background: #fff;
opacity:0.2;
width: 270px;
height: 30px;
border: none;
outline: none;
padding: 0 25px;
border-radius: 25px 0 0 25px; }
input[type="submit"]
{
position: relative;
border-radius: 0px 25px 25px 0;
width: 120px;
height: 30px;
border: none;
outline: none;
cursor: pointer;
background: #ffc107;
opacity: 0.8;
}
input[type="submit"]:hover
{
background: #ff5722;}
header nav ul li {
display:inline-block;
position: relative;}
header nav ul li:hover {
background:red;}
header nav ul li a {
color:#fff;
display:block;
text-decoration:none;
padding: 20px;}
header nav ul li a span {
margin-right:10px;}
header nav ul li:hover .sousmenu {
display:block;}
header nav ul li .sousmenu {
display: none;
background:rgba(255, 0, 0, 0.2);
margin-left: 0px;
margin-top: 0px;
position: absolute;
width: 150%;
z-index:1000;}
header nav ul li .sousmenu li {
padding: 0px;
display:block;
overflow: hidden;
border-bottom: 1px solid rgba(255,255,255,.5); }
header nav ul li .sousmenu li a {
padding: 10px;
display: block;}
/*header nav ul li .sousmenu li a span {
float: right;
position: relative;
top:3px;
margin-right:0;
margin-left:10px;
}*/
header nav ul li .flash {
position: relative;
top:1px;
margin-left:10px;
margin-right:0px;}
#media screen and (max-width: 800px) {
body {
padding-top:80px;
}
.menu_bar {
display:block;
width:100%;
position: fixed;
top:0;
background:#E6344A;
}
.menu_bar .bt-menu {
display: block;
padding: 20px;
color: #fff;
overflow: hidden;
font-size: 25px;
font-weight: bold;
text-decoration: none;
}
.menu_bar span {
float: right;
font-size: 40px;
}
header nav {
width: 80%;
height: calc(100% - 80px);
position: fixed;
right:100%;
margin: 0;
overflow: scroll;
}
header nav ul{
margin-left: 0px;
}
header nav ul li {
display: block;
border-bottom:1px solid rgba(255,255,255,.5);
}
header nav ul li a {
display: block;
}
sheader nav ul li:hover .sousmenu {
display: none;
}
header nav ul li .sousmenu {
width: 100%;
padding-top: 0px;
position: relative;
}
header nav ul li .sousmenu li a {
margin-left:20px;
}
header nav ul li .flash {
float: right;
}
.logo
{
display: none;
}
.box input
{
display: none;
}
}
This is JS part:
$(document).ready(main);
var contador = 1;
function main(){
$('.menu_bar').click(function(){
// $('nav').toggle();
if(contador == 1){
$('nav').animate({
left: '0'
});
contador = 0;
} else {
contador = 1;
$('nav').animate({
left: '-100%'
});
}
});
// Mostramos y ocultamos submenus
$('.tete').click(function(){
$(this).children('.sousmenu').slideToggle();
});
}
I'm not see your all code but you can try something like this to play with your li or ul
header nav ul {
position: absolute;
top: 10%;
}
Or
header nav ul li {
position: absolute;
top: 10%;
}
You just forget to close a ">" the correct code:
<header>
<div class="menu_bar">
<span class="icon-menu"></span>Menu
</div>
<div class="logo">
<img src="logo.png">
</div>
<div class="box">
<form>
<input type="text" name="" placeholder="Type...">
<input type="submit" name="" value="Search">
</form>
</div>
<nav>
<ul>
<li><span class="icon-home"></span>Acceuil</li>
<li><span class="icon-briefcase"></span>Cities</li>
<li class="tete">
<span class="icon-rocket"></span>Activites<span class="flash icon-circle-down"></span>
<ul class="sousmenu">
<li>Venice</li>
<li>Rome</li>
<li>Pisa</li>
</ul>
</li>
<li><span class="icon-earth"></span>Services</li>
<li><span class="icon-envelop"></span>Contacter</li>
</ul>
</nav>
</header>
I have been working on a smooth scroll navigation bar for a website. I have managed to get the navigation bar to scroll to the different sections within the HTML document, and I been trying to get the navigation bar links to become active depending on the section of the webpage you are on.
After playing around with the code I cannot figure out how to do this. What do I need to do?
This is my code:
$('#navbar li').click(function() {
$(this).addClass('active').siblings('li').removeClass('active');
});
#import url(https://fonts.googleapis.com/css?family=Maven+Pro:400,900,700,500);
html{
font-family: 'Maven Pro', sans-serif;
}
body{
background:fixed
url(images/bright_squares.png) #cccccc;
position:relative;
padding:0;
margin:0;
}
#home {padding-top:50px;height:500px;color: #fff; background-image:url(images/random_grey_variations.png);}
#about {padding-top:50px;height:500px;color: #fff;}
#portfolio {padding-top:50px;height:500px;color: #fff;}
#contact {padding-top:50px;height:500px;color: #fff;}
background-dark{
background:fixed
url(images/random_grey_variations.png);
}
#navbar {
position:fixed;
top: 0px;
left: 0px;
right: 0px;
height: 60px;
margin: 0;
padding: 0;
list-style: none;
background: #222;
font-family: 'Maven Pro', sans-serif;
font-size: 18px;
font-weight: 300;
}
#navbar li {
position: relative;
float: left;
line-height: 60px;
background: inherit;
text-align: center;
transition: all .2s;
}
#navbar li a {
position: relative;
display: block;
padding: 0 20px;
line-height: inherit;
color: white;
text-decoration: none;
}
#navbar li:before {
content: '';
display: block;
position: absolute;
left: 50%;
margin-left: -30px;
width: 60px;
height: 60px;
background: #222;
border-radius: 50%;
transform: rotate(45deg);
transition: all 0, background .2s;
}
#navbar li:hover:before {
margin-top: 1px;
border-radius: 50% 50% 0 50%;
transition: all .1s, background .2s, margin-top .2s cubic-bezier(.5,30,.2,0);
}
#navbar li:hover,
#navbar li:hover:before {
background: #3a3a3a;
}
#navbar li.active,
#navbar li.active:before {
background: steelblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="navbar">
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div id="home">
<h1>Welcome</h1>
<p>Test</p>
</div>
<div id="portfolio">
<h1>portfolio</h1>
<p>Test</p>
</div>
<div id="contact">
<h1>contact</h1>
<p>Test</p>
</div>
<div id="about">
<h1>About Me</h1>
<p>Test</p>
</div>
I think this might answer your question. Just add this code inside the click function you already have.
$($(this).children().attr('href')).addClass('selected').siblings('div').removeClass('selected');
You will need to change the home link to #home instead of # though
If you want to forgo all of that, here's the even quicker version.
<script>
$('#navbar li').click(function() {
$(this).addClass('active').siblings('li').removeClass('active');
var x = $($(this).children().attr('href')).first().offset().top
$('body').animate({
scrollTop: x
}, 2000);
});
</script>
This will add the scrolling animation I think you're looking for.
I have tried a lot and have reached till here. what wrong is going on i don't understand. where i am missing. please see to it. I want the button request a proposal to change its position form horizontal to vertical when we scroll down.I want that css class .vertical-pos and .head__get-in-touch-wrap to change by function. Thanks in advance
$(function() {
var span = $(".head__get-in-touch-wrap");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
span.removeClass('head__get-in-touch-wrap').addClass("vertical-pos");
} else {
span.removeClass("vertical-pos").addClass('head__get-in-touch-wrapr');
}
});
});
html, body {
height: 100%;
-webkit-font-smoothing: subpixel-antialiased;
}
body {
background: white;
display: block;
margin: 0px;
}
.main-menu {
float: right;
padding-top: 2%;
padding-right: 5%;
padding-left: 0;
margin: -90px 235px 0 0 !important;
list-style: none;
transition: opacity .6s 2.5s;
font-weight: 700;
}
.navbar--inverted .main-menu__item {
color: #000;
}
.main-menu__item {
display: inline-block;
margin: 0 10px;
font: 400 15px/20px 'Oswald',sans-serif;
letter-spacing: .5px;
word-spacing: 1px;
text-transform: uppercase;
color: #fff;
transition: opacity .3s ease-in-out;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.main-menu__item--request {
border:1px solid black;
cursor:pointer;
display:inline-block;
margin-right:0;
padding:15px 30px;
}
.main-menu__item > a {
color:black;
text-decoration:none;
font-weight: 700;
}
a {
background-color:transparent;
text-decoration:none;
}
a:active, a:hover {
outline:0;
color:#C1C1C1;
}
.menu-toggle {
position: absolute;
right: 4%;
display: none;
width: 44px;
height: 56px;
background: 0 0;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
-webkit-user-select: none;
border: 0 none;
padding: 4% 0 20px 20px;
z-index: 1;
align-items: flex-start;
}
.menu-toggle:hover{
color:#C1C1C1;
}
.logo{
margin:20px;
}
.main-block__line {
background:#171717;
display:none;
height:5px;
left:5%;
margin-left:15px;
position:absolute;
top:550px;
width:20px;
z-index:10;
}
.head__menu-btn__wrap {
display:block;
margin:-25px -40px 0 0;
position:fixed;
right:5%;
top:47px;
width:226px;
z-index:999;
}.head__menu-btn {
-webkit-transition:all 0.1s ease;
background-image:url(../pixster/menu-btn.png);
background-position:0 0;
background-repeat:no-repeat;
background-size:45px 45px;
cursor:pointer;
display:block;
height:45px;
position:absolute;
right:0;
top:0;
transition:all 0.1s ease;
width:45px;
z-index:999;
}
.head__get-in-touch-wrap {
-webkit-transform-origin:203px 23px 0 !important;
-webkit-transition-duration:0.5s!important ;
-webkit-transition-timing-function:cubic-bezier(0.39, -0.16, 0.4, 1.21)!important ;
display:block;
height:45px;
left:0;
position:absolute !important;
top:0;
transform-origin:203px 23px 0;
transition-duration:0.5s;
transition-timing-function:cubic-bezier(0.39, -0.16, 0.4, 1.21);
width:146px;
}
.vertical-pos{
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.head__get-in-touch {
-webkit-transition:all 0.1s ease;
background-color:#0072F6;
border:none;
color:#FFFFFF;
display:block;
font-size:12px;
font-weight:600;
letter-spacing:2.5px;
margin-top:0;
padding:15px 0;
text-align:center;
text-transform:uppercase;
transition:all 0.1s ease;
width:146px;
}
<header class="logo">
<img src="../pixster/logo.png" alt="Pixster Studio" />
</header>
<span class="main-block__line">
</span>
<div class="head__menu-btn__wrap">
<span class="head__menu-btn open-main-menu-button">
</span>
<span class="head__get-in-touch-wrap">
Request a proposal
</span>
</div>
<ul class="main-menu in-view">
<li class="main-menu__item">About</li>
<li class="main-menu__item">Services</li>
<li class="main-menu__item">Work</li>
<li class="main-menu__item">Blog</li>
<li class="main-menu__item">Contact</li>
</ul>
<button data-menu-button="" type="button" class="menu-toggle">
<span class="menu-toggle__lines"></span>
</button>
See the fiddle : http://jsfiddle.net/sachinkk/p3x9k67d/
Change the css to:
.head__get-in-touch-wrap {
display: inline-block;
-webkit-transform-origin:203px 23px 0 !important;
-webkit-transition-duration:0.5s!important ;
-webkit-transition-timing-function:cubic-bezier(0.39, -0.16, 0.4, 1.21)!important ;
display:block;
height:45px;
left:0;
position:absolute !important;
top:0;
transform-origin:203px 23px 0;
transition-duration:0.5s;
transition-timing-function:cubic-bezier(0.39, -0.16, 0.4, 1.21);
width:146px;
}
JS to :
$(function() {
var span = $(".head__get-in-touch-wrap");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 10) {
span.addClass("vertical-pos");
} else {
span.removeClass("vertical-pos");
}
});
});
snippet code : ignore
$(function() {
var span = $(".head__get-in-touch-wrap");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 10) {
span.addClass("vertical-pos");
} else {
span.removeClass("vertical-pos");
}
});
});
html, body {
height: 100%;
-webkit-font-smoothing: subpixel-antialiased;
}
body {
background: white;
display: block;
margin: 0px;
}
.main-menu {
float: right;
padding-top: 2%;
padding-right: 5%;
padding-left: 0;
margin: -90px 235px 0 0 !important;
list-style: none;
transition: opacity .6s 2.5s;
font-weight: 700;
}
.navbar--inverted .main-menu__item {
color: #000;
}
.main-menu__item {
display: inline-block;
margin: 0 10px;
font: 400 15px/20px 'Oswald',sans-serif;
letter-spacing: .5px;
word-spacing: 1px;
text-transform: uppercase;
color: #fff;
transition: opacity .3s ease-in-out;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.main-menu__item--request {
border:1px solid black;
cursor:pointer;
display:inline-block;
margin-right:0;
padding:15px 30px;
}
.main-menu__item > a {
color:black;
text-decoration:none;
font-weight: 700;
}
a {
background-color:transparent;
text-decoration:none;
}
a:active, a:hover {
outline:0;
color:#C1C1C1;
}
.menu-toggle {
position: absolute;
right: 4%;
display: none;
width: 44px;
height: 56px;
background: 0 0;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
-webkit-user-select: none;
border: 0 none;
padding: 4% 0 20px 20px;
z-index: 1;
align-items: flex-start;
}
.menu-toggle:hover{
color:#C1C1C1;
}
.logo{
margin:20px;
}
.main-block__line {
background:#171717;
display:none;
height:5px;
left:5%;
margin-left:15px;
position:absolute;
top:550px;
width:20px;
z-index:10;
}
.head__menu-btn__wrap {
display:block;
margin:-25px -40px 0 0;
position:fixed;
right:5%;
top:47px;
width:226px;
z-index:999;
}.head__menu-btn {
-webkit-transition:all 0.1s ease;
background-image:url(../pixster/menu-btn.png);
background-position:0 0;
background-repeat:no-repeat;
background-size:45px 45px;
cursor:pointer;
display:block;
height:45px;
position:absolute;
right:0;
top:0;
transition:all 0.1s ease;
width:45px;
z-index:999;
}
.head__get-in-touch-wrap {
display: inline-block;
-webkit-transform-origin:203px 23px 0 !important;
-webkit-transition-duration:0.5s!important ;
-webkit-transition-timing-function:cubic-bezier(0.39, -0.16, 0.4, 1.21)!important ;
display:block;
height:45px;
left:0;
position:absolute !important;
top:0;
transform-origin:203px 23px 0;
transition-duration:0.5s;
transition-timing-function:cubic-bezier(0.39, -0.16, 0.4, 1.21);
width:146px;
}
.vertical-pos{
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.head__get-in-touch {
-webkit-transition:all 0.1s ease;
background-color:#0072F6;
border:none;
color:#FFFFFF;
display:block;
font-size:12px;
font-weight:600;
letter-spacing:2.5px;
margin-top:0;
padding:15px 0;
text-align:center;
text-transform:uppercase;
transition:all 0.1s ease;
width:146px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="logo">
<img src="../pixster/logo.png" alt="Pixster Studio" />
</header>
<span class="main-block__line">
</span>
<div class="head__menu-btn__wrap">
<span class="head__menu-btn open-main-menu-button">
</span>
<span class="head__get-in-touch-wrap">
Request a proposal
</span>
</div>
<ul class="main-menu in-view">
<li class="main-menu__item">About</li>
<li class="main-menu__item">Services</li>
<li class="main-menu__item">Work</li>
<li class="main-menu__item">Blog</li>
<li class="main-menu__item">Contact</li>
</ul>
<button data-menu-button="" type="button" class="menu-toggle">
<span class="menu-toggle__lines"></span>
</button>
try add to the span an id attribute, so you can reach it more clearly,the id stays while you change the class
<span class="head__get-in-touch-wrap" id="foo">
also attach the scroll event to the window with on():
var span = $("#foo");
$(window).on("scroll", function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
span.removeClass('head__get-in-touch-wrap').addClass("vertical-pos");
} else {
span.removeClass("vertical-pos").addClass('head__get-in-touch-wrapr');
}
});
This might have been answered before, my searching hasn't led me to any answers, so I apologize in advance if there's already a thread that might be able to help.
Here's a fiddle
I realize that what the page looks wonky, it looks much better from my own PC. I'm really just having trouble with the navbar not centering on the slideshow when it comes to differing resolutions.
HTML:
</div>
<div id="schedule">
<p> </p>
</div>
<div id="wrap">
<ul class="navbar">
<li>Courses
</li>
<li>Faculty
</li>
<li>Programs and Athletics
</li>
<li>Information ▽
<ul>
<li><a target="_blank" href="https://parentlink.ccsd.net/html/ContentBase/Content/Home/Login">ParentLink</a>
</li>
<li><a target="_blank" href="https://twitter.com/">Twitter</a>
</li>
<li><a target="_blank" href="https://www.facebook.com/">Facebook</a>
</li>
<li>Important Handouts
</ul>
</li>
</ul>
</div>
<br />
<div id="slide_background">
<!-- Start WOWSlider.com BODY section id=wowslider-container4 -->
<div id="wowslider-container4">
<div class="ws_images">
<ul>
<li>
<img src="#" />
</li>
<li>
<img src="#" />
</li>
<li>
<img src="#" />
</li>
<li>
<img src="#" />
</li>
<li>
<img src="#" />
</li>
</ul>
</div>
<div class="ws_bullets">
</div>
</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine4//wowslider.js"></script>
<script type="text/javascript" src="engine4//script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
CSS:
/* CSS Document */
body {
background-image:url(images/images/banner_repeat_01.jpg);
width:auto;
height:auto;
background-repeat:repeat-x;
}
footer {
background-color:#c3c3c3;
background-repeat:repeat-x;
background-position:bottom;
width:100%;
left:0;
right:0;
position:absolute;
}
#banner {
width:auto;
height:auto;
margin-left:auto;
margin-right:auto;
text-align:center;
color:white;
text-shadow: 2px 2px 5px #000;
font-family:"Times New Roman", Times, serif;
}
#schedule {
color:white;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-top:2.9em;
}
#slide_background {
background-color:#c3c3c3;
margin-left:auto;
margin-right:auto;
width:100%;
position:absolute;
left:0;
right:0;
}
#slides {
background-color:#000;
margin-left:auto;
margin-right:auto;
text-align:center;
height:13em;
width:70%;
margin-top:-1em;
color:white;
}
#frontpage {
margin-left:auto;
margin-right:auto;
width:100%;
color:#333;
margin-top:23em;
}
#banner hr {
width:15em;
margin-top:-1.8em
}
#frontpage table th {
color:#333;
border-collapse:collapse;
font-size:2em;
text-decoration:underline;
font-variant:small-caps;
}
#frontpage table td {
color:#161616;
border-collapse:collapse;
font-size:1.3em;
}
h1 {
font-size:2.8em;
margin-top:-.1em;
}
h3 {
font-variant:small-caps;
margin-top:-.2em;
letter-spacing:4px;
}
a:link {
text-decoration: none;
color:black;
}
a:visited {
text-decoration:none;
font-weight:bold;
color:black;
}
a:active {
text-decoration:underline;
color: #00F;
}
table a:hover {
text-decoration:underline;
font-weight:bold;
color:#33F;
}
a h3 {
color: #FFF;
text-decoration: none;
}
a h1 {
color: #FFF;
text-decoration: none;
}
table {
font-family:"Times New Roman", Times, serif;
font-size:1em;
margin-left:auto;
margin-right:auto;
letter-spacing:2px;
margin-top:-.5em;
}
td:nth-child(1) {
border-right:solid thin;
}
td:nth-child(2) {
border-right:solid thin;
}
td:nth-child(3) {
border-right:solid thin;
}
#frontpage td:nth-child(3) {
border-right:none;
}
.schedule_day {
font-weight:bold;
font-size:1.3em;
text-decoration:underline;
color:black;
font-variant:small-caps;
}
#banner a h1 {
text-decoration: none;
}
#wowslider-container4 {
zoom: 1;
position: relative;
max-width:960px;
margin:0px auto 0px;
z-index:90;
border:none;
text-align:left;
/* reset align=center */
font-size: 10px;
}
* html #wowslider-container4 {
width:960px
}
#wowslider-container4 .ws_images ul {
position:relative;
width: 10000%;
height:auto;
left:0;
list-style:none;
margin:0;
padding:0;
border-spacing:0;
overflow: visible;
/*table-layout:fixed;*/
}
#wowslider-container4 .ws_images ul li {
width:1%;
line-height:0;
/*opera*/
float:left;
font-size:0;
padding:0 0 0 0 !important;
margin:0 0 0 0 !important;
}
#wowslider-container4 .ws_images {
position: relative;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
}
#wowslider-container4 .ws_images a {
width:100%;
display:block;
color:transparent;
}
#wowslider-container4 img {
max-width: none !important;
}
#wowslider-container4 .ws_images img {
width:100%;
border:none 0;
max-width: none;
padding:0;
margin:0;
}
#wowslider-container4 a {
text-decoration: none;
outline: none;
border: none;
}
#wowslider-container4 .ws_bullets {
font-size: 0px;
float: left;
position:absolute;
z-index:70;
}
#wowslider-container4 .ws_bullets div {
position:relative;
float:left;
}
#wowslider-container4 .wsl {
display:none;
}
#wowslider-container4 sound, #wowslider-container4 object {
position:absolute;
}
#wowslider-container4 .ws_bullets {
padding: 9px;
}
#wowslider-container4 .ws_bullets a {
width:11px;
height:11px;
background: url(./bullet.png) left top;
float: left;
text-indent: -4000px;
position:relative;
margin-left:5px;
color:transparent;
}
#wowslider-container4 .ws_bullets a:hover {
background-position: 0 50%;
}
#wowslider-container4 .ws_bullets a.ws_selbull {
background-position: 0 100%;
}
#wowslider-container4 a.ws_next, #wowslider-container4 a.ws_prev {
position:absolute;
display:block;
top:50%;
margin-top:-2em;
z-index:60;
height: 4.5em;
width: 4.5em;
background-image: url(./arrows.png);
opacity: 0.8;
background-size: 200%;
}
#wowslider-container4 a.ws_next {
background-position: 100% 0;
right:2.1em;
}
#wowslider-container4 a.ws_prev {
left:2.1em;
background-position: 0 0;
}
#wowslider-container4 a.ws_next:hover {
opacity: 1;
}
#wowslider-container4 a.ws_prev:hover {
opacity: 1;
}
/*playpause*/
#wowslider-container4 .ws_playpause {
display:none;
width: 4.5em;
height: 4.5em;
position: absolute;
top: 50%;
left: 50%;
margin-left: -2em;
margin-top: -2em;
z-index: 59;
background-size: 100%;
}
#wowslider-container4:hover .ws_playpause {
display:block;
}
#wowslider-container4 .ws_pause {
background-image: url(./pause.png);
}
#wowslider-container4 .ws_play {
background-image: url(./play.png);
}
#wowslider-container4 .ws_pause:hover, #wowslider-container1 .ws_play:hover {
background-position: 100% 100% !important;
}
/* bottom center */
#wowslider-container4 .ws_bullets {
bottom: -26px;
left:862px;
}
#wowslider-container4 .ws_bullets div {
left:-50%;
}
#wowslider-container4 .ws-title {
position:absolute;
display:block;
bottom: 1.7em;
left: 0;
margin: 0.9em;
margin-left: 0;
margin-right: 0.9em;
padding:0.8em;
background:#FFFFFF;
color:#5D5D5D;
z-index: 50;
font-family:'Open Sans', Arial, Helvetica, sans-serif;
border-radius:0.5em;
-moz-border-radius:0 1em 1em 0;
border-radius:0 1em 1em 0;
opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
-moz-box-shadow: 0 0 0.2em #5D5D5D;
box-shadow: 0 0 0.2em #5D5D5D;
}
#wowslider-container4 .ws-title div {
padding-top:0.25em;
font-size: 1.4em;
}
#wowslider-container4 .ws-title span {
font-size: 1.8em;
}
#wowslider-container4 .ws_images ul {
animation: wsBasic 20s infinite;
-moz-animation: wsBasic 20s infinite;
-webkit-animation: wsBasic 20s infinite;
}
#keyframes wsBasic {
0% {
left:-0%
}
10% {
left:-0%
}
20% {
left:-100%
}
30% {
left:-100%
}
40% {
left:-200%
}
50% {
left:-200%
}
60% {
left:-300%
}
70% {
left:-300%
}
80% {
left:-400%
}
90% {
left:-400%
}
}
#-moz-keyframes wsBasic {
0% {
left:-0%
}
10% {
left:-0%
}
20% {
left:-100%
}
30% {
left:-100%
}
40% {
left:-200%
}
50% {
left:-200%
}
60% {
left:-300%
}
70% {
left:-300%
}
80% {
left:-400%
}
90% {
left:-400%
}
}
#-webkit-keyframes wsBasic {
0% {
left:-0%
}
10% {
left:-0%
}
20% {
left:-100%
}
30% {
left:-100%
}
40% {
left:-200%
}
50% {
left:-200%
}
60% {
left:-300%
}
70% {
left:-300%
}
80% {
left:-400%
}
90% {
left:-400%
}
}
#wowslider-container4 .ws_images img {
border-radius: 4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#wowslider-container4 .ws_effect img {
border-radius: 4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#wrap {
width: 100%;
/* Spans the width of the page */
height: 3.8em;
margin: 0;
/* Ensures there is no space between sides of the screen and the menu */
z-index: 99;
/* Makes sure that your menu remains on top of other page elements */
position: absolute;
background-color:#FFF;
left:-3px;
right:0;
top: 153px;
margin-left:auto;
margin-right:auto;
}
body {
width:100%;
height:100%;
}
.navbar {
height: .5em;
padding: 0;
margin-left: 40em;
margin-right: auto;
position: absolute;
/* Ensures that the menu doesn't affect other elements */
width: auto;
left: 0 top: 0px;
min-width:800px;
}
.navbar li {
height: 1.5em;
;
width: 10em;
/* Each menu item is 150px wide */
float:left;
text-align: center;
/* All text is placed in the center of the box */
list-style: none;
/* Removes the default styling (bullets) for the list */
font:"Times New Roman", Times, serif;
font-size:1em;
padding: 0;
margin:0;
border-left:thin solid #000;
border-right:thin solid #000;
}
.navbar a {
padding: 0;
/* Adds a padding on the top and bottom so the text appears centered vertically */
text-decoration: none;
/* Removes the default hyperlink styling. */
color: #000;
/* Text color is white */
display: block;
}
.navbar li ul {
display: none;
/* Hides the drop-down menu */
height: auto;
margin: 0;
/* Aligns drop-down box underneath the menu item */
}
.navbar li:hover ul {
display: block;
/* Displays the drop-down box when the menu item is hovered over */
border: none;
padding: .7em;
}
li:nth-child(1) {
border-right:solid thin;
}
li:nth-child(2) {
border-right:solid thin;
}
li:nth-child(3) {
border-right:solid thin;
}
li:nth-child(4) {
border-right:solid thin;
}
.navbar li ul li {
border:none;
background-color:#CCC;
border:thin solid #000;
padding:5px;
width:130px;
}
.navbar li ul li a:hover {
background-color: #CCC;
}
Thank you!
add this to your #wrap id
#wrap { text-align: center; }
and remove your .navbar code. paste this instead
.navbar { display: inline-block; }
fiddle demo
Hy Harin
If I understood you right, it's all about centering the navigation?
then try these:
.navbar {
margin: 10px auto;
width: 800px;
}
set a fixed with of your navbar UL. then set a margin: 0 auto. that means 0 margin on top and bottom and auto margin on the left and right side = it will be centered.
this won't work correctly, if the screen width is smaler than 800px ;)