Sticky Header with Equal Spacing Menu Items

Word Count: 864

Header Structure

The header menu has 6 menu items and occupies the whole width of the available space as shown in the diagram. The browser will or will not have a scrollbar depends on the device type.

The menu item is set as a flex item within a flex container.

w = (100vw – L – sb) / 6.

Javascript is used to get the scrollbar width (sb) and set as a variable “–scrollbar-width” in style.css.

The w is obtained using the CSS calc( ) function.

Enable Sticky

Add the ‘onscroll’ event to the window object.

If the page scroll is larger than the top offset of the header, the class ‘desk-sticky’ (or ‘mob-sticky’) is added to the header, otherwise, ‘desk-sticky’ (or ‘mob-sticky’) is removed. For mobile, the class ‘mob-sticky-effected’ is also added (or removed) to handle the new position of the toggled menu.

The header will lost its position when it’s position is changed from relative to absolute. This creates a sudden jump of the page content. To eliminate this effect, JS is used to add padding top to #content.

JS (sticky effect)

<script>
window.onload = () => {

		/**
		Purpose: Enable Sticky Header
		*/
		//get desktop and mobile main headers
		var deskHeader = document.querySelector('#ast-desktop-header .ast-main-header-wrap');
		var mobHeader = document.querySelector('#ast-mobile-header .ast-main-header-wrap');
		var mobHeaderContent = document.querySelector('#ast-mobile-header .ast-mobile-header-content');

		//get headers offset
		var deskHeadOffset = deskHeader.offsetTop;
		var mobHeadOffset = mobHeader.offsetTop;

		window.onscroll = () => addStickyClass();

		function addStickyClass() {

			if (window.pageYOffset > deskHeadOffset) {
				deskHeader.classList.add('desk-sticky');
			} else {
				deskHeader.classList.remove('desk-sticky');
			}

			if (window.pageYOffset > mobHeadOffset) {
				mobHeader.classList.add('mob-sticky');

				//position the toggled menu
				mobHeaderContent.classList.add('mob-sticky-effected');

			} else {
				mobHeader.classList.remove('mob-sticky');
				mobHeaderContent.classList.remove('mob-sticky-effected');

			}

			// eliminate #content jump during switching
			var a = document.body.classList.contains('ast-desktop');
			var b = (deskHeader.offsetTop <= 0) ? true : false;
			var c = document.body.classList.contains('ast-header-break-point');
			var d = (mobHeader.offsetTop <= 0) ? true : false;

			var pdTop = '80px';
			if (document.body.clientWidth <= 1500) pdTop = '60px';
			if (document.body.clientWidth <= 1250) pdTop = '42.9px';
			if (document.body.clientWidth <= 1023) pdTop = '80px';

			if ((a && b) || (c && d)) {
				document.getElementById('content').style.paddingTop = pdTop;
			} else {
				document.getElementById('content').style.paddingTop = '0';
			}

		} // addStickyClass()

		/**
		End: Enable Sticky Header
		*/

}
</script>

JS (set a default value to variable ‘–scrollbar-width’ )

<script>
	/* Set a scrollbar default width at the beginning of page load to improve nav menu UX */
	jQuery('body').css('--scrollbar-width', '17px');

</script>

JS (adjust the variable ‘–scrollbar-width’)

<script>
	/* The var --scrollbar-width is used in CSS for the top nav menu. It is used to calculate the menu item width in relation to screen width.	
	*/

	jQuery('body').css('--scrollbar-width',  (window.innerWidth - document.documentElement.clientWidth) + 'px');

	jQuery(window).resize(function(){
		jQuery('body').css('--scrollbar-width',  (window.innerWidth - document.documentElement.clientWidth) + 'px');
	});

</script>

CSS

/******  Header ********/


  	/** Sticky Main Header  **/

.desk-sticky, 
.mob-sticky {
	position: fixed;
	top: 0;
	width: 100%;
}

.mob-sticky-effected {
	position: fixed;
	top: 80px;
	width: 100%;
}


  	/** End: Sticky Main Header  **/


#masthead .ast-container {
	padding-left: 0;
	padding-right: 0;
}

#masthead .ast-site-identity {
	padding: 0;
}

#masthead .ast-main-header-wrap .ast-builder-grid-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	column-gap: 0;
	border-bottom: 1px solid #E0DCE1;
}

#masthead .ast-builder-html-element p {
	font-family: Aileron;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.71;
	color: #2B3990;
	padding: 0 20px;
}

.cu-top-header-left {
	padding-left: 2vw;
}
	
.cu-top-header-separator {
	padding: 0 2vw 0 20px;
}

#masthead .site-logo-img {
	padding-right: 0;
}

#masthead .ast-main-header-wrap .site-header-primary-section-right {
	width: 100%;
	justify-content: flex-start;
}

.ast-primary-header-bar .main-header-menu > .menu-item {
	line-height: 1 !important;
	border: 1px solid #E0DCE1;
	border-bottom: none;
	padding: 0 6px;
	width: calc((100vw - 466px - var(--scrollbar-width)) / 6); 	
	height: 80px;
}

.ast-primary-header-bar .main-header-menu > .menu-item > .sub-menu {
	width: calc((100vw - 466px - var(--scrollbar-width)) / 6 );
	border: 1px solid #E0DCE1; 
	text-align: center;	
	margin-left: -1px;
}

.ast-primary-header-bar .main-header-menu > .menu-item > .sub-menu li a {
	border: none !important;
	border-bottom: 1px solid #DFDCE0 !important;
}

.ast-primary-header-bar .main-header-menu > .menu-item > .sub-menu li:last-child a {
	border-bottom: none !important;
}


.ast-primary-header-bar .main-header-menu > .menu-item:hover {
	background-color: #2B3990;
}

.ast-primary-header-bar .main-header-menu > .menu-item > a.menu-link {
	padding: 0;	
	justify-content: center;
	text-align: center;
	text-transform: uppercase;
}


.ast-primary-header-bar .main-header-menu > .menu-item:hover > a.menu-link {
	color: #fff;
}

.ast-primary-header-bar .main-header-menu > .menu-item:last-child > a.menu-link {
	text-transform: capitalize;
}


.ast-primary-header-bar .sub-menu > .menu-item {
	background-color: #2B3990;
}

.ast-primary-header-bar .sub-menu > .menu-item > a.menu-link {
	text-transform: uppercase;
	color: #fff;
}

.cu-menuItem-aptmt {
	background-color: #83ADC2;	
}

.cu-menuItem-aptmt a {
	color: #fff;
}


@media (max-width: 1500px) {
	
	.ast-primary-header-bar .site-primary-header-wrap {
		min-height: 10px;
	}
	
	header .custom-logo-link img {
		max-width: 350px;
	}
	
	.ast-primary-header-bar .main-header-menu > .menu-item {
		width: calc((100vw - 350px - var(--scrollbar-width)) / 6);
		height: 60px;
	}
	
	.ast-primary-header-bar .main-header-menu > .menu-item > .sub-menu {
		width: calc((100vw - 350px - var(--scrollbar-width)) / 6 );
	}
	
	
} /* @1500  */


@media (max-width: 1250px) {
	
	header .custom-logo-link img {
		max-width: 250px;
	}
	
	.ast-primary-header-bar .main-header-menu > .menu-item {
		width: calc((100vw - 250px - var(--scrollbar-width)) / 6);
		height: 42.9px;
	}	

	.ast-primary-header-bar .main-header-menu > .menu-item .sub-menu {
		width: calc((100vw - 250px - var(--scrollbar-width)) / 6);
	}	
	
	.ast-primary-header-bar .main-header-menu > .menu-item > a.menu-link {
		font-size: 13px;
	}

	.ast-primary-header-bar .sub-menu > .menu-item > a.menu-link {
		font-size: 13px;
	}
	
} /* @1250  */


@media (max-width: 1023px) {
	#masthead .ast-main-header-wrap .ast-builder-grid-row {
		display: grid;
		justify-content: unset;
	}
	
	#masthead .ast-main-header-wrap .site-header-primary-section-right {
		justify-content: flex-end;
	}
		
	#masthead .ast-builder-html-element p { 
		padding: 0;	
	}
	
	#masthead .ast-mobile-header-wrap .ast-primary-header-bar {
		padding-left: 0;
	}
	
	header .custom-logo-link img {
		max-width: 466px;
	}

	.ast-primary-header-bar .main-header-menu > .menu-item > a.menu-link {
		text-transform: capitalize;
	}

	.ast-builder-menu-mobile .main-navigation .menu-item.menu-item-has-children > .ast-menu-toggle {
		top: 14px;
	}
	

	#masthead .ast-primary-header-bar {
		border-bottom: 1px solid #E0DCE1;
	}


	#masthead .ast-main-header-wrap .ast-builder-grid-row {
		border-bottom: none;
	}

	.ast-mobile-header-wrap li a {
		font-size: 16px;
	}
	
	.cu-top-header-left {
		padding-left: 0;
	}
	
	.ast-mobile-header-wrap .wp-block-image {
		margin: 0;
	}

	.ast-mobile-header-wrap .site-header-above-section-right .header-widget-area {
		padding: 0 0 0 10px;
	}


}  /* @1023  */

@media (max-width: 370px) {
	#masthead .ast-builder-html-element p {
		font-size: 12px !important;		
	}
	
	.ast-header-break-point .custom-logo-link img {
		max-width: 233px;
	}
	
}  /* @370  */


/****** End: Header ********/