We Keep Coding

CSS Navbar Transition is Smooth on Scroll Down but no Transition at all on Scroll Back Up

I am currently working on a website with a navigation bar at the top of the screen that is initially transparent when you first visit the site, but turns into a white bar with black text the moment you start scrolling down. It also shrinks a little. It has a really nice and smooth transition as it changes it's color and shrinks, but when you scroll back to the top of the page, there is no more smooth transition but rather an instant ugly transition. Actually the changing of the color back to transparent seems okay but the resize of the bar lacks the transition. I uploaded a GIF so you can see exactly what's the problem.
There is a second problem I would like to ask for. As you can see in the GIF, there is an underline animation on text hover, however, I cannot get it to work on the white navbar. I want that underline to become black, just like the text and shrink with the rest of the navbar.
Here is the GIF:
https://media.giphy.com/media/5jYbvzN9OzaVm3IRE6/giphy.gif
Also the CSS:
/* -=-=-=-=-= FONT IMPLEMENTATION =-=-=-=-=- */
#import url('https://fonts.googleapis.com/css?family=Quicksand:300|Roboto:100');
/* -=-=-=-= END FONT IMPLEMENTATION =-=-=-=- */
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Roboto",sans-serif;
font-weight: lighter;
}
header.index {
width: 100%;
height: 100vh;
background: url(../res/images/back.png) no-repeat 50% 50%;
background-size: cover;
}
header.page1 {
width: 100%;
height: 100vh;
background: url(../res/images/test.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
}
.logoimg {
position: fixed;
display: inline-block;
float: left;
width: 235px;
height:54px;
margin: 37px 80px;
transition: 0.5s ease-in-out;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
transition: 0.5s ease-in-out;
}
nav ul {
line-height: 100px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 50px;
transition: 0.5s ease-in-out;
}
nav ul li {
display: inline-block;
padding: 16px 20px;
transition: 0.5s ease-in-out;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 24px;
transition: 0.5s ease-in-out;
}
nav ul li a.current{
font-weight: 600;
}
nav.scrolled{
background: #fff;
min-height: 20px;
line-height: 40px;
transition: 0.5s ease-in-out;
}
nav.scrolled ul li a{
text-decoration: none;
color: #000;
font-size: 20px;
line-height: 40px;
transition: 0.5s ease-in-out;
}
nav.scrolled img{
width: 180px;
height: 41px;
margin: 27px 80px;
transition: 0.5s ease-in-out;
}
/* -=-=-=-=-= MENU ITEM HOVER ANIMATION =-=-=-=-=- */
.menu a {
transition: color 0.1s, background-color 0.1s;
}
.menu a {
position: relative;
display: block;
transition: color 0.1s,background-color 0.1s,padding 0.2s ease-in;
color: #fff;
}
.menu a::before {
content: '';
display: block;
position: absolute;
bottom: 24px;
left: 0;
height: 2px;
width: 100%;
background-color: #fff;
transform-origin: right top;
transform: scale(0, 1);
transition: color 0.1s,transform 0.2s ease-out;
}
.menu a:active::before {
background-color: #fff;
}
.menu a:hover::before, a:focus::before {
transform-origin: left top;
transform: scale(1, 1);
}
.menu.scrolled {
color: #000;
background-color:
}
/* -=-=-=-=-= END MENU ITEM HOVER ANIMATION =-=-=-=-=- */
And the JS:
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('scrolled');
}
else {
$('nav').removeClass('scrolled');
}
})
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop()> 2) {
$('.logo img').attr('src', 'res/logos/main.png');
}
if ($(this).scrollTop() < 2) {
$('.logo img').attr('src', 'res/logos/main_light.png');
}
});
});
And the important HTML:
<header class="index">
<nav class="navbar">
<div class="logo">
<a href="#">
<img class="logoimg" src="res/logos/main_light.png">
</a>
</div>
<div class="menu">
<ul>
<li><a class="current" href="index.html">Home</a></li>
<li>Company</li>
<li>Services</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
Note that .scrolled is the one that changes the navbar once you scrolled. May your road lead you to warm sands!

You're setting the transition for the a elements twice. First as .menu a and then as nav ul li a. The nav bar animates when scrolling up, but the transition lasts 0.1s, as declared for the selector .menu a.
You can either change .menu a to .menu nav ul li a or redesign your classes.
For the underline animation, just add the nav.scrolled selector to the classes you already have, for instance: nav.scrolled .menu a::before and change the background color. You will probably also need to re position the ::before element.

Vertical Sliding nav menu isn't working

I wanna ask you something once again. So I wanna make my vertical menu a vertical sliding menu, which pushes site content when triggered. My function to toggle it does not work (I don't know if other effects like transition and translation works too, because menu active class isn't toggled).
When I click on my button nothing shows, even errors... I don't really know where is the problem.
Here is my code:
(function() {
var bodyEl = $('body'),
mobileicon = bodyEl.find('.mobile-icon');
mobileicon.on('click', function(e) {
bodyEl.toggleClass('active-mobile-menu');
e.preventDefault();
});
});
/*-----------------------------------------------
Mobile Icon Style
-----------------------------------------------*/
.mobile-icon {
position: absolute;
display: block;
width: 40px;
z-index: 5;
}
.mobile-icon:before {
width: 100%;
font-size: 2em;
font-family: "ElegantIcons";
font-weight: bold;
text-align: center;
content: "\64";
}
.mobile-icon:hover {
color: white;
background: black;
}
/*----------------------------------------------
Mobile Menu style
-----------------------------------------------*/
.mobile-show {
dispay: block;
}
.mobile-menu {
overflow: scroll;
position: fixed;
height: 100%;
width: 70%;
background: white;
z-index: 1000;
transform: translate3d(-100%, 0, 0);
transition: transform 0.4s ease;
}
.active-mobile-menu div {
transform: translate3d(0, 0, 0);
}
.active-mobile-menu .mobile-menu {
transform: translate3d(100%, 0, 0);
}
.mobile-menu ul {
top: 10.2%;
color: black;
position: relative;
text-align: left;
font-weight: bold;
}
.mobile-menu li a {
display: block;
padding: 4% 0;
border-bottom: 1px solid black;
}
.mobile-menu > ul> li:hover > a,
.mobile-menu > ul> li:hover > .sub-menu > li:hover > a,
.mobile-menu > ul .sub-menu .sub-menu > li:hover > a {
background-color: #111;
color: #fff;
}
.mobile-menu ul li ul {
height: 100%;
width: 100%;
visibility: hidden;
display: none;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
background: #fff;
border: none;
position: relative;
}
.mobile-menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<span class="mobile-icon"></span>
<div class="mobile-menu">
<header class="mobile-header">
<div class="mobile-branding">
<!--here is my logo code,its long so i don't wanna to slow you down-->
</div>
</header>
<ul class="mobile-menu-ul">
<div class="caret"></div>
<?php wp_nav_menu(array ( 'theme_location'=>'new-menu', 'container' => '', 'items_wrap' => '%3$s' )); ?>
</ul>
</div>

When I run your code through jsbin, the toggle works. I had to include the jQuery library, as you can see by the line
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
It is my suspicion that you do not have the jQuery library loaded on your page properly.

Well i find the solution by myself,i was added $(document).ready(function(){}); into the start of the document.And i putted my variables in new function,in which i put new function,so there was 3 functions in one another,and that was the conflict.Now its working,Thanks for your time guys <3

Javascript navigation hover effect

Does anyone know how to implement the navigation hover effect displayed on this web page into my HTML/CSS document? The aforementioned page is using a WordPress theme, but I would like to add that green effect to my generic web page and be able to change the color as well.
P.S. I have never used Javascript before. (Be nice.)

Try This:
CSS
ul li{
list-style:none;
}
ul li a{
transition:all 0.2s ease-out;
padding:5px;
border-radius:5px
}
ul li a:hover{
background-color:#&dcc0e;
}
HTML:
<ul>
<li>
<a>Hello</a>
</li>
</ul>

This does not need any js. You can create the effect using css transition like this.
div{
width: auto;
float: left;
}
a{
color: red;
text-decoration: none;
padding: 5px 20px;
float: left;
position: relative;
}
a:hover{
color:#FFF;
}
a:after{
content: '';
background: red;
position: absolute;
top: 50%;
right: 5%;
bottom: 50%;
left: 5%;
border-radius: 3px;
transition: all .1s;
z-index: -1;
}
a:hover:after{
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div>menu</div>

Responsive navigation stays hidden on window resize (pure JS)

I have been looking for a solution for over ten hours, today only, and have searched many more days before that. I'm asking a question here because I'll be ripping my hair out very soon if this goes on.
My problem : I have a responsive navigation which looks like a regular navbar on desktop sized screens that converts to a dropdown menu when window shrinks or device width gets too small. On the media queries front, I think I've got everything covered.
The Javascript is what is causing problems. Let me explain :
Desktop nav shrinks when window is resized
clicking to open/close the shrunk menu makes the list items pop out/hide without problem
when window is resized to its original width (with menu closed) the navigation stays hidden
Here are two examples to illustrate what I mean.
Responsive menu hidden on window resize
Responsive navigation hidden on window resize
I know what people might suggest : just make it work with jQuery there are many working examples. While that may be true, I'm not familiar with jQuery at all and if I could, I would rather not use a whole library just for this. I'm not very experienced in JavaScript either, but I prefer the pure JS approach.
HTML
<header class="header" id="return">
<div class="floatWrapper">
<nav class="grid70" >
<input type="button" onclick="toggle(navi)"/>
<ul class="allGrids navigation grid1" id="navi">
<li><a data-scroll href="#profil">About</a></li>
<li><a data-scroll href="#competences">Skills</a></li>
<li><a data-scroll href="#parcours">Work</a></li>
<li><a data-scroll href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
CSS
*,
:after,
:before{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing:border-box;
box-sizing: border-box;
word-wrap:break-word;
}
html, body{
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
font-size: 100%;
}
ul, li{
list-style-type: none;
padding:0;
margin:0;
}
a{
text-decoration: none;
}
.floatWrapper{
width: 90%;
max-width: 1120px;
margin:0 auto;
}
.floatWrapper:before,
.floatWrapper:after {
content:"";
display:block;
}
.floatWrapper:after {
clear:both;
}
.allGrids{
height: auto;
float:left;
margin: 1% 0%;
display:block;
}
.grid1{
width: 100%;
margin:1% 0;
}
.grid70{
width: 66%;
}
.header{
position: fixed;
top: 0;
left:0;
width:100%;
z-index: 100000;
padding:0;
height: auto;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.header input{
display:none;
}
.header .floatWrapper .grid70{
float:right;
}
.navigation{
margin:0;
padding: 0;
}
.navigation li{
float:left;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
width: 24%;
margin-left: .3%;
padding-top:0;
border-radius: 0 0 10px 10px;
}
.navigation li:nth-child(odd) a{
background: orange;
}
.navigation li a{
display: block;
color: black;
background-color: lightblue;
text-decoration: none;
word-wrap: normal;
padding-right: 8%;
height:4em;
line-height: 5.5em;
text-align : right;
border-radius: 0 0 10px 10px;
-moz-transition-proprety: background-color height;
-moz-transition-duration : 1s;
-webkit-transition-proprety: background-color height;
-webkit-transition-duration : 1s;
-ms-transition-proprety: background-color height;
-ms-transition-duration : 1s;
-o-transition-proprety: background-color height;
-o-transition-duration : 1s;
transition-proprety: background-color height;
transition-duration : 1s;
}
.navigation li:hover a{
box-shadow: 1px 2px 4px black;
height:6em;
line-height: 8.5em;
-moz-transition-proprety: background-color height;
-moz-transition-duration : 1s;
-webkit-transition-proprety: background-color height;
-webkit-transition-duration : 1s;
-ms-transition-proprety: background-color height;
-ms-transition-duration : 1s;
-o-transition-proprety: background-color height;
-o-transition-duration : 1s;
transition-proprety: background-color height;
transition-duration : 1s;
}
#media screen and (max-width: 769px) {
.header{
padding:0;
position:fixed;
background-color: #22313F;
border-top:none;
}
.header .floatWrapper{
padding-top: 1em;
padding-bottom: 1em;
position: relative;
z-index:15000;
width: 100%;
}
.header .floatWrapper .grid70{
width: 2em;
height: 2em;
padding:0;
float:right;
margin-right: 5%;
}
.header .floatWrapper .grid70 input{
display:block;
color:#22313F;
width: 100%;
height: 100%;
background-color: #6C7A89;
padding:0;
margin: 0;
}
.header .floatWrapper .grid70 .navigation{
position:absolute;
top:70%;
left:0%;
display:none;
padding-top: 15px;
}
.header .floatWrapper .grid70:hover .navigation {
max-height: 1000px;
display:block;
}
.navigation li{
width: 100%;
padding:0;
border-radius:0;
margin-left: 0;
}
.navigation li a {
text-align: left;
height: auto;
line-height: 40px;
border-radius:0;
word-wrap:break-word;
padding:1.5%;
font-size: 18px;
}
.navigation li:hover a{
box-shadow: none;
color:black;
height: auto;
line-height: 40px;
}
}
JavaScript
var is_touch_device = 'ontouchstart' in document.documentElement;
if(is_touch_device){
//code for touch devices
function toggle(navi) {
var tag=document.getElementById("navi");
tag.style.display = tag.style.display === 'block' ? 'none' : 'block';
// set as defaut oposite defaut active value in document
// here defaut is set to block cause it is none in CSS
}
}
I am very well aware that what is causing problems is non other than this very JS snippet. On mobile, it works like a charm.
As the hover is still enabled on .grid70 it works on Desktops browsers aswell, but only on Firefox. Chrome, IE and Opera detect the touch and make the nav unusable after a few clicks (when window is resized).
Here is a JSbin : http://jsbin.com/ziqij/1/edit?html,css,js,output
The reason hover is still working is because I thought the touchscreen detection would work ... and wanted to go with hover on desktop / onclick on mobile.
I realize now, I'd better use a click only solution and account for desktop touchscreens aswell.
Any help / insight would de greatly appreciated.
Desperately,
Phil

How to convert a Horizontal Menu with vertical submenus into a Vertical Accordion menu with submenus?

I want to make my menu so that when I am at a certain window size, like on mobile, my menu will convert to a vertical drop down accordion menu. I am familiar with media queries and responsive/adaptive designs, but I can't get my submenu to vertically drop/slide down, either on hover or click.
Here is my Fiddle
HTML:
<!--MENU UNDER HEADER BEGINS-->
<table id="menubar" width="0" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="navmenu"> <!--#navmenu DIV menu contents start here-->
<ul>
<li>
HOME
</li>
<li>
ABOUT ME
</li>
<li class="slidedown">
GRAPHIC DESIGN
<ul>
<li>Hobbyist/Independent</li>
<li>Job & FreeLance</li>
<li>University At Buffalo</li>
</ul>
</li>
<li class="slidedown">
WEB DESIGN
<ul>
<li>Hobbyist/Independent</li>
<li>Job & FreeLance</li>
<li>University At Buffalo Website</a></li>
</ul>
</li>
<li class="slidedown">
PHOTOGRAPHY
<ul>
<li>Hobbyist/Independent</li>
<li>Job & Freelance</li>
<li>Student Projects</li>
</ul>
</li>
<li>
CONTACT ME
</li>
</ul>
</div> <!--#navmenu DIV menu contents end here-->
</td>
</tr>
</table>
<!--menu under header ends-->
CSS:
html, body {
height: 100%;
overflow-x:hidden;
overflow-y:hidde;
margin:auto;
}
#wrap {
margin:auto;
min-height: 100%;
background-image: url(style/flourish-bg.png);
background-repeat:no-repeat;
background-position: top center;
z-index:0;
}
#header {
width:1024px;
height:160px;
background-repeat: no-repeat;
}
#bgheader {
background-image: url(style/bgheader.jpg);
background-repeat:repeat-x;
height:160px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
background-repeat: no-repeat;
background:#000;
}
/*----------MENU-----------*/
/*main menu*/
a:link {color:#fff; text-decoration:none;}
a:visited {color: #868D65;}
a:hover {color:#000;}
a:active {color: #868D65;}
#navmenu {
width:100%;
height:80px;
margin-right:auto;
margin-left:auto;
}
/*holds the listed items on main menu*/
#navmenu ul {
width:100%;
margin:0;
padding: 0;
list-style:none;
text-decoration:none;
}
/*keeps main menu horiztonal, and effects the actualy list items, overrides any other menu float*/
#navmenu li {
float:left;
padding: 30px 7px;
position:relative;
list-style:none;
text-decoration:none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:12px;
text-decoration: none;
border-top: 2px solid #868D65;
border-bottom: 2px solid #868D65;
transition: border-radius 1s, background 1s;
-moz-transition: -moz-border-radius 1s, background 1s;
-webkit-transition: -webkit-border-radius 1s, background 1s;
z-index:200;
}
/*menu styling for hover, WHEN IMAGE IS ADDED, IT APPLIES TO ALL HOVER ACTIONS ON EVERY MENU*/
#navmenu li:hover {
background: #eee;
background-image: url(style/bgheader.jpg);
transition: border-radius 1s, background 1s;
-moz-transition: -moz-border-radius 1s, background 1s;
-webkit-transition: -webkit-border-radius 1s, background 1s;
z-index:200;
}
/*SUB MENU STARTS*/
/*this hides the submenu*/
#navmenu li ul {
position: absolute;
top:75px;
visibility:hidden;
padding-left:0px;
}
/*this shows the submenu on hover over main menu*/
#navmenu li:hover ul {visibility:visible;}
/*sub menu styling*/
#navmenu li ul li {
float:none;
width: 160px;
font-size:12px;
text-align:center;
padding: 15px 5px 10px 5px;
background: #222222;
border: 1px solid #FFF;
color: #FFF;
position:relative;
margin-left: -6px;
}
/*sub menu styling for hover*/
#navmenu li ul li:hover {
font-size:12px;
color: #000;
background-color: #868D65;
}

Here you go
#media (max-width:600px) {
tr td #navmenu li {
width:100%; // makes each item takes up the whole screen
}
tr td #navmenu li ul {
position:relative !important; // removes the position absolute so that it doesn't overlap the higher up menu items
top:0; // puts it right next to the menu item
display:none; // so there is no unnecessary white space when the `li` isn't being hovered over
}
tr td #navmenu li:hover ul {
display:block; // shows the submenu when you hover over the higher `li`s
}
}

put something like this in your mobile layout's media query
#navmenu li {
display: block;
text-align: center;
float:none;
}
#navmenu li ul {
display: none;
position: relative;
top:0;
visibility:hidden;
}
since your technique on how to show submenu is purely css (:hover on parent and visibility:visible), we need js/jquery because our child menu is display:none now
$('li.slidedown').hover(function() {
$(this).find('ul').slideDown();
}, function() {
$(this).find('ul').slideUp();
});
havent checked my codes, byt i hope you got my point