Responsive menu header logo hidden behind menu options - CSS

Encontré este menú receptivo bastante fresco en el sitio web de Codepen: https://codepen.io/SergioDaroca/pen/bgKPqY

Pero cuando lo he añadido a mi sitio, el título de encabezado "Rhino" está centralizado detrás de las opciones de menú al ver el menú completo de escritorio. Funciona bien para el menú de hamburguesas. Aquí puede ver que no funciona en mi sitio: https://bozzaradio.co.uk/default.aspx

¿Hay forma de ajustar el código para arreglar esto? He intentado cambiar de posición:relative etc pero mi conocimiento de CSS no es tan grande.

    
    

         Logo

CSS

/* 
  RESETS
/*-----------------------------------------------------*/
html{
  box-sizing: border-box;
  width:100%;height:100%;
  margin:0;padding:0;
  font-family: Lato, sans-serif;
}
body{
  width:100%;height:100%;margin:0;padding:0;
  border:1px dotted gray;
}
*, *:before, *:after {
    box-sizing: inherit;
}
header ul, menu, dir {
    margin-block-end: 0;
    margin-block-start: 0;
    padding-inline-start: 0;
    -webkit-padding-start: 0;
}
a{text-decoration:none;color:rgba(255,102,0,1);}

/* 
  LAYOUT
/*-----------------------------------------------------*/
:root{
    --maxSiteWidth:1080px;
}
main{
  margin: 90px auto;padding:1em;
}
header {
    display: flex;
    flex-flow: row nowrap;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255,1);
    height: 80px;
    border-bottom: rgba(44,44,44,.6) 1px solid;
    margin: 0 auto 0 auto;
}
.logo {
    height:80px;
    flex: 0 0 200px;
    font-size:42px;display:block;text-align:center;align-items:center;justify- 
content:center;margin:14px auto;
}

/*  
   MAIN MENU MOBILE FIRST
/*-------------------------------------------------------*/
nav{flex:1 auto;}
.mainMenu{
  position: fixed;top:0;left: 0;right: 0;
  margin:80px auto 0 auto;
    height:90%;/**hack for opera mini**/
    height:calc(100% - 79px);
  width:100%;
  flex-flow:column nowrap;
  align-content:stretch;
  display:none;
}
.mainMenu a{
  flex:1;
  width:100%;
  justify-content: center;
  align-items:center;
  font-size:26px;
  display:flex;
  background:transparent;
}
.mainMenu>li {
    flex:1;
  display:flex;
  flex-flow:column nowrap;
  align-items:center;
  text-align:center;
    border-bottom: 1px dotted rgba(22,22,22,.3);
  background:rgba(255,255,255,1);
}

/*  
  MAIN MENU TOGGLE BUTTON
/*-----------------------------------------------------*/
/*Hide checkbox*/
#show-menu-input-checkbox{
    display: none;
}
/*Show menu when invisible checkbox is checked*/
#show-menu-input-checkbox:checked ~ .mainMenu{
    display: flex;
}
#main-menu-toggler {
  width:80px;
  height:80px;
  position:fixed;
  top:0;
  right:0;
  padding:24px;
  display:flex;
  justify-content:center;align-items:center;
}
#main-menu-toggler-icon:after,
#main-menu-toggler-icon:before {
content: "";
position: absolute;
left: 0;
top: -9px;
}
#main-menu-toggler-icon:after{
top: 9px;
}
#main-menu-toggler-icon {
position: relative;
display: block;
}
#main-menu-toggler-icon,
#main-menu-toggler-icon:after,
#main-menu-toggler-icon:before {
width: 100%;
height: 5px;
background-color:rgba(22,22,22,1);
transition: all 0.3s;
backface-visibility: hidden;
border-radius: 2px;
}
/* on menu activation */
#show-menu-input-checkbox:checked ~ #main-menu-toggler>#main-menu-toggler-icon {
background-color: transparent;
}
#show-menu-input-checkbox:checked ~ #main-menu-toggler>#main-menu-toggler-icon:before {
transform: rotate(45deg) translate(5px, 5px);
}
#show-menu-input-checkbox:checked ~ #main-menu-toggler>#main-menu-toggler-icon:after {
transform: rotate(-45deg) translate(7px, -8px);
}

/*
  MAIN MENU ON WIDE SCREENS
/*----------------------------------------------------------*/
@media only screen and (min-width: 1080px) {
    header,.mainMenu,nav,main,article,footer{max-width:var(--maxSiteWidth);}
    /**HIDE THE MENU TOGGLER**/
    #main-menu-toggler{display:none;}
    /**APPLY HORIZONTAL BAR STYLING TO THE MAIN MENU**/
    .mainMenu{
    position: initial;
    display:flex;
    flex-flow:row nowrap;
    flex-direction: row;
    justify-content: flex-end;
    height:80px;
    margin-top:0;
  }
    .mainMenu>li {
    flex:1 0 auto;
    border-bottom:none;
    background:transparent;
    align-items:initial;
  }
    .mainMenu a{
    font-size:22px;
    width:auto;
    justify-content: flex-end;
    padding-left:16px;
  }
}

Pregunta hecha hace 3 años, 4 meses, 29 días - Por devninjax

3 Respuestas: