test
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.