隐藏在菜单选项后面的响应菜单头徽标-CSS

Question

我在Codepen网站上发现了这个非常酷的响应菜单：https://Codepen.io/sergiodaroca/pen/bgkpqy

但当我将其添加到我的站点时，当查看完整的桌面菜单时，标题“Rhino”会集中在菜单选项后面。它适用于汉堡包菜单。在这里，您可以看到它在我的站点上不起作用：https://bozzaradio.co.uk/default.aspx

我有办法调整代码来解决这个问题吗？我试过改变位置：相对等，但我的CSS知识不是很好。

    <link href='//fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
    <header class="header">
        <!-- Logo -->
        <a class="nlogo" href="https://www.savetherhino.org" title=" font-family: Lato, sans-serif">RHINO</a>
        <nav><!-- MAIN MENU <div class="navicon">&#9776;</div> <div class="navicon">?</div> -->
            <input type="checkbox" id="show-menu-input-checkbox" role="button">
            <label for="show-menu-input-checkbox" id="main-menu-toggler" class="flex-container flex-vcenter flex-hcenter"><div id="main-menu-toggler-icon" class="flex-grow"></div></label>
            <ul class="mainMenu accordion" id="mainMenu"><li><a 
                 href="https://bozzaradio.co.uk/default.aspx" >Home</a></li><li><a 
                 href="https://bozzaradio.co.uk/djs.aspx" >DJ's</a></li><li><a 
                 href="https://en.wikipedia.org/wiki/Douglas_Adams" target="_blank">Shedule</a></li><li><a 
                 href="https://archive.org/details/internetarcade" target="_blank">News</a></li><li><a 
                 href="https://archive.org/details/prelinger" target="_blank">Advertise</a></li><li><a 
                 href="https://archive.org/details/prelinger" target="_blank">Contact us</a></li>
            </ul>
        </nav>
    </header>

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;
  }
}

Answer 1

想通了..我在CSS中有另一个“NAV”与之冲突。