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

#site-header.top-header {
	border-bottom: 0 !important;

	.header-top {
		position: relative;
		background-color: $color-1;
		@include box-shadow( 0 1px 5px 0 rgba(0,0,0,0.1) );
		z-index: 100;

		.left {
			float: left;
		}

		.right {
			float: right;

			.inner {
				display: table;
				position: relative;
			}
		}
	}

	#searchform-header-replace {
	    background-color: $color-1;
	}

	&.header-replace {
		.left, .right {
			@include transition( opacity 0.25s ease-in-out );

			&.hide {
				visibility: hidden;
    			@include opacity( 0 );
			}
		}
	}

	#site-navigation-wrap {
	    float: none;
	    right: auto !important;
	    left: -15px;
	}

	#site-navigation-wrap .dropdown-menu > li > a {
		font-size: 10px;
		line-height: 40px;
	    font-weight: 600;
	    letter-spacing: 2px;
	    text-transform: uppercase;
	}

	.oceanwp-social-menu,
	#search-toggle {
		float: none;
	    display: table-cell;
	    vertical-align: middle;
		height: 40px;
	}

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

	.oceanwp-social-menu {
		right: 0;
	    padding: 0 10px;

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

		    span {
		    	width: 26px;
			    height: 26px;
			    line-height: 26px;
		    }
		}
	}

	#search-toggle {
		border-right: 1px solid $color-9;
	    border-left: 1px solid $color-9;
	    padding: 0 6px;

	    a {
	    	display: inline-block;
	    	font-size: 12px;
		    width: 28px;
		    text-align: center;
	    }
	}

	&.search-overlay #search-toggle .search-overlay-toggle {
		position: relative;
	    z-index: 101;

		&.exit > span:before {
			content: '✕';
			color: $color-1;
		}
	}

	#searchform-header-replace input {
	    color: $color-3;
    	font-size: 10px;
	    font-weight: 600;
	    text-transform: uppercase;
	    letter-spacing: 2px;
	}

	#searchform-header-replace-close {
		font-size: 16px;
    	padding: 0 6px;
	}

	.header-bottom {
		text-align: center;
	}

	#site-logo {
		float: none;
    	display: inline-block;
		padding: 50px 0;

		#site-logo-inner {
		    display: block;
		    height: auto;
		}

		#site-description {
			padding-top: 20px;

			h2 {
				color: $color-4;
				font-size: 12px;
			    line-height: 20px;
			    letter-spacing: 2px;
			    text-transform: uppercase;
			    margin: 0;
			}
		}
	}

}

#site-header.top-header .oceanwp-mobile-menu-icon {
	float: none;
	left: -15px;
	right: auto;

	a {
		font-size: 10px;
		line-height: 40px;
		font-weight: 600;
		letter-spacing: 2px;
		text-transform: uppercase;
	}
}

#site-header.top-header.has-header-media {
    #site-header-sticky-wrapper,
	.header-top {
	    z-index: 101;
	}
}

/*------------------------------------*
	All Devices under 960px
*------------------------------------*/
@media only screen and (max-width: 959px) {
			
	/* Hide social and search form in sidr for the top menu header style */
	.top-header-style {
		.sidr-class-social-menu-inner,
		.sidr-class-mobile-searchform {
			display: none;
		}
	}
	
}

/*------------------------------------*
	Phone Landscape
*------------------------------------*/
@media only screen and (max-width: 480px) {

	/* Hide social and search in menu and show them in sidr for the top menu header style */
	#site-header.top-header {
		.right {
			display: none;
		}

		&.header-replace {
			.left.hide,
			.right.hide {
				visibility: visible;
				@include opacity( 1 );
			}
		}

		.header-top {
			.left,
			.right {
				float: none !important;
				text-align: center;
			}
		}

		.oceanwp-mobile-menu-icon {
			float: none;
			left: auto !important;
			right: auto !important;

			a {
				float: none;
			}
		}

		.header-top .right .inner {
			display: block;
			padding-bottom: 10px;
		}

		.oceanwp-social-menu,
		#search-toggle {
			float: none;
			display: inline-block;
			height: auto;
		}
	}
	
	.top-header-style {
		.sidr-class-social-menu-inner,
		.sidr-class-mobile-searchform {
			display: block;
		}
	}

}