Jamison's Blog

Nav Menu’s are annoying, that’s why I like Single App Pages. That said, I almost finished coding mine. I will update the code once it works but for now my messy stylish build completely ontop of customizer –

/*mobile menu */
@media only screen and (max-width: 1200px){
	@font-face {
    font-family: Fontello;  
  src:url(https://ganstapenguin.com/wp-content/themes/ganstapenguin2021/fonts/fontello.woff);  
    font-weight: normal;  
}
	
	
	.demo-icon{
		font-size:normal;
	font-family: fontello;	
		font-style:normal;
		font-size:1.8rem;
		position:fixed;
		color:white;
		top:1rem;
		right:2rem;
	}
	.topnav{
		position:fixed !important;
		display:none;
		top:0px;
		height:100vh;
		text-align:left;
		margin:0px
		z-index:999;
		}
	#mobile-menu{
		margin:0px;
		padding-left:0px;
		border:solid 5px white;
		align:left;
		overflow:hidden;		
	}
	 .blocks-gallery-grid{
		display:flex;
		flex-direction:column;
	}
.blocks-gallery-grid .blocks-gallery-image, .blocks-gallery-grid .blocks-gallery-item, .wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item{width:100%;
	z-index:1;
	border:5px solid var(--pink);
	}
	
	
	.topnav li {
		margin:opx;
		text-align:left;
		padding:0px;
		border-bottom:solid 5px white;
	}
		.topnav li:last-child {
		border:none;
		
	list-style-type: none;  
	color:var(--pink);
	 padding:5px 0px;
	 font-size:1.2rem;
	 font-weight:bold; 
	}
	.topnav ol:hover{
		background-color:var(--white);
	}
	
	/* Style the navigation menu */
	
	.menu-main-navigator-container, #site-navigation{
		display:none;
	}
	
.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

/* Style navigation menu links */
.topnav a {
  color: white;
	background-color:var(--blue);
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}
	.topnav a:hover {
	color:var(--pink);
	text-decoration-style:wavy;
	text-decoration-color:rgba(255, 231, 76, .6);
	text-underline-offset: 5px;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: var(--pink);
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: var(--white);
		color:var(--pink);
		text-decoration:underline;
		text-decoration-style:wavy;
		text-decoration-color:rgba(56, 97, 140, .6);
		text-decoration-thickness:3px;
		text-decoration-lenth:20px;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #04AA6D;
  color: white;
}
	
}
@media only screen and (min-width: 1200px){
	.topnav{
		display:none;}
	.demo-icon{display:none;}

}
	

/* intial colors */

:root {
	--black:rgb(37, 35, 35);
	--blue:rgb(56, 97, 140);
	--white:rgb(255, 255, 255);
	--yellow:rgb(255, 231, 76);
	--pink:rgb(255, 89, 100);
}


/*intial text and links*/
body{
	background-color:var(--black);
	color:var(--white);
}
body a{
	color:var(--pink);
	margin:0px 5px;
		color:var(--blue);
	text-decoration:none;	
}
body a:hover{
	color:var(--pink);
	text-decoration:underline; 
	text-decoration-color:rgba(255, 231, 76, .6);
	text-decoration-style:wavy;	text-decoration-		thickness: .13em;
	text-underline-offset: 5px;
	
	
}

body li a{
	color:var(--white);
	
}
body li:hover{
	
}
body li a:hover{
	color:var(--pink);

	

	
}
body a:visited{
	color:var(--pink);
	text-decoration:wavy;
	text-decoration-color:var(--white);
	text-shadow:2px 13px 24px;	

}
h1,h2,h3,h4,h5,h6{
	color:var(--blue);
}
.site-main{
	max-width:75vw;
	margin:auto;
}

.menu-main-navigator-container{
background-color: var(--blue);
}
.menu-menu-2-container{
	width:100%;
	background-color:var(--blue);
}
#primary-menu{
	display:flex; 
	width:50%;	
	justify-content:center;
	
}	
#primary-menu li{	
		margin:auto;
	
}
 #primary-menu li a {	
	 color:var(--white);
	 padding:20px 20px;
	 font-size:1.2rem;
	 font-weight:bold; 
	 text-decoration-color:rgba(255, 231, 76, .6);
	text-decoration-style:wavy;	text-decoration-		thickness: .13em;
	text-underline-offset: 5px;

}
#primary-menu li a:hover {	
		color:var(--pink);
	 padding:20px 0px;
	 font-size:1.2rem;
	 font-weight:bold; 
	 background-color: var(--white);
	 padding:20px 25px;
	text-decoration:underline;
	text-decoration-color:var(--blue);
	text-decoration-style:wavy;
	text-decoration-thickness: .13em;
	text-decoration-color:rgba(255, 231, 76, .6);
	text-underline-offset: 5px;
	
}

/* end initial stuff */


/* custom spans */
.blocks-gallery-grid .blocks-gallery-image, .blocks-gallery-grid .blocks-gallery-item, .wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item{
	z-index:1;
	border:5px solid var(--pink);
	}
	

pre{
	background-color:black;
	color: var(--blue);
}

We’ll work out the backs, like for example the button has to be clicked twice to open the menu.