0

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 imageenter image description here

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

0

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">
3
  • I'm assuming the :not is not supported in mobile browsers
    – Ariel
    Jun 17 at 18:42
  • 1
    Thank you very much you saved my life seriously, it helped me I put the html under <div class = "mmb-container"> <div class = "mobile-additional-icons"> z the truth that it served me a lot I owe you one Jun 18 at 1:18
  • No problem. Glad to help!
    – Ariel
    Jun 18 at 14:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.