Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="main-nav-section">

	<div class="main-nav-mobile">
		<div class="main-nav-mobile-toggle-left">
			<button class="hamburger hamburger--collapse" type="button">
				<span class="hamburger-box">
					<span class="hamburger-inner"></span>
				</span>
			</button>
		</div>
		<div class="main-nav-mobile-toggle-center">
			<a href="https://www.fortheinjured.wpengine.com">
				<img class="main-nav-mobile-logo" src="http://gpartnersdev.wpengine.com/wp-content/uploads/2021/01/gordon-and-partners-logo.svg">
			</a>
		</div>
		<div class="main-nav-mobile-toggle-right">
			<a href="tel:8559674619"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 44"><path d="M38.6 33.4l-10.1-7.2c-.5-.3-1.1-.2-1.5.2 0 0-2.6 3.2-3.5 4.1 0 .1-.2.1-.4.1-1.7 0-5.4-2.6-7.2-4.4s-4.4-5.5-4.4-7.2c0-.2 0-.3.1-.4.7-.7 3.2-2.7 4.1-3.5.5-.4.5-1 .2-1.5L8.6 3.5c-.3-.5-.9-.6-1.4-.4-3.3 2.1-5.5 5.4-6.1 9.3-.8 5.7 2.4 12.2 9.3 19.2 6.3 6.3 12.1 9.4 17.5 9.4 4.5-.1 8.6-2.4 10.9-6.2.3-.5.2-1.1-.2-1.4z" fill-rule="evenodd" clip-rule="evenodd" fill="#fff"/></svg></a>
		</div>
	</div>

	<div class="main-nav">

		<div class="main-nav-container">

			<ul class="main-nav-links-list">
				<li class="main-nav-item"><a class="main-nav-link" href="">Home</a></li>
				<li class="main-nav-item">
					<a class="main-nav-link main-nav-sub-menu-toggle" href="javascript:;">Office Locations</a>
					
					<!-- Submenu -->
					<div class="main-nav-sub-menu">
						<ul class="main-nav-megamenu-col">
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://fortheinjured.wpengine.com/west-palm-beach/personal-injury-lawyers/">
                                    <img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/assets/media/images/2018/icon-pin.svg" alt="location">
									<span>West Palm Beach</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://fortheinjured.wpengine.com/plantation/personal-injury-lawyers/">
								  <img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/assets/media/images/2018/icon-pin.svg" alt="location">	
                                  <span>Plantation</span>
								</a>
							</li>
                            <li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://fortheinjured.wpengine.com/stuart/personal-injury-lawyers/">
								  <img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/assets/media/images/2018/icon-pin.svg" alt="location">	
                                  <span>Stuart</span>
								</a>
							</li>
                            <li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://fortheinjured.wpengine.com/palm-beach-gardens/personal-injury-lawyers/">
								  <img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/assets/media/images/2018/icon-pin-active.svg" alt="location">	
                                  <span>Palm Beach Gardens</span>
								</a>
							</li>
							
						</ul>
					</div>
					
				
					
						
				</li>

				<li class="main-nav-item">
					<a class="main-nav-link main-nav-sub-menu-toggle" href="javascript:;">Practice Areas</a>

					<!-- Megamenu -->
					<div class="main-nav-sub-menu main-nav-megamenu">
						<ul class="main-nav-megamenu-col main-nav-megamenu-col-3">
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/aviation-accidents/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-aviation-accidents.svg" alt="Aviation Accidents icon">
									<span>Aviation Accidents</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/birth-injuries/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-birth-injuries.svg" alt="baby icon">
									<span>Birth Injuries</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/boy-scouts-abuse/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-boyscout-abuse.svg" alt="boy scout icon">
									<span>Boy Scouts Abuse</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/brain-injuries/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-brain-injuries.svg" alt="brain icon">
									<span>Brain Injuries</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/burn-injuries/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-burn-injuries.svg" alt="burned hand icon">
									<span>Burn Injuries</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/car-accidents/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-car-accidents.svg" alt="car crash icon">
									<span>Car Accidents</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/carbon-monoxide-poisoning/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-carbon-monoxide-poisoning.svg" alt="c o 2 icon">
									<span>Carbon Monoxide Poisoning</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/class-actions/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-class-actions.svg" alt="pen and paper icon">
									<span>Class Actions</span>
								</a>
							</li>
						</ul>
						<ul class="main-nav-megamenu-col main-nav-megamenu-col-3">
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/construction-accidents/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-construction-accidents.svg" alt="construction worker accident icon">
									<span>Construction Accidents</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/consumer-fraud-investigations/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-consumer-fraud-investigations.svg" alt="magnifying glass icon">
									<span>Consumer Fraud Investigations</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/defective-drugs/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-defective-drugs.svg" alt="pills icon">
									<span>Defective Drugs</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/defective-medical-devices/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-defective-medical-device.svg" alt="medical device icon">
									<span>Defective Medical Devices</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/defective-products/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-defective-products.svg" alt="goggle icon">
									<span>Defective Products</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/dog-bites/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-dog-bites.svg" alt="dog icon">
									<span>Dog Bites</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/employment-law/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-employment-law.svg" alt="suitcase icon">
									<span>Employment Law</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/insurance-claims/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-insurance-claims.svg" alt="pen and paper icon">
									<span>Insurance Claims</span>
								</a>
							</li>
						</ul>
						<ul class="main-nav-megamenu-col main-nav-megamenu-col-3">
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/maritime-law/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-maritime-law.svg" alt="ship icon">
									<span>Maritime Law</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/medical-malpractice/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-medical-malpractice.svg" alt="doctor icon">
									<span>Medical Malpractice</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/mesothelioma/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-mesothelioma.svg" alt="lungs icon">
									<span>Mesothelioma</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/motorcycle-accidents/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-motorcycle-accidents.svg" alt="motorcycle icon">
									<span>Motorcycle Accidents</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/nursing-home-abuse/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-nursing-home-abuse.svg" alt="nurse icon">
									<span>Nursing Home Abuse</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/personal-injury/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-personal-injury.svg" alt="injured arm icon">
									<span>Personal Injury</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/product-liability/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-product-liability.svg" alt="camera icon">
									<span>Product Liability</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/securities-litigation/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-securities-litigation.svg" alt="vault icon">
									<span>Securities Litigation</span>
								</a>
							</li>
						</ul>
						<ul class="main-nav-megamenu-col main-nav-megamenu-col-3">
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/slip-fall/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-slip-and-fall.svg" alt="person slipping icon">
									<span>Slip &amp; Fall</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/spinal-cord-injuries/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-spinal-cord-injuries.svg" alt="spinal cord icon">
									<span>Spinal Cord Injuries</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/truck-accidents/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-truck-accidents.svg" alt="truck icon">
									<span>Truck Accidents</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/veterans-benefits/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-veterans-benefit.svg" alt="medal icon">
									<span>Veteran's Benefits</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/wind-or-flood-damage/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-wind-or-flood-damage.svg" alt="house icon">
									<span>Wind or Flood Damage</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/whistleblower-claims/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-whistleblower.svg" alt="whistle icon">
									<span>Whistleblower Claims</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/workers-compensation/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-workers-compensation.svg" alt="worker icon">
									<span>Workers' Compensation</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/wrongful-death/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-wrongful-death.svg" alt="sad icon">
									<span>Wrongful Death</span>
								</a>
							</li>
						</ul>
					</div>

				</li>

				<li class="main-nav-item">
					<a class="main-nav-link main-nav-sub-menu-toggle" href="javascript:;">Who We Are</a>
					<!-- Submenu -->
					<div class="main-nav-sub-menu">
						<ul class="main-nav-megamenu-col">
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/our-attorneys/">
									<span>Our Attorneys</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/testimonials/">
									<span>Testimonials</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/our-fees/">
									<span>Our Fees</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/blog/">
									<span>Blog</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/faq/">
									<span>FAQ</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/books-to-heal/">
									<span>Books To Heal</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/careers/">
									<span>Careers</span>
								</a>
							</li>
						</ul>
					</div>
				</li>

				<li class="main-nav-item"><a class="main-nav-link" href="">Results</a></li>

				<li class="main-nav-item">
					<a class="main-nav-link main-nav-sub-menu-toggle" href="javascript:;">Class Actions</a>
					<!-- Submenu -->
					<div class="main-nav-sub-menu">
						<ul class="main-nav-megamenu-col">
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/defective-drugs/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-defective-drugs.svg" alt="">
									<span>Defective Drugs</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/defective-medical-devices/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-defective-medical-device.svg" alt="">
									<span>Defective Medical Devices</span>
								</a>
							</li>
							<li class="main-nav-sub-menu-item">
								<a class="main-nav-sub-menu-link" href="https://gpartnersdev.wpengine.com/practice-area/defective-products/">
									<img class="main-nav-sub-menu-icon" src="https://fortheinjured.wpengine.com/wp-content/uploads/2021/02/icon-pa-defective-products.svg" alt="">
									<span>Defective Products</span>
								</a>
							</li>
						</ul>
					</div>

				</li>

				<li class="main-nav-item"><a class="main-nav-link" href="">Easy Sign-Up</a></li>
				<li class="main-nav-item"><a class="main-nav-link" href="">Contact Us</a></li>
				<li class="main-nav-item"><a class="main-nav-link" href="">Español</a></li>
			</ul>

		</div>

	</div>

</div>

<!-- This section is not needed -->
<section>
	<h1 style="text-align: center; margin-top: 60px; margin-bottom: 0; color: #c7c7c7; font-weight: 400; font-size: 40px; line-height:1">Resize me to preview mobile functionality</h1>
	<p style="text-align: center; margin-top: 60px; color: #a7a7a7; font-weight: 400; font-size: 18px">I don't have a window.resize event yet, so please refresh after resizing to a mobile viewport to enable the mobile dropdown accordion sub-menu</p>
</section>
              
            
!

CSS

              
                $primary: #12223d !default; // Navy Blue
$blue-500: #0a4d87 !default; // Medium Blue
$blue-100: #ccd2d8 !default; // Light Blue
$body-color: #495057 !default; // Gray
$yellow: #f2e946 !default; // yellow

* {
	box-sizing: border-box;
}

body {
	font-family: "Roboto Condensed", sans-serif;
	background-color: #e7e7e7;
}

.main-nav {
	background-color: $primary;
	z-index: 499;

	&-links-list {
		list-style: none;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0;
		margin: 0;
	}

	@media (max-width: 991px) {
		// display: none;
		width: 260px;
		position: fixed;
		right: 0;
		top: 0;
		height: 100vh;
		max-height: 100vh;
		transition: 0.4s cubic-bezier(0, 0, 0.2, 1);
		overflow-y: scroll;
		overflow-x: hidden;
		right: -260px;

		&-links-list {
			flex-direction: column;
			justify-content: flex-start;
		}
	}

	&-container {
		position: relative;
		max-width: 1280px;
		margin-left: auto;
		margin-right: auto;
	}

	&-item,
	&-link {
		display: flex;
		flex: 1 0 auto;

		@media (max-width: 991px) {
			width: 100%;
		}
	}

	&-item {
		@media (max-width: 991px) {
			flex-direction: column;
			border: 1px solid rgba(0, 0, 0, 0.15);
		}
	}

	&-link {
		color: white;
		font-size: 14px;
		text-decoration: none;
		height: 60px;
		align-items: center;
		justify-content: center;
		padding: 0 8px;
		text-transform: uppercase;

		&:hover {
			color: $yellow;

			+ .main-nav-sub-menu {
				opacity: 1;
				visibility: visible;
				z-index: 600;
			}
		}

		@media (max-width: 991px) {
			justify-content: flex-start;
			padding-left: 16px;
			padding-right: 16px;
		}
	}

	// .main-nav-sub-menu
	&-sub-menu {
		position: absolute;
		z-index: 500;
		background-color: white;
		display: flex;
		justify-content: space-between;
		top: 100%;
		border-radius: 10px;
		padding: 16px;
		box-shadow: 0 10px 20px 0px rgb(0 0 0 / 25%);
		visibility: hidden;
		opacity: 0;
		transition: 0.3s ease-in-out;
		overflow: hidden;

		@media (min-width: 992px) {
			min-width: 250px;
		}

		@media (max-width: 991px) {
			flex-direction: column;
			position: relative;
			display: none;
			border-radius: 0;
			padding: 0;
			
			// .main-nav-sub-menu-toggle-on
			&-toggle-on {
				visibility: visible;
				opacity: 1;
				display: block;
				transition: 0.3s ease-in-out;
				box-sizing: content-box;
				padding: 0;
			}
		}
		
		// .main-nav-sub-menu:hover
		&:hover,
		&:focus,
		&:active {
			opacity: 1;
			visibility: visible;
			z-index: 600;
		}
	
		// .main-nav-sub-menu-toggle
		&-toggle {

			&::after {
				content: "";
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 6px 4px 0 4px;
				border-color: rgb(255 255 255 / 54%) transparent transparent transparent;
				transition: 0.5s;
				margin-left: 8px;
			}

			&.rotate-arrow::after {
				transform: rotate(180deg);
			}
			
			@media (max-width: 991px) {
				justify-content: space-between;
				margin-left: 0;
			}
		}
		
		// .main-nav-sub-menu-item
		&-item {
			font-size: 16px;
		}
		
		// .main-nav-sub-menu-link
		&-link {
			display: flex;
			align-items: center;
			padding: 8px;
			text-decoration: none;
			color: $body-color;
			transition: 0.3s;
			border-radius: 4px;
			
			@media(max-width: 991px) {
				padding: 8px 16px;
				border-radius: 0;
			}

			&:hover {
				color: $blue-500;
				background-color: $blue-100;
			}
		}
		
		// .main-nav-sub-menu-icon
		&-icon {
			height: 24px;
			margin-right: 8px;
		}
		
		&:not(.main-nav-sub-menu-toggle-on) {
			@media (max-width: 991px) {
				display: none;
			}
		}
	}

	&-megamenu {
		left: 0;
		right: 0;

		&-col {
			list-style: none;
			padding: 0;
			flex: 1 0 auto;
		}

		&-col-3 {
			flex: 0 0 25%;

			// @media (max-width: 991px) {
			// 	flex: 1 0 100%;
			// }
		}
	}

	// .main-nav-mobile
	&-mobile {
		display: flex;
		justify-content: space-between;
		height: 54px;
		background-color: $primary;

		@media (min-width: 992px) {
			display: none;
		}

		&-logo {
			height: 36px;

			@media (max-width: 321px) {
				height: 28px;
			}
		}

		&-toggle-left,
		&-toggle-center,
		&-toggle-right,
		&-toggle-right a {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		&-toggle-center a {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		&-toggle-right a {
			color: white;
			padding: 12px;
			display: block;
		}
		
		&-toggle-right svg,
		&-toggle-right img{
			// width: 40px;
			height: 24px;
		}

		&-fix-overflow {
			overflow: hidden;
			height: 100vh;
		}

		&.main-nav-bg-overlay::after {
			position: fixed;
			width: 100%;
			height: 99999px;
			content: "";
			top: 0;
			left: 0;
			opacity: 0.5;
			background: black;
			cursor: pointer;
			z-index: 9;
		}
	}
}

.offcanvas-open {
	right: 0;
}

.hamburger {
	padding: 8px;
	display: inline-block;
	cursor: pointer;
	transition-property: opacity, filter;
	transition-duration: 0.15s;
	transition-timing-function: linear;
	font: inherit;
	color: inherit;
	text-transform: none;
	background-color: transparent;
	border: 0;
	margin: 0;
	overflow: visible;
	z-index: 200;
}

.hamburger:hover {
	opacity: 0.9;
}

.hamburger.is-active:hover {
	opacity: 0.9;
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
	background-color: white;
}

.hamburger-box {
	width: 24px;
	height: 24px;
	display: inline-block;
	position: relative;
}

.hamburger-inner {
	display: block;
	top: 50%;
	margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
	width: 24px;
	height: 2px;
	background-color: white;
	border-radius: 20px;
	position: absolute;
	transition-property: transform;
	transition-duration: 0.15s;
	transition-timing-function: ease;
}
.hamburger-inner::before,
.hamburger-inner::after {
	content: "";
	display: block;
}
.hamburger-inner::before {
	top: -8px;
}
.hamburger-inner::after {
	bottom: -8px;
}

/*
   * Collapse
   */
.hamburger--collapse .hamburger-inner {
	top: auto;
	bottom: 0;
	transition-duration: 0.13s;
	transition-delay: 0.13s;
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse .hamburger-inner::after {
	top: -16px;
	transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
		opacity 0.1s linear;
}

.hamburger--collapse .hamburger-inner::before {
	transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1),
		transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse.is-active .hamburger-inner {
	transform: translate3d(0, -10px, 0) rotate(-45deg);
	transition-delay: 0.22s;
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	bottom: -1px;
}
.hamburger--collapse.is-active .hamburger-inner::after {
	top: 0;
	opacity: 0;
	transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
		opacity 0.1s 0.22s linear;
}
.hamburger--collapse.is-active .hamburger-inner::before {
	top: 0;
	transform: rotate(-90deg);
	transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333),
		transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

              
            
!

JS

              
                document.addEventListener("DOMContentLoaded", function() {
	var hamburger = document.querySelector(".hamburger");
	var offCanvasMenu = document.querySelector(".main-nav");
	var mobileNavBar = document.querySelector(".main-nav-mobile");
	
	//-------------------------------------------------------------------
	// Hamburger toggle offcanvas menu
	
	hamburger.addEventListener("click", function () {
		// Toggle class "is-active"
		hamburger.classList.toggle("is-active");
		// Toggle OffCanvas Menu
		offCanvasMenu.classList.toggle("offcanvas-open");
		// Toggle Background Overlay
		mobileNavBar.classList.toggle('main-nav-bg-overlay');
		// Fix <html> overflow when mobile menu is open
		document.body.classList.toggle('main-nav-mobile-fix-overflow');
	});
	
	//-------------------------------------------------------------------
	// Close OffCanvas when tapping outside
	
	document.body.addEventListener('click', function(e){
		// Array of classes we don't want the event to manipulate (li, a, main-nav, etc)
		const classNames = [
			'main-nav',
			'main-nav-item', 
			'main-nav-link', 
			'main-nav-sub-menu-item', 
			'main-nav-sub-menu-link', 
			'is-active',
			'hamburger',
			'hamburger-box',
			'hamburger-inner',
		];
		// If .main-nav (offCanvasMenu) has a class of .offcanvas-open
		if (offCanvasMenu.classList.contains('offcanvas-open')) {
			// And if the element does not have one of these classes (see array)
			if (! classNames.some(className => e.target.classList.contains(className))) {
				// Remove background overlay, close offcanvas and reset hamburger
				mobileNavBar.classList.remove('main-nav-bg-overlay');
				offCanvasMenu.classList.remove("offcanvas-open");
				hamburger.classList.remove("is-active");
				// console.log(e.target);
			}
		}
	});
	
	//-------------------------------------------------------------------
	// Mobile Menu Toggle Links Accordion
	
	var submenuToggle = document.querySelectorAll(".main-nav-sub-menu-toggle");
	
	if (window.matchMedia('(max-width: 991px)').matches) {
		for (var i = 0; i < submenuToggle.length; i++) {
			submenuToggle[i].addEventListener('click', function (event) {
				event.preventDefault;
				// 180 degree rotation of the arrow on click
				this.classList.toggle('rotate-arrow');
				// Target the sub-menu (go to parent > find 1st child with specified class)
				var subMenu = this.parentNode.getElementsByClassName('main-nav-sub-menu')[0];
				// If it doesn't have the class I need...
				if (!subMenu.classList.contains('main-nav-sub-menu-toggle-on')) {
					/// ... add the class I need.
					subMenu.classList.add('main-nav-sub-menu-toggle-on');
					// Let's make sure the submenu has its default height
					subMenu.style.height = 'auto';
					// Then, store this submenu height in a variable...
					var height = subMenu.clientHeight + 'px';
					// ... to set the height to 0
					subMenu.style.height = '0px';
					// .. so we wait a little bit
					setTimeout(function() {
						// ... to set the height from 0 to the calculated value stored in the height variable
						// ... With CSS transitions, the height will animate
						subMenu.style.height = height;
					}, 0);
				} else {
					// If closing, bring it's height back to 0...
					subMenu.style.height = '0px';
					// ... and remove the class after the element has finished the CSS transition
					subMenu.addEventListener('transitionend', function() {
						subMenu.classList.remove('main-nav-sub-menu-toggle-on');
					}, {
						once: true
					});
				}
			});
		}
	}
});
              
            
!
999px

Console