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.

Get div to be on the right of my sidebar

Okay so i working on a portfolio site for myself as i am a graphic designer. I have a side bar currently with some essential info for my site and its always there. What i want is for my "portfolio section" to be next to it on the right. I created both in separate hmtl files just so i could fine tune them, now i want take the 'portfolio' code and paste it into the other html code, the problem when i do it and move all my css over nothing shows up.
the filtering shows up and i can kinda get it to be in the right spot but the portfolio images i cant get to show up.
Here is where im at with the code pasted in but cant seem to get the images to show: https://jsfiddle.net/5g15jzwt/ (the filtering selections are at the bottom, they should be at the top)
Here is my design, this is what im trying to get to: http://imgur.com/a/96RlE
When i check to see whats wrong with firbug it says the .container div and the .portfoliolist div have heights of zero.
.container {
position: relative;
width: 940px;
margin: 0 auto;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
float: right;
}
I hope this enough info to help, i cant seem to get other pages to work in jsfiddle to show you where im at. If you need anything else to help, just let me know and ill see what i can do. Also i know the code could be done a little ore efficiently in some places, im not the best just trying to make do
Thank you in advance

Currently, some of your div are not closed, you just open them.
For example, you open sidebar, but never close it. So instead of:
<div id="sidebar">
<div id="header">
<img id="logo" class="my-logo" src="images/logo.svg"/>
<h1>Warren Breedlove</h1>
</div>
You might want to do:
<div id="header">
<img id="logo" class="my-logo" src="images/logo.svg"/>
<h1>Warren Breedlove</h1>
</div>
<div id="sidebar">
/* YOUR SIDEBAR CODE HERE */
</div> /* This closes the div */
Look at how to use div and make sure they don't overlap: https://www.w3schools.com/tags/tag_div.asp

Here is a fiddle with your Sidebar and Container appearing side by side as I imagine you intended.
https://jsfiddle.net/0m67qu4z/2/
The solution is based off of the comment I made to your original question. There were a number of different changes made to the CSS of this - all on width values. The most important ones were these;
#sidebar{
height: 720px;
width: 25%; /* changed to % */
background-color: #fbfbfb;
position: relative;
float: left;
}
#info {
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background:#fcf8e3;
border:1px solid #fbeed5;
width:95%; /* Changed to % */
max-width:900px;
margin:0 auto 40px auto;
font-family: roboto;
font-size:12px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
}
.container {
position: relative;
width: 70%; /*changed to %*/
margin: 0 auto;
margin-left:20px; /* gave you a little room between the two elements */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
float: left; /*changed to float left */
}
/* #Tablet (Portrait) */
#media only screen and (min-width: 768px) and (max-width: 959px) {
.container {
width: 70%; /*changed to %*/
}
}
Something else i forgot to mention is if you inspect element/firebug your code - your wrapper shows up as 0 x 0. Essentially it doesn't occupy any space. If you add
wrapper {
display:table;
}
It will properly assign the width and height that you want to it.

Here is a flexbox solution. I'm using some pseudo code instead of yours to help simplify things and hopefully makes it easier to see what's going on.
body {
display: flex;
margin: 0;
font-family: Arial, sans-serif;
}
ul,
li {
margin: 0;
padding: 0;
}
nav a {
color: #555;
text-decoration: none;
}
nav a:hover {
color: indianred;
}
aside {
display: flex;
flex-direction: column;
width: 250px;
color: #777;
font-weight: bold;
text-transform: uppercase;
background-color: white;
}
aside nav {
display: flex;
flex-direction: column;
padding: 0.5rem 1rem;
font-size: 0.8rem;
}
aside a {
padding: 0.5rem 0 0.5rem;
}
aside p {
margin-top: auto;
font-size: 0.5rem;
text-align: center;
}
section {
flex-grow: 1;
min-height: 1000px; /* <= for demo, mimic content height */
padding: 0 2rem;
background-color: #f1f1f1;
}
section nav {
display: flex;
align-items: stretch;
height: 60px;
border-bottom: 1px solid #ccc;
}
section nav a {
padding: 0 1rem;
line-height: 60px;
}
section nav a:hover {
background-color: #ddd;
}
<aside>
<nav>
Home
About
Contact
</nav>
<p>Copyright ©</p>
</aside>
<section>
<header>
<nav>
All
Logos
School Work
</nav>
</header>
<main>
<!-- place work example markup here -->
</main>
</section>

Responsive Hover Box over Responsive Image

I've been using a tutorial for making a hover box go over a set of images.
The article can be found here.
Got it working perfectly, except I want my images and the hover to be responsive to window size (just via width is fine), I've tried looking up how to do this. Seems like it might be a case of using % rather than a fixed value, but not experienced enough to know how to execute the markup. Even if I get the images to re-size the hover box doesn't re-size with them.
Is it possible to add something to the existing CSS to make this happen.
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
display: inline-block;
height: 150px;
margin: 0 1em 1em 0;
position: relative;
width: 150px;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
ul.img-list li:hover span.text-content {
opacity: 1;
}
<ul class="img-list">
<li>
<a href="#">
<img src="http://placehold.it/150x150">
<span class="text-content"><span>Text</span></span>
</a>
</li>
</ul>

you can use only width to keep image ratio.
you can use display:block for a and img, and use flex to center text.
not too sure about the responsive behavior you look for for, you can use a % width on li or a mix a % width + min-width and max-width.
example with % width set at 50% (and max/min width ) , it can be any other value and units.
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
display: inline-block;
vertical-align:top;
margin: 0;
position: relative;
width:50%;
max-width:100vh;
min-width:60vh;
}
ul.img-list li a, ul.img-list li a img {
display:block;
width:100%;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display:flex;
left: 0;
right:0;
position: absolute;
top: 0;
bottom:0;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
span.text-content span {
margin:auto;
}
ul.img-list li:hover span.text-content {
opacity: 1;
}
* {
margin:0;
padding:0;
}
<ul class="img-list">
<li>
<a href="#">
<img src="http://placehold.it/150x150">
<span class="text-content"><span>Text</span></span>
</a>
</li>
</ul>

You could also do it like this, using pseudo elements to display the overlay content on the image. This method is fully responsive.
.wrapper {
width: 100%;
overflow: auto;
padding: 1%;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
/* Columns floated left */
.col-4 {
width: 33.3%;
float: left;
padding: 1%;
box-sizing: border-box;
height: auto;
overflow: hidden;
}
/* Container to make absolute positioning easier on psuedo element */
.image_container {
position: relative;
overflow: auto;
padding: 0;
margin: 0;
}
.image_container img {
width: 100%;
display: block;
}
/* Structure for ::before element */
#img_1::before,
#img_2::before,
#img_3::before {
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
right: 0;
height: 100%;
width: 100%;
box-sizing: border-box;
display: block;
opacity: 0;
color: white;
padding: 10px;
transition: 0.5s ease;
}
/* Hover state for container to show ::before on mouseover */
.image_container:hover#img_1::before,
.image_container:hover#img_2::before,
.image_container:hover#img_3::before {
opacity: 1;
cursor: pointer;
}
/* Text for ::before elements */
#img_1::before {
content: 'Image Title 1';
}
#img_2::before {
content: 'Image Title 2';
}
#img_3::before {
content: 'Image Title 3';
}
<div class="wrapper">
<div class="col-4">
<div class="image_container" id="img_1">
<img src="https://images.unsplash.com/reserve/B6PfiQ8QoSzmsZYOCkSB__DSC0530-1.jpg?dpr=1&auto=format&fit=crop&w=1500&h=1004&q=80&cs=tinysrgb&crop=">
</div>
</div>
<div class="col-4">
<div class="image_container" id="img_2">
<img src="https://images.unsplash.com/photo-1418985991508-e47386d96a71?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=">
</div>
</div>
<div class="col-4">
<div class="image_container" id="img_3">
<img src="https://images.unsplash.com/photo-1476362555312-ab9e108a0b7e?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=">
</div>
</div>
</div>
You could also set the images as a background-image for the div which would give you more control over the text in the overlay, if you needed it.

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>

Full height doesn't work of Overlay

Live site- http://uposonghar.com/new-video/
There is a Embeded YouTube video, if you mouse over on that video(center of the video) Facebook + Twitter share button appears on the left, like this-
But that is only working when anyone mouse over center part of embedded YouTube video box, not in whole part. I want to style it like when anyone when mouse over the video box(no matter where) share button appears, share button will be alignment center vertically i any video box height.
My code-
HTML-
<div id="video-container">
<iframe src="//www.youtube.com/embed/-Jkd9GDSyPc" width="600" height="400" allowfullscreen="" frameborder="0"></iframe>
<ul class="share-video-overlay" id="share-video-overlay">
<li class="facebook" id="facebook">Facebook</li>
<li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&text=Check+this+video&url=http%3A//www.youtube.com/watch%3Fv%3D-Jkd9GDSyPc">Tweet</a</li>
</ul>
</div>
CSS-
#share-video-overlay {
position: relative;
top: -225px;
list-style-type: none;
display: block;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .4s, top .25s;
-moz-transition: opacity .4s, top .25s;
-o-transition: opacity .4s, top .25s;
transition: opacity .4s, top .25s;
z-index: 500;
}
#share-video-overlay:hover {
opacity:1;
filter:alpha(opacity=100);
}
.share-video-overlay li {
margin: 5px 0px 5px 0px;
}
#facebook {
color: #ffffff;
background-color: #3e5ea1;
width: 70px;
padding: 5px;
}
.facebook a:link, .facebook a:active, .facebook a:visited {
color:#fff;
text-decoration:none;
}
#twitter {
background-color:#00a6d4;
width: 70px;
padding: 5px;
}
.twitter a, .twitter a:link, .twitter a:active, .twitter a:visited, .twitter a:hover {
color:#FFF;
text-decoration:none;
}

I rewrote your CSS, perhaps this is what you need?
#video-container {
display: block;
position: relative;
width: 600px; //set the video container to the same width/height as the embedded video
height: 400px;
}
#video-container:after {
clear: both;
}
#share-video-overlay {
display: none;
position: absolute; //absolute positioning to force the element over the iframe
lef: 0;
top: 225px;
}
#video-container:hover #share-video-overlay {
display: block; //clear the float. See http://www.positioniseverything.net/easyclearing.html
}
.share-video-overlay li {
margin: 5px 0px 5px 0px;
}
#facebook {
color: #ffffff;
background-color: #3e5ea1;
width: 70px;
padding: 5px;
}
.facebook a:link, .facebook a:active, .facebook a:visited {
color:#fff;
text-decoration:none;
}
#twitter {
background-color:#00a6d4;
width: 70px;
padding: 5px;
}
.twitter a, .twitter a:link, .twitter a:active, .twitter a:visited, .twitter a:hover {
color:#FFF;
text-decoration:none;
}
In a nutshell: set the container to match the width/height of the youtube video, then position the overlay using absolute positioning. Because it is inside the video container, it will position itself inside the limits of the container.
And: set the hover on the video container, and not the overlay. As said, the overlay is inside the container, so you can easily make the overlay visible on a hover on the container. (#video-container:hover #share-video-overlay { })
I have put the example in a Fiddle so you can test if this is what you need.

Its because of the height of the share-video-overlay class. Increase height of this class you will get the result. Change the css of share-video-overlay like this
top:-435px;
padding-top:215px;
Set this css as you want and give height to share-video-overlay class height:500px; .
I am sure it will work.