create a button in the header of the mobile menu in the middle of the logo and the menu accordion

Question

good evening everybody, I would like to implement a button in the mobile menu in the header between the middle of the logo and the middle of the menu accordion (explanation in the image that I will send)

I tried to do it but rarely it only works for me on a cell phone in the mobile version but in the others it is not also possible to see in the css search engine of google chrome, when you put the responsive versions but in other devices it does not appear

this is the link of the page: https://bildschulebuchs.ch/aktuelles/

here the image

This is the code that I used but it didn't help me

el html este:

<

div id="masthead" class="navbar menu-primary menu-light submenu-dark style-light-original menu-with-logo">
  <div class="mobile-additional-icons">
    <a class="efectobotonn" href="https://bildschulebuchs.ch/kurse/">Kurse</a>
    </div></div>

this is the css used:

@media screen and (max-width: 890px){
.efectobotonn {
    width: 90px;
    height: 50px;
    position: relative;
    margin: auto;
    left:-50px!important;
    top:65px!important;
    font-size: 24px!important;
    font-family: 'Roboto Mono', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    border-radius: 10px;
    border: 2px solid #000;
    padding: 5px;
    border-style: dashed;
    color:#000!important;
    z-index:100;
    background-color: #fff;
}
}

I don't know if I have to call a php function to make it work, but I don't know which one, and it works on some devices but not on others

If you could help me I would appreciate it very much

Answer 1

It looks like the following code, the z-index works differently on mobile:

#masthead:not(.menu-absolute){
z-index: 2000;
position: relative;
}

I'd suggest you put the HTML for that button in the same line as the logo and mobile menu then hide/show it when you need to.

It would placed under this HTML

<div id="logo-container-mobile" class="col-lg-0 logo-container middle">