Statische balk

V248-09

Voeg een statische menu balk toe aan de website. Dit is een extra menu die los staat van het menu boven in. Als er te veel items getoont worden dan dat er plek voor is dan kan deze gescrolt worden. Standaard is er plek voor 4 menu items, mochten dit minder zijn kan het gemakkelijk in de opmaak aangepast worden door de bouwer. Het menu is net als alle andere menu's volledig aan te passen door de beheerder.

Hoe te gebruiken?

In de config bestand zet "navbar.static.primary" op het menu ID die je wilt weergeven en pas "navbar.static.style" aan naar "bar". Laadt vervolgs onderstaande CSS in om van start te gaan.

Voorvertoning

Alvast beginnen met een basis opmaak?

CSS
Kopiëren/* Place on the bottom of the screen. */
.navbar-static-bar {
	position: fixed;
	display: block;
	z-index: 1039;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: var(--secondary);
	color: white;

	box-shadow: 0 -0.5rem 0.5rem rgba(0, 0, 0, 0.15);

	--static-bar-width: 50%;
	--static-bar-spacing: 0.2rem;
}

.navbar-static-bar:has(.navlist-nav .nav-item:nth-child(3)) {
	--static-bar-width: 33%;
}

.navbar-static-bar:has(.navlist-nav .nav-item:nth-child(4)) {
	--static-bar-width: 25%;
}

/* Make it a horizontally scrollable list. */
.navbar-static-bar .navlist-nav {
	list-style-type: none;
	padding: 0;
	margin: 0;
	overflow-x: auto;
}

/* Hide scrollbar. */
.navbar-static-bar .navlist-nav::-webkit-scrollbar {
	display: none;
}

.navbar-static-bar .nav-item {
	position: relative;
	display: inline-block;
	width: calc(var(--static-bar-width) - calc(3 * var(--static-bar-spacing)));
	margin-left: var(--static-bar-spacing);
	margin-right: var(--static-bar-spacing);
	vertical-align: middle;
}

/* Place a line in between each item. */
.navbar-static-bar .nav-item:after {
	content: "";
	position: absolute;
	display: block;
	width: 1px;
	top: 20%;
	bottom: 20%;
	left: calc(100% + var(--static-bar-spacing) + 1px);

	background-color: var(--secondary-light);
}

.navbar-static-bar .nav-item:last-child:after {
	display: none;
}

/* Place icon and text vertical. */
.navbar-static-bar .nav-link {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0.75rem;
	color: inherit;
}

.navbar-static-bar .nav-icon {
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
}

.navbar-static-bar .nav-indentation {
	display: none;
}

.navbar-static-bar .nav-title {
	font-size: 0.75rem;
	line-height: 0.75rem;
	font-weight: 300;
	text-align: center;
}

/* Highlight when selected. */
.navbar-static-bar .nav-link:active,
.navbar-static-bar .nav-link:hover,
.navbar-static-bar .nav-link:focus {
	text-decoration: none;
	color: inherit;
	background-color: var(--secondary-light);
}

/* Move asside for the admin bar. */
@media screen and (max-width: 991px) {
	[data-logged="true"] .navbar-static-bar {
		margin-bottom: 3.125rem;
	}
}

/* Offset height below the footer for the navigation bar. */
.navbar-static-bar-offset {
	height: 4.625rem;
}

/* Format the toggler if displayed inside the static bar. */
.navbar-static-bar button.navbar-toggler {
	color: inherit;
	text-align: center;
	width: 100%;
}

/* Style Whappie link. */
.navbar-static-bar .nav-link[href="$whappie_open"] .nav-icon {
	background-color: var(--whatsapp);
	color: white;
	/* color: var(--whatsapp); */
	border-radius: 999px;
	aspect-ratio: 1/1;
	text-align: center;
}

/* Hide Whappie button. */
/* #whappe-button {
	display: none !important;
} */