I understand this seems to be a common request but after digging through several posts I can't find a solution and/or lack the knowledge to tailor the javascript to my needs.
I am looking for a way to have my Navbar stick to the top of the page once it reaches the top (scrolling far enough down). The issues I have is that my Navbar is currently positioned using flex, and not already at the top of the page.
CODEPEN
* {margin:0;padding:0;box-sizing:border-box}
html, body {text-align: center;}
#logo2 img {
margin: 0 auto;
margin-top: 3%;
}
.menu2 {
display: flex; /* displays children inline */
margin: 0;
width: 100%;
margin-top: 2%;
list-style-type: none;
background: linear-gradient(#3E3E3E, #2B2B2B);
}
li {
flex: 1; /* each takes as much width as it can, i.e. 25% */
border-right: 1px solid #232323;
}
li:last-child {
border: none;
}
li a {
display: block;
text-align: center;
font: Verdana;
font-size: 16px;
color: #EAE0D2;
text-decoration: none;
padding: 20px 0;
}
li a:hover {
background: linear-gradient(#404040, #3E3E3E);
}
.active {
background: linear-gradient(#2B2B2B, #232323);
}
<header id="logo2">
<img src="logo.png" alt="Logo"/>
</header>
<nav>
<ul id="navigation" class="menu2">
<li>HOME</li>
<li class="active">GALLERY</li>
<li>ART</li>
<li>CONTACT</li>
</ul>
</nav>
</body>
Well I eventually found an answer to my question. For those of you interested.
JS
var num = 240; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menu2').addClass('fixed');
$('.main').addClass('main2');
} else {
$('.menu2').removeClass('fixed');
$('.main').removeClass('main2');
}
});
.menu2 {
width: 100%; height: 100%;
background-color: rgb(240, 240, 240);
position: sticky;
left: 0; top: 0;
}
.emptySpace {width: 100%; height: 1000000px;}
<span class="menu2">
Link 1
Link 2
Link 3
Link 4
Link 5
</span>
<!-- the div below is to allow you to scroll so you can see how it works (it's absolutely useless) -->
<div class="emptySpace"></div>
If I'm understanding your question correctly, you can use
HTML:
<span class="menu2">
Link 1
Link 2
Link 3
</span>
CSS:
.menu2 {position: sticky;}
This will cause the navigation bar to stick to the top of the screen as the user scrolls down.
You can read into this a bit more at W3Schools.
Also, check out my Weave at LiveWeave.
Related
I apologize for my lack of coding knowledge as I am fairly new to web designing. I've searched for a solution for days, trying different methods, and realized I need help.
Basically my code is programmed to illustrate a hamburger icon when the browser is shrunk, this works perfectly fine. What I am having issues with is that when I click on my hamburger icon, the dropdown menu will not display.
It used to work when I didn't add the line in the beginning, but my site was really slow and laggy. After adding the line, my javascript does not work at all and I'm lost.
Here is my code for html, css and js:
$('.hamburger').on('click', function () {
if ($('.menu').hasClass('open')) {
$('.menu').removeClass('open');
} else {
$('.menu').addClass('open');
}
});
#media only screen and (max-width: 768px) {
.hamburger {
cursor: pointer;
padding: 30px;
display: block;
}
.line {
border-bottom: 5px solid #fff;
width: 35px;
margin: auto;
margin-bottom: 6px;
}
.line:last-child {
margin-bottom: 0;
}
/* Our styles here */
#nav li {
width: 100%;
border-bottom: 1px solid white;
text-align: center;
border-top: 1px solid white;
border-bottom: none;
background: rgba(204, 204, 204, 1);
}
.menu {
height: 0;
overflow: hidden;
transition: height 0.3s;
margin: 0;
padding: 0;
margin-top:-14;
}
.open {
height: 255;
}
<!DOCTYPE HTML>
<body>
<div id="nav">
<div href="#" class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="clearfix menu">
<li>About Us</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</body>
please msg if I need to provide any more info!!
You are giving the ul.open a height of 255 but the browser needs to know the unit (px/em/rem etc.). Setting this to 255px will fix your issue.
The reason you are experiencing this after setting a doctype is because by doing so you are setting your document to be rendered in standards mode instead of quirks mode. In standards mode you must specify units for dimensions, in quirks mode the browser assumes px.
It's me again :) today am trying to develop a sliding divs with text navigation, i mean that i can edit the nav not only generated bullets. say that we have three divs containing images and text and i need to center a navigation menu of three different links.. also if you can help me in that, if the current slider is number 3 and I clicked on nav item number 1 I want it to jump to 1 without seeing 2 during the scrolling
here is the original code i need to learn how to develop it http://www.alfaromeo.co.uk/models/giulietta#dynamism
links to a similar article or any help in general would be very appreciated
.item--mobile .slider-item__wrap{height:300px;overflow:hidden}
.row-slide,.row-wrap{*zoom:1;clear:both;position:relative}
.row-slide:before,.row-slide:after,.row-wrap:before,.row-wrap:after{content:" ";display:table}
.row-slide:after,.row-wrap:after{clear:both}
.row-slide .content__text .animated-line,.row-wrap .content__text .animated-line{top:12px}
#media screen and (min-width:769px){.slider-menu{width:100%;font-size:0;position:absolute;right:0;bottom:42px;left:0;text-align:center;z-index:4}
.slider-menu>ul,.slider-menu>ul>li{display:inline-block}
.slider-menu>ul{padding:0;font-size:0;width:100%}
.slider-menu>ul>li{font:14px/14px "ApexNew-Medium",Helvetica,Arial,sans-serif;color:#000;background-color:#fff;text-transform:uppercase;letter-spacing:2px;padding-top:10px;padding-bottom:10px;border-right:1px solid #000;cursor:pointer;max-width:180px;width:100%;text-align:center}
.slider-menu>ul>li:first-child{position:relative}
.slider-menu>ul>li:first-child:before{content:"";width:90%;height:1px;position:absolute;bottom:5px;left:5%;background:#8f0c25}
.slider-menu>ul>li:last-child{border-right:0}
.slider-menu>ul>li.active{background-color:#8f0c25;color:#fff}
}
#media screen and (min-width:1366px){.slider-menu>ul>li{max-width:220px}
}
<div class="row-slide">
<div class="slider-item-wrap">
<div class="slide current">
images and text goes here 1
</div>
<div class="slide">
images and text goes here 2
</div>
<div class="slide">
images and text goes here 3
</div>
</div>
<div class="slider-menu">
<ul>
<li class="current"><a>link to slide 1</a></li>
<li><a>link to slide 2</a></li>
<li><a>link to slide 3</a></li>
</ul>
</div>
</div>
It looks like you want to develop a carousel.
There are several javascript and jQuery carousels, for example Slick and
jCarousel
It will be much easier to use a plugin or somebody else's solution for this. Download one of the examples and follow the site's instructions for how to integrate it into your own site.
Otherwise, use your browser's Developer Tools or script debugging feature to study the script for that site you pointed to. You can also study the code of jCarousel and Slick, for example, or any library.
Here is a very simple example of a custom carousel I threw together that you can study. It uses progressive enhancement and takes advantage of scrolling so that even without javascript users still get a decent experience and can flip through content. (Though you could easily tailor it to hide the scrollbar by swapping images instead, for example).
The main parts are: 1) styling so that only one content panel shows at a time, and 2) the logic to animate the sliding of the panels when user navigates.
$(".slider-menu a").on("click", function() {
var $current = $(".slide.current");
var $li = $(this).closest("li");
var idx = $li.index();
if (idx !== $current.index()) {
$(".slider-menu li.current").removeClass("current");
$li.addClass("current");
var $next = $(".slide").eq(idx);
$current.removeClass("current");
$next.addClass("current");
var $carousel = $(".slider-item-wrap");
var left = $carousel[0].scrollLeft + $next.position().left;
$carousel.animate({
scrollLeft: left
}, 500);
}
});
html,
body,
.row-slide,
.slider-item-wrap {
margin: 0;
border: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: "Segoe UI", Arial, sans-serif;
font-size: 0;
color: #fff;
overflow: hidden;
}
.row-slide {} .slider-item-wrap {
white-space: nowrap;
overflow: auto;
overflow-y: hidden;
}
.slide {
width: 100%;
height: 100%;
font-size: 24px;
display: inline-block;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.slider-menu {
position: absolute;
margin: 0 auto;
width: 100%;
margin: 0;
border: 0;
padding: 0;
bottom: 20px;
}
.slider-menu ul {
list-style: none;
overflow: auto;
margin: 0 auto;
border: 0;
padding: 20px;
text-align: center;
}
.slider-menu li {
padding: 4px 20px;
display: inline-block;
text-align: center;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
}
.slider-menu li:hover {
background-color: rgba(255, 255, 255, 0.7);
color: #222;
cursor: pointer;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.slider-menu li.current,
.slider-menu li.current:hover {
background-color: rgba(0, 0, 0, .2);
color: #333;
box-shadow: 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row-slide">
<div class="slider-item-wrap">
<div class="slide current red">
images and text goes here 1
</div>
<div class="slide blue">
images and text goes here 2
</div>
<div class="slide green">
images and text goes here 3
</div>
</div>
<div class="slider-menu">
<ul>
<li class="current"><a>link to slide 1</a>
</li>
<li><a>link to slide 2</a>
</li>
<li><a>link to slide 3</a>
</li>
</ul>
</div>
</div>
I am trying to get the left side bar to have a height of 100% and fill the page no matter how big the "main" div is made.
At the moment it stops at normal page height and doesn't increase height.
Is there any way I can achieve this?
JFiddle: https://jsfiddle.net/hjnheonk/
HTML:
<div class="container">
<div class="navbar-left">
<div id="top">
<h2><b>Admin</b>Panel</h2>
</div>
<div id="navigation">
<ul>
<li class="nav-header">Main Pages: </li>
<li>
Home
etc ...
</ul>
</div>
</div>
<div id="navbar-top">
<div id="user">
<?php echo'<p id="user_greeting">'.$username. '<span class="fa fa-caret-down"></span>'.'</p>'?>
</div>
<div id="icon">
<span>
<hr><hr><hr>
</span>
</div>
<div class="main">
</div>
</div>
</div>
**CSS: **
html,body {
height: 100%;
}
.container {
margin-left: 230px;
height: 100%;
position:relative;
}
.navbar-left {
background-color:rgb(26, 34, 38);
color:white;
width: 230px;
margin-left: -230px;
height: 100%;
float:left;
}
.navbar-left #top {
background-color:#367fa9;
min-height: 50px;
text-align: center;
}
.navbar-left #top h2 {
font-size: 20px;
padding: 15px 0px;
}
#navbar-top {
float:right;
width: 100%;
position:relative;
background-color:#3c8dbc;
width: 100% !important;
margin:0 auto;
border: none;
min-height: 51px;
}
#navbar-top #icon {
width: 20px;
padding: 18px 10px !important;
}
#navbar-top #icon hr {
margin:0 auto;
padding: 0px;
border: 1px solid white;
border-radius: 5px;
}
#navbar-top #icon hr:not(:first-child) {
margin-top: 5px;
}
#navbar-top > div:hover:not(#userDropdown) {
background-color:#47a0d3;
cursor: pointer;
}
#brand {
float:left;
}
#navigation .nav-header {
background-color: #272f33;
padding: 12px 30px;
text-align: left;
margin-top: 40px;
margin-bottom: 25px;
}
#navigation ul li a:hover {
background-color: #273136;
}
#navigation ul li a {
width: 100%;
display: block;
padding: 12px 0px;
background-color: #1a2226;
text-align: center;
color:white;
text-decoration: none;
}
.main {
float:left;
width: 100%;
background-color:pink;
height: 1000px; /*Used as an example to show */
}
There's no way to do this by pure CSS, they way you coded-sliced it. If you want it to make work with the current layout - calculate the height via JS, based on the contents and height of the right column.
Basically in your case there different ways to proceed:
calculate the height via JS, based on the contents and height of the right column.
to nest DIVs. So one div will stretch it's parent. Then it will be possible to use purely CSS solution. Read more here one of the possible solutions.
to "override" the standard behavior of divs with "display:table-cell;" (table, table-row, etc), or even to use modern features of CSS alike flexboxes
Which way to go, is up to you.
Does the container need to be defined as percentage? If not then you could do something like this:
$('.navbar-left').css('height', $('.container').height()+'px');
Using Farside's method and updating a little bit here is my code:
var column = $(".column_left").height() + "px";
$(".column_right").css({"height": column});
$(window).on('resize', function(){ //accounts for if the user resizes the window, column stays in place.
var column = $(".column_left").height() + "px";
$(".column_right").css({"height": column});
});
Here is a Pure CSS way to acheive the same.
JS Filddle: https://jsfiddle.net/cx6nu8sw/
Following are the classes from your code which are changed
#navbar-top {
width: 100%;
position:relative;
background-color:#3c8dbc;
margin:0 auto;
border: none;
min-height: 51px;
display:table-cell;
vertical-align:top;
}
.navbar-left {
background-color:rgb(26, 34, 38);
color:white;
display:table-cell;
vertical-align:top;
}
//newly addition
#navigation{
width:230px;
}
As mentioned by #Farside in his 3rd point, I have used "display:table-cell;" on your Div's. Its same as creating table, where the height of row is decided by the longest content in the entire row.
But, be aware that width & height of elements with "display:table-cell;" cannot be forced, it will adjust according to the content inside them. So you can set width and height of elements inside them it will automatically take the same height and width.
I am trying to make a nav menu for part of a practice website, and I made an animation that basically slides down a green div when one of the menu options are hovered over, but once that happens the whole nav menu slides down. which I do not want. I tried changing the nav menus position to absolute, but then it looses its position, and I can't re-position it. Any help would be appreciated, thank you!
Here is the JSfiddle version.
HTML:
<ul id="nav_animations">
<li class="nav_square home_square" id="greenHome"></li>
</ul>
<ul id="navlist">
<li class="navlistitems" id="home">Home</li>
</ul>
CSS:
#nav_animations {
display:inline;
position:relative;
bottom:13px;
}
#greenHome {
display:none;
}
.nav_square {
background-color:green;
width:100px;
height:15px;
z-index:22;
position:relative;
}
#navlist {
display:inline;
font-family: 'Dhurjati', sans-serif;
font-size:45px;
position:relative;
}
.navlistitems {
display:inline;
padding:50px;
color:black;
}
JavaScript:
$(document).ready(function(){
$('#home').hover(function(){
$('#greenHome').slideToggle('fast');
});
});
PS: Yes I do have the JQuery library linked in my actual code.
The quick and dirty solution using your work is as follows below. If you wanted the green dropdown to be below the parent nav item, you should add ul#nav_animations inside the li.navlistitems. That's what I've done below. I also modified your CSS a little to take this into consideration.
And here is a JSFiddle I threw together for you: http://jsfiddle.net/84amnjz7/1/
CSS:
#navlist {
margin: 0;
padding: 0;
list-style-type: none;
font-family: 'Dhurjati', sans-serif;
font-size: 45px;
position: relative;
}
.navlistitems {
position: relative;
padding: 25px 0 0;
display:block;
float: left;
color: #000;
}
#nav_animations {
display: block;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
}
#greenHome {
display: none;
}
.nav_square {
background-color: green;
width: 100%;
height: 15px;
z-index: 22;
position: relative;
}
jQuery:
$(document).ready(function(){
$('#home').hover(function(){
$('#greenHome').stop(true, true).slideToggle('fast'); /* ADDED .stop(true, true) */
});
});
Modified HTML:
<ul id="navlist">
<li class="navlistitems" id="home">Home
<ul id="nav_animations">
<li class="nav_square home_square" id="greenHome"></li>
</ul>
</li>
</ul>
My navigation has a border-bottom on hover, after you slide down on the site my first nav gits hidden and my 2nd nav gets shown. The navs have the same css, but my border-bottom on the 2nd nav doesn't work. Is this a problem with my css or jquery? Can anyone help me fix this?
HTML:
<header>
<a href="#home" id="logo" class="smoothScroll">
<img src="img/logo.png">
</a>
<nav>
Home
About
Projects
Contact
</nav>
</header>
<div id="header" class="fade">
<a href="#home" id="logo" class="smoothScroll">
<img src="img/logo-white.png">
</a>
<nav>
Home
About
Projects
Contact
</nav>
</div>
Jquery:
$(window).scroll(function() {
if ($(window).scrollTop() > 100 ){
$('header').show();
$('header').removeClass('slideUp');
$('header').addClass('slideDown');
$('#header').addClass('hide');
} else {
$('header').addClass('slideUp');
$('#header').removeClass('hide');
};
});
CSS:
header, #header{
height: 75px;
background: rgba(26, 28, 30, 0.75);
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 50;
}
header{
display: none;
}
#header{
background-color: transparent;
}
nav{
position: fixed;
right: 0;
margin-top: 22.5px;
margin-right: 30px;
z-index: 55;
}
nav a:link, nav a:visited{
position: relative;
display: inline-block;
padding: 0px 10px 0px 10px;
text-decoration: none;
font-size: 1.5em;
color: #fffffa;
}
nav a:after{
content: '';
display: block;
margin: auto;
width: 0px;
background: transparent;
transition: width .5s ease,
background-color .5s ease;
}
nav a:hover:after{
width: 100%;
border-bottom: 2px solid #fffffa !important;
}
Looks like your JQuery is having some syntax issues in the id selectors. Make sure to include #
$(window).scroll(function() {
if ($(window).scrollTop() > 100 ){
$('#header').show();
$('#header').removeClass('slideUp');
$('#header').addClass('slideDown');
$('#header').addClass('hide');
} else {
$('#header').addClass('slideUp');
$('#header').removeClass('hide');
};
});
Edit
Per feedback, I have re-visited this issue and have crafted a fiddle with my interpretation of what I believe will solve this. Continuous feedback will be great in getting this resolved.
$(window).scroll(function() {
if ($(window).scrollTop() > 100 ){
$('header').addClass('hide');
$('#header').removeClass('hide');
} else {
$('#header').addClass('hide');
$('header').removeClass('hide');
};
});
Updated JSFiddle Link
The first problem in your script is HTML code.
You should put the second nav inside the header element like this:
<header>
<nav id="first-nav">
Home
About
Projects
Contact
</nav>
<nav id="second-nav">
Home
About
Projects
Contact
</nav>
</header>
I gave the id of "first-nav" and "second-nav" for easy handling.
Second problem is your jQuery. In your if condition, you tell jQuery to hide the header element when the browser has been scrolled more than 100. That's the problem because nav element need to be used inside header element.
I have edited your jQuery.
$(document).ready(funciton() {
//hide the second nav
$('#second-nav').hide();
//when the scroll event fired
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('#second-nav').show();
$('#first-hav').hide();
}
else {
$('#first-nav').show();
$('#second-hav').hide();
}
});
});
If there is anything that is not clear please let me know, I'll be happy to help.