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

#site-navigation-wrap {
	float: right;
	position: relative;
	right: -15px;

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

		> li {
			float: left;
			position: relative;

			> a {
				display: block;
				font-size: 13px;
				line-height: 74px;
				color: $color-11;
				padding: 0 15px;
				letter-spacing: 0.6px;

				&.site-search-toggle {
					letter-spacing: 0;
				}

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

				.nav-arrow {
					padding-left: 6px;
					line-height: 1;
				}
			}

			&.btn > a {
				background-color: transparent !important;
			}

			&.btn > a > span {
			    background-color: $color-5;
			    color: $color-1;
			    padding: 12px 22px;
			    font-weight: 600;
			    @include border-radius( 4px );
			    cursor: pointer;
			    text-align: center;
		    	@include transition( background-color .3s ease );

		    	&:before,
		    	&:after {
		    		display: none !important;
		    	}
			}

		    &.btn > a:hover > span {
		    	background-color: $color-6;
		    	color: $color-1;
		    }

			&.btn.rounded > a > span {
			    @include border-radius( 25px );
			}
		}
	}
}

// If social
.has-social #site-navigation-wrap {
	right: 0;
}

// If left menu
.minimal-header.left-menu #site-navigation-wrap,
.transparent-header.left-menu #site-navigation-wrap {
	float: left;
	right: 0;
}

.minimal-header.left-menu #site-logo,
.transparent-header.left-menu #site-logo {
	padding-right: 20px;
}

// If center menu
.center-menu #site-navigation-wrap {
	position: absolute;
    float: none;
    left: 50%;
    right: auto;
    @include transform( translateX(-50%) );
}

/**
 * SuperFish
 */
.sf-menu,
.sf-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sf-menu {
	li.menu-item {
		position: relative;
		white-space: nowrap;
		white-space: normal;
	}

	li:hover,
	li.sfHover {
		@include transition( none );
	}

	ul.sub-menu {
		position: absolute;
		display: none;
		top: 100%;
		left: 0;
		z-index: 9999;
	}

	> li {
		float: left

	}

	li:hover > ul,
	li.sfHover > ul {
		display: block
	}

	a.menu-link {
		display: block;
		position: relative;
		zoom: 1
	}

	ul.sub-menu ul {
		top: 0;
		left: 100%;
	}
}

/**
 * Dropdown
 */
.dropdown-menu,
.dropdown-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dropdown-menu {
	.sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		background-color: $color-1;
		border-top: 3px solid $color-5;
		min-width: 180px;
		line-height: 1;
		text-align: left;
		z-index: 999;
		@include box-shadow( 0 2px 6px rgba(0, 0, 0, 0.1) );
	}

	li .sub-menu li.menu-item {
		display: block;
		float: none;
	}

	ul .sub-menu {
		top: 0;
		left: 100%;
	}
}

.no-top-border .sub-menu {
	border: none;
}

.dropdown-menu {
	ul li.menu-item {
		display: block;
		border-bottom: 1px solid $color-9;
	}

	ul li.menu-item:last-child {
		border-bottom: 0;
	}

	ul li a.menu-link {
		display: block;
		position: relative;
		float: none;
		font-size: 12px;
		font-weight: 400;
		line-height: 1.2em;
		letter-spacing: 0.6px;
		padding: 12px 15px;
		text-transform: capitalize;

		&:hover {
			background-color: $color-8;
			color: $color-11;
		}

		.nav-arrow {
			position: absolute;
			top: 50%;
			right: 15px;
			margin-top: -6.5px;
			padding: 0;
		}

		i {
			position: relative;
			width: 20px;
			text-align: center;
			margin-right: 3px;
		}
	}
}

/**
 * Icons
 */
.dropdown-menu li a.menu-link i {
	padding-right: 5px;
}

/**
 * Item description
 */
.nav-content {
    display: block;
    font-size: 11px;
    line-height: $base-line-height;
    padding: 5px 0;
    white-space: normal;
    @include opacity( 0.7 );
}

/**
 * Menu Icons
 */
.navigation li a {
	i.icon, span.icon-wrap, img.icon {
		display: inline-block;
		vertical-align: middle;
	}

	i {
		&.icon {
			width: auto;
			height: auto;
			font-size: 1.2em;
			line-height: 1;
			padding: 0 !important;
		}

		&.before,
		&.after {
			margin-top: -.265em;
		}

		&.before {
			margin-right: 6px;
		}

		&.after {
			margin-left: 6px;
		}

		&.elusive {
			margin-top: -.3em;
		}
	}

	span.icon-wrap {
		text-align: center;

		i.below, img {
    		display: block;
    		margin: 0 0 8px;
    	}

    	img {
    		margin: 0 auto 8px auto;
    	}

    	span.menu-text {
    		display: block;
    		line-height: 1;
    	}
	}

	img {
		&.before {
			margin-right: 6px;
		}

		&.after {
			margin-left: 6px;
		}
	}
	
	.svg {
		width: 1em;
	}

	.hidden {
		display: none !important;
	}
}

/**
 * After header content
 */
.after-header-content {
	float: right;
	height: 100%;
    display: table;

    .after-header-content-inner {
		display: table-cell;
	    vertical-align: middle;
	    height: 74px;

	    > a,
	    > div > a {
	    	display: inline-block;
    		line-height: 74px;
	    }
	}

	.elementor {
	    display: inline-block;
	}
}

/*------------------------------------*
	Mobile Menu
*------------------------------------*/
.oceanwp-mobile-menu-icon {
	display: none;
	position: relative;

	&.mobile-right {
		float: right;
	}

	&.mobile-left {
		float: left;
	}

	a {
		font-size: 13px;
		line-height: 74px;
		color: #555;
		padding-left: 15px;
		letter-spacing: 0.6px;
		cursor: pointer;

		&:first-child {
			padding-left: 0;
		}

		&:hover {
			color: #13aff0;
		}

		&.mobile-menu {
			.oceanwp-text,
			.oceanwp-close-text {
				padding-left: 6px;
			}

			.oceanwp-close-text,
			&.opened .oceanwp-text {
				display: none;
			}

			&.opened .oceanwp-close-text {
				display: inline-block;
			}
		}
	}
}