float-blog/wp-content/themes/oceanwp/sass/components/header/_header-fullscreen.scss

#site-header.full_screen-header {
	z-index: 9999;
	
	#site-header-inner {
		overflow: visible !important;
	}

	#site-navigation-wrap {
		right: 0;
	}

	#site-logo.has-full-screen-logo {
		position: relative;
		z-index: 101;

		.full-screen-logo-link {
			display: none;
		}

		&.opened .custom-logo-link,
		&.opened .retina-logo-link {
			display: none;
		}

		&.opened .full-screen-logo-link {
			display: block;
		}
	}

	.menu-bar-wrap {
	    float: right;
	    height: 100%;
	    display: table;
	}

	.menu-bar-inner {
	    display: table-cell;
	    vertical-align: middle;
	    position: relative;
	    height: 74px;
	}

	.menu-bar {
	    display: inline-block;
	    position: relative;
	    margin-left: 10px;
	    min-width: 38px;
	    height: 33px;
	    text-align: center;
	    z-index: 101;

	    .ham {
		    display: inline-block;
		    width: 23px;
		    height: 2px;
		    position: relative;
		    top: 2px;
		    background-color: $color-2;
		    vertical-align: middle;
		    white-space: nowrap;
		    @include transition( all ease .3s );

		    &:before, &:after {
			    position: absolute;
			    content: '';
			    display: inline-block;
			    width: 23px;
			    height: 2px;
			    left: 0;
			    background-color: $color-2;
			    outline: 1px solid transparent;
			    @include transition( all ease .3s );
			}

		    &:before {
			    top: -8px;
			}

		    &:after {
			    top: 8px;
			}
		}

		&.exit .ham {
		    background-color: transparent !important;

		    &:before, &:after {
			    background-color: $color-1;
			}

		    &:before {
			    @include transform( translateY(8px) rotateZ(-45deg) );
			}

		    &:after {
			    @include transform( translateY(-8px) rotateZ(45deg) );
			}
		}
	}

	&.nav-open {
		@include transform( none !important );
	}

	#full-screen-menu {
		display: none;
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background-color: rgba(0,0,0,0.9);
	    overflow-y: scroll;
	    z-index: 100;

	    #full-screen-menu-inner {
	    	display: table;
		    width: 100%;
		    height: 100%;
		    padding: 0 40px;
		}

	    #site-navigation {
	    	display: table-cell;
		    vertical-align: middle;
		    padding: 100px 0;
	    	text-align: center;
		}
	}

	.fs-dropdown-menu {
	    list-style: none;
		margin: 0;

		li {
			a {
				display: block;
			    color: $color-1;
			    letter-spacing: 2px;
			    text-transform: uppercase;

			    &:hover {
			    	color: $color-4;
			    }
			}

			> a .nav-arrow {
                display: inline-block;
			    width: 26px;
			    padding-left: 5px;
			    text-align: center;

				&:before {
					content: '+';
				}
			}

			&.open-sub > a .nav-arrow:before {
				content: '-';
			}

			.sidebar-box {
				display: none;
			}
		}

		ul.sub-menu {
			display: none;
			list-style: none;
			margin: 0;
			padding: 0;

			li a {
			    font-size: 16px;
			    padding: 6px 0;
			}
		}

    	> li {
    		display: block;

			> a {
			    font-size: 24px;
			    line-height: 1.2;
			    padding: 12px 0;
			}	    			
		}

	    > li.search-toggle-li {
	    	max-width: 220px;
			margin: 10px auto 0;

			form {
				position: relative;
			}

			input, label {
				font-size: 20px;
			    padding: 4px 0;
			    color: $color-1;
			    margin: 0;
			    text-align: center;
			    text-transform: uppercase;
			}

			input {
				position: relative;
			    border: 0;
			    background-color: transparent;
			    border-bottom: 1px solid $color-17;
			    @include border-radius( 0 );
			    z-index: 2;

			    &:hover, &:focus {
			    	border-color: $color-1;
			    }
			}

			label {
			    display: block;
				position: absolute;
			    top: 0;
			    bottom: 0;
			    left: 0;
			    right: 0;
			    cursor: text;
			    @include opacity( .5 );
			    z-index: 1;

			    i {
			    	display: inline-block;
				    background-color: $color-1;
				    width: 3px;
				    height: 3px;
				    margin-left: 3px;
				    @include animation( blink 1s linear infinite );
			    }

			    i+i {
				    @include animation-delay( .2s );
				}

				i+i+i {
				    @include animation-delay( .4s );
				}
			}

			form.search-filled label {
				@include opacity( 0 );
				@include transition-duration( 150ms );
			}
	    }
    }

    .oceanwp-social-menu {
    	display: block;
	    float: none;
	    margin-top: 30px;
	    text-align: center;
	    right: auto;

	    .social-menu-inner {
		    display: block;
		    height: auto !important;
		}

		ul li {
		    float: none;
		    display: inline-block;
		}

		&.simple-social ul li a {
			background-color: transparent !important;
			color: $color-1;
			font-size: 24px;
    		padding: 0 16px;
    		margin: 0;

			&:hover {
				color: $color-4;
			}
		}

		.colored ul li a,
		.minimal ul li a,
		.dark ul li a {
		    padding: 0 4px;
		}

		.colored ul li a span,
		.minimal ul li a span,
		.dark ul li a span {
		    font-size: 16px;
		    width: 60px;
		    height: 60px;
		    line-height: 60px;
		}
    }

}

@-webkit-keyframes blink {
    0% {
        -webkit-opacity: 1;
    }
    50% {
        -webkit-opacity: 0;
    }
    100% {
        -webkit-opacity: 1;
    }
}

@-moz-keyframes blink {
    0% {
        -moz-opacity: 1;
    }
    50% {
        -moz-opacity: 0;
    }
    100% {
        -moz-opacity: 1;
    }
}

@-o-keyframes blink {
    0% {
        -o-opacity: 1;
    }
    50% {
        -o-opacity: 0;
    }
    100% {
        -o-opacity: 1;
    }
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*------------------------------------*
	All Devices under 960px
*------------------------------------*/
@media only screen and (max-width: 959px) {
		
	/* header > logo */
	#site-header.full_screen-header #site-logo.has-full-screen-logo.opened {
		.custom-logo-link {
			display: block;
		}

		.full-screen-logo-link {
			display: none;
		}
	}
	
}