Add horizontal menu to after header


(Blu McCormick) #1

Here is a menu I added to the after header of the forum.

Desktop View:

Mobile Landscape

Mobile Portrait unexpanded

Mobile Portrait expanded

It is programmed so that the links open in new pages and turn red when hovered over. The forum link always stays red so that when you go back to that page it is active.

Here is the code for it exactly as you see it:

COMMON CSS

@media (min-width: 900px) {
	.menu {
		font-size: 1.25em;
	}
}
.menu {
	padding: 0.5em;
	min-height: 2em;
}
.menu > ul {
	transition: max-height 0.25s linear;
}
.menu ul {
	padding: 0;
	text-align: center;
}
.menu li {
	transition: visibility 0.25s linear;
	display: inline-block;
	padding: 0.5em 1em;
	position: relative;
}

#bar a,
#bar a:visited {
	color: #484848;
}

#bar a:hover,
#bar a:active,
#bar a.forum-link {
	color: #c30000;
}
@media (max-width: 650px) {
	.menu > ul {
		max-height: 0;
		overflow: hidden;
		margin: 0 auto;
	}
	.menu li {
		visibility: hidden;
		display: block;
		padding: 0.5em 0;
	}
	.menu .navbar-handle {
		display: block;
	}
	#navbar-checkbox:checked + .menu ul {
		max-height: 300px;
	}
	#navbar-checkbox:checked + .menu li {
		visibility: visible;
	}
}

.menu ul,
.menu li,
nav#bar ul,
.menu {
	margin: 0;
}

nav#bar,
nav#bar:before {
	background: white;
}

.navbar-checkbox,
.navbar-handle {
	display: none;
}

.navbar-handle {
	cursor: pointer;
	position: relative;
	font-size: 45px;
	padding: 0.5em 0;
	text-align: center;
}

.menu .navbar-handle {
	font-size: 1em;
	text-transform: uppercase;
	font-weight: bold;
	margin: 0.25em auto;
	padding: 0;
}

#main-outlet {
	padding-top: 120px;
}

nav#bar {
	position: relative;
	margin-bottom: 1em;
	transform: translate(-50%, 0);
	left: 50%;
	z-index: 999;
	top: -60px;
	width: 100vw;
	padding-top: 0;
}

nav#bar:before {
	content: “”;
	position: absolute;
	width: 250vw;
	height: 100%;
	top: 0;
	left: -125vw;
	box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.25);
}

.d-header {
	box-shadow: none;
}

MOBILE CSS

nav#bar {
    top: -65px;
}

COMMON AFTER HEADER

Trouble shooting of the code for this menu took place in the following links:

Axil’s menu inspired my template:

Footnote
I am not a coder and may not be able to answer coding questions but wanted to share this menu for others to enjoy. Thank you to everyone who contributed to this code.

@lll
@Simon_Cossar
@codinghorror
@Mittineague
@axil