Develop Reference

Problem with css animation: position relative and value for left doesn't work apparently together

Here's my problem:
I'm trying to animate a nav list (ul) and in my mind, I want to move it on click like that:
$('#top-nav-more').click(function() {
$('.hidden').toggleClass('hidden-click');
$(this).find('img').toggleClass('rotate');
});
/** Top Nav **/
#top-nav {
background: #e41a2e;
padding:0 !important;
display: inline-block;
/*height:40px;*/
}
.top-nav-wrapper{
max-width:1366px;
margin: 0 auto;
}
a.top-req-info{
position: absolute;
font-family: 'Daxline Light';
font-size: 0.80rem;
color: #FFF;
background: #cd1729;
padding: 10px 20px 11px 10px;
/* float: left; */
}
a.top-req-info:hover, #top-nav-book a:hover, .hidden a:hover {
text-decoration:none;
color: #821b31;
}
a.top-req-info:hover, #top-nav-book:hover {
background: #821b31;
color: white;
}
#top-nav-book:hover a {
color: white;
}
#top-nav-more a, #top-nav-no a, #top-nav-book a, .hidden a {
color: #FFF;
font-size: 0.80rem;
}
.rotate {
transform: rotate(180deg);
}
ul.top-nav-right{
list-style: none;
float: right;
display: inline;
margin: 7px 0;
}
ul.top-nav-right li{
display:inline;
padding: 8px 25px 8px;
}
li#top-nav-more{
background: #cd1729;
}
#top-nav-more img{
margin-right: 15px;
transition: 0.3s;
}
.hidden {
position: relative;
left: 321px;
display: none!important;
transition:all 1s linear;
}
.hidden-click {
transition:all 1s linear;
position: relative;
left: 0;
display: inline!important;
}
ul .hidden:first-child {
display: inline!important;
left: 0;
}
.search-bar input {
background-color: #821A31;
color: #ffff;
font-size: 35px;
border: 0;
margin: 0;
height: 76px;
width: 100%;
padding: 0 80px;
font-weight: 200;
display: none;
}
.search-bar input:focus, .search-bar input:focus{
outline: none;
}
.search-bar input.slide-down {
display: block;
}
.search-bar input::placeholder {
color: white;
}
.hover-bar {
background: #821A31!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Top Navigation -- Red bar -->
<div id="top-nav" class="container-fluid">
<div class="top-nav-wrapper">
<ul class="top-nav-right">
<li class="hidden">Health Care</li>
<li class="hidden">My Account</li>
<li class="hidden">Student Portal</li>
<li id="top-nav-more">More</li>
<li id="top-nav-no">Phone number</li>
<li id="top-nav-book">Book a Tour</li>
</ul>
</div>
</div>
Essentially, when you click more, the bar will change the position from some certain pixels to the left to 0 pixels on the left.
I added the transition effect to do it smoothly but for some reason, the effect happens right away. So technically it works but it doesn't work as I wish.
Something has to be wrong on my css transition. I read that it is possible to animate the position, so it is not a problem of position, it has to be something different. I've already use the property transition somewhere else in my code, so I have no clue of what is wrong, any idea?

This might get you close. I imagine there might be more to the animation you're looking for. It's hard to manipulate elements that are set to display none. Visibility: hidden and position: absolute is an equivalent you can manipulate:
/** Top Nav **/
#top-nav {
background: #e41a2e;
padding:0 !important;
display: inline-block;
/*height:40px;*/
}
.top-nav-wrapper{
max-width:1366px;
margin: 0 auto;
}
a.top-req-info{
position: absolute;
font-family: 'Daxline Light';
font-size: 0.80rem;
color: #FFF;
background: #cd1729;
padding: 10px 20px 11px 10px;
/* float: left; */
}
a.top-req-info:hover, #top-nav-book a:hover, .hidden a:hover {
text-decoration:none;
color: #821b31;
}
a.top-req-info:hover, #top-nav-book:hover {
background: #821b31;
color: white;
}
#top-nav-book:hover a {
color: white;
}
#top-nav-more a, #top-nav-no a, #top-nav-book a, .hidden a {
color: #FFF;
font-size: 0.80rem;
}
.rotate {
transform: rotate(180deg);
}
ul.top-nav-right{
list-style: none;
float: right;
display: inline;
margin: 7px 0;
}
ul.top-nav-right li{
display:inline;
padding: 8px 25px 8px;
}
li#top-nav-more{
background: #cd1729;
}
#top-nav-more img{
margin-right: 15px;
transition: 0.3s;
}
.hidden {
position: absolute;
left: 321px;
visibility: hidden;
transition:all 1s linear;
}
.hidden-click {
transition:all 1s linear;
position: relative;
left: 0;
visibility: visible;
}
ul .hidden:first-child {
display: inline!important;
left: 0;
}
.search-bar input {
background-color: #821A31;
color: #ffff;
font-size: 35px;
border: 0;
margin: 0;
height: 76px;
width: 100%;
padding: 0 80px;
font-weight: 200;
display: none;
}
.search-bar input:focus, .search-bar input:focus{
outline: none;
}
.search-bar input.slide-down {
display: block;
}
.search-bar input::placeholder {
color: white;
}
.hover-bar {
background: #821A31!important;
}
Working/semi-working example:
https://jsfiddle.net/qLpfynks/

I believe the reason is because you are switching from display:none to display: inline. CSS cannot transition display and so it will show the "transition" immediately.
To fix this and still achieve the desired effect change it to
.hidden {
position: relative;
left: 321px;
display: inline!important;
opacity:0; /*makes it invisible*/
transition:all 1s linear;
/*transition:left 1s linear*/
}
.hidden-click {
transition:all 1s linear;
/*transition:left 1s linear*/
position: relative;
left: 0;
opacity: 1; /*makes it visible*/
display: inline!important;
}
Note that if you use the specificier all for your transition you will see a fade in and out animation. If you don't want this, specify only left (see commented CSS code)

CSS Mobile Nav Dropdown - Alignment

I have this responsive nav I found on codepen.io. It works nicely on codepen.io however not so much in JS Fiddle (Included Below). When the screen is dragged over the 3 lines for the drop down icon link gets all wonky, it is not aligned propertly with the rest of the navigation. Also whenever there is a dropdown in use, the options no not align on top of each other (desktop or mobile). Related Dropdown CSS is below - Any help is appreciated Thanks. I put it into a JS Fiddle here.
// Dropdown list
ul li {
min-width: 190px;
a {
padding: 15px;
line-height: 20px;
}
}
}
}
}
// Dropdown list binds to JS toggle event
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
// Binds to JS Toggle
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: $nav-background;
height: $nav-height;
width: $nav-height;
}
#media only screen and (max-width: $breakpoint) {
// Hamburger nav visible on mobile only
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: $nav-height 0 15px;
ul {
display: none;
li {
float: none;
a {
padding: 15px;
line-height: 20px;
}
ul li a {
padding-left: 30px;
}
}
}
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: $breakpoint) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
span,
span:before,
span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: $nav-font-color;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
span:before {
top: -10px;
}
span:after {
bottom: -10px;
}
&.active span {
background-color: transparent;
&:before,
&:after {
top: 0;
}
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
}
}

It was an issue with the SCSS. I just copied and pasted it over from your codepen, and it's working fine now in this jsfiddle I forked from your original. I added a negative margin to your nav-container class to correct the alignment issue with the toggle button. Additionally, you can use a flexbox to get the center-positioning for your menu items.
// Container with no padding for navbar
.nav-container {
margin: auto;
margin-top: -8px;
display: flex;
justify-content: center;
}

Please see: https://jsfiddle.net/z8rxe922/5/
You just have to use position as relative instead of absolute and in the responsive screen you have to set padding to 0.
.navmobile {
position: relative;
float:right;
}
#media only screen and (max-width: 800px) {
nav {
padding:0px;
}
}
What was your second question ? It is a bit unclear.

Full screen menu only appears in nav bar

I have got the following html and css. The problem is when it is run the full screen menu only appears in the nav bar. The problem only appears when using safari.
I can solve the problem my getting rid of
.nav {
position: fixed;
}
but I still want the nav bar to be fixed at the top of the page.
.nav {
font-family: Arial-BoldMT;
font-size: 16px;
list-style: none;
text-align: right;
padding: 0px 0 0px 0;
box-shadow:0px 1px 1px #d3d3d3;
background-color: white;
width: 100%;
z-index:0.1;
overflow: auto;
position: fixed;
top: 0;
}
.nav p {
float: left;
margin-left: 40px;
color: #333333;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
.slider {
font-size:30px;
cursor:pointer;
float:right;
margin-right: 40px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
<div class="nav">
<p>LIAM VINSON</p>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
HOME
ABOUT
PHOTOGRAPHY
PORTFOLIO
CONTACT
</div>
</div>
<span class="slider" onclick="openNav()">☰</span>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</div>

z-index:0.1;
is not valid css.
z-index must be an integer - either negative or positive. Chances are most browsers are just treating it as 0, but Safari don't know what to do with it. So, change it to an integer like
z-index:1;
and set your overlay to z-index:2 (though I would recommend spacing these numbers out in case you have to index additional elements. ie. z-index:100; and z-index:200;)
Setting it as fixed, with top at 0, should fix it to the top of page for you once you correct that z-index issue you got there.

The problem was
.nav {
overflow: auto;
}
It stopped the overlay from being shown outside of the nav div.

force div element to the top

http://codepen.io/anon/pen/zqQJNM code pen for html and the css
I am trying to force the picture of the items to the top or the middle of the picture of the character I am not really sure how this is done any help? I have tried vertical-align different positions css is my weakest region so any help would be greatly appreciated!
#information{
background-color: CCFFFF;
border: groove;
width:100%;
height: 230px;
}
#summonerBox{
width: : 100px;
background-color: ;
}
#summonerInput{
width:200px;
height: 20px;
background-color: white;
}
.winBg{
background-color: green;
}
.loseBg{
background-color: red;
}
#itemList1{
position: inherit;
display: inline-block;
margin-left: 300px;
list-style-type: none;
vertical-align:top;
}
#itemlist2{
display: inline-block;
margin-left: 300px;
list-style-type: none;
}
#goldEarned{
list-style-type: none;
}
#gameType{
list-style-type: none;
}
#summonerGame{
list-style-type: none;
}

Use positioning for the element which you want to fix to top
//For left align
#itemList1{
position:absolute;
top:0;
left:0;
}
//to fix it with respect to you device screen then just use {position:fixed;} instead.
//For center align first wrap all UL with any Divlike
<div class="wrapper">
<ul>...</ul>
<ul>...</ul>
..
</div>
//CSS..
.wrapper{
position:absolute;
top:0;
left:50%;
right:50%;
width:300px;
margin-left:-150px
}
This will make all <ul> at the center of the screen and it will be responsive.

Try this as a simple solution :
#information{
background-color: #CCFFFF;
border: groove;
width:100%;
height: 230px;
position: relative;
}
#summonerBox{
width: 100px;
background-color: ;
}
#summonerInput{
width: 200px;
height: 20px;
background-color: white;
}
.winBg{
background-color: green;
}
.loseBg{
background-color: red;
}
#itemList1{
margin-left: 100px;
list-style-type: none;
position: absolute;
top: 0;
left: 0;
}
#itemlist2{
margin-left: 100px;
list-style-type: none;
position: absolute;
top: 50px;
left: 0;
}
#goldEarned{
list-style-type: none;
}
#gameType{
list-style-type: none;
}
#summonerGame{
list-style-type: none;
}

Any tutorials that show ajax content slider?

I found a tutorial that is exactly the way I want the slider to look with the exception that I do not want to have multiple slides in each slide. And I simply want the text to change as I click different links.
Also I want the slides to transition by fading in.
I tried playing around with the code, but it seems to be way too complex for my understanding to fix. Because it seems to use Movefromleft movefromright .. for each movement.
I need some help to either fix this or guide me to a less complex version of a nice interface (like this) tutorial that does the same.
http://jsfiddle.net/itsnamitashetty/73pffnx9/2/
.mi-slider ul.mi-moveFromRight li {
-webkit-animation: moveFromRight 350ms ease-in-out both;
animation: moveFromRight 350ms ease-in-out both;
visibility:visible !important;
}
I am not sure why and how to get the fiddle to show up what its doing right now. But basically it doesn;t show up the first slide, and then works for the second and third but after the first clicks it doesnt work..
here is the original tutorial
http://tympanus.net/Tutorials/ItemSlider/

So I was able to find another content slider that did what I wanted but I had to make it work with the other tutorial.
HERE is what I came up with
Unfortunately the codepen in not showing how it works.
But anyways for someone looking to achieve the same thing
here are the two tutorials that I used,
Item slider & Full Width Tabs
I basically worked around the CSS of Full Width Tabs to make it interface pretty much like Item slider
.container {
font-family: 'Lato', Calibri, Arial, sans-serif;
color: #47a3da;
}
a {text-decoration: none;
outline: none;}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container{width:60%; margin:2% 20%;}
.tabs {
position: relative;
width: 100%;
overflow: hidden;
margin: 1em 0 2em;
font-weight: 300;
}
/* Nav */
.tabs nav {
text-align: center;
border-top: 5px solid transparent;
}
.tabs nav a.tab-current {
/* border: 1px solid #47a3da;
box-shadow: inset 0 2px #47a3da;*/
border-bottom: none;
z-index: 100;
}
.tabs nav a {
display: inline-block;
text-transform: uppercase;
letter-spacing: 5px;
padding: 40px 30px 30px 34px;
position: relative;
color: #888;
outline: none;
-webkit-transition: color 0.2s linear;
transition: color 0.2s linear;
}
.tabs nav a:hover, .tabs nav a.tab-current {
color: #000;
}
.content{background:rgba(0,0,0,0.8)}
/* Content */
.content section {
font-size: 1.25em;
padding: 3em 1em;
display: none;
max-width: 1230px;
margin: 0 auto;
}
.content section:before,
.content section:after {
content: '';
display: table;
}
.content section:after {
clear: both;
}
/* Fallback example */
.no-js .content section {
display: block;
padding-bottom: 2em;
border-bottom: 1px solid #47a3da;
}
.content section.content-current {
display: block;
}
nav a.tab-current:after,
nav a.tab-current:before {
content: '';
position: absolute;
top: -5px;
border: solid transparent;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
nav a.tab-current:after {
border-color: transparent;
border-top-color: rgba(0,0,0,0.8);
border-width: 20px;
left: 50%;
margin-left: -20px;
}
nav a.tab-current:before {
border-color: transparent;
border-width: 27px;
left: 50%;
margin-left: -27px;
}