How to set the "Mobile Menu" to be sticky when scrolling (logo scrolling normally)

Hello :slight_smile:

How can I set “Mobile Menu” to be sticky?

Now I have code from this post:

in Custom JavaScript plugin I have:

 jQuery (function ($) {

   $ ( '. Btn-menu'). Text ("MENU");

 });

and in Additional CSS:

 .btn-menu {
   width: auto;
 }

I would like to set it so that on mobile devices the “Mobile Menu” would remain attached to the top of the screen (now it is under the Logo and both move up and disappear from the field of view). I would not like the “Logo” to be attached in the same way, it may disappear, I just want the “Mobile Menu” to remain visible after scrolling.

Thank you in advance for support :slight_smile:

Hello there,

Try adding this extra custom CSS code:

    @media only screen and (max-width: 1024px) {
      .site-header.float-header {
        position: fixed !important;
      }
    } 

Regards,
Kharis

1 Like

Perfect - Thank you :slight_smile:

I’ve added some basic style changes and I’m happy:

@media only screen and (max-width: 1024px) {
      .site-header.float-header {
        position: fixed !important;
				background-color: #FFFFFF;
				padding-bottom: 20px;
				}
	    .float-header .site-logo {
      max-height: 60px;
	    padding: 0px;
				} 
    } 
.btn-menu {
  width: auto;
  margin-top: -30px; 	
}

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis