How can I set the mobile menu to "Sticky"

Hello there Kharis,

Thank you for all hints and tips you sent me or I found here in the forum.
I have a query now about the mobile menu header (the bar on top of the page where the icon wit 3 stripes appears):

It does sroll up with the pages when I scroll (not only on mobile devices9.
Can I make it “sticky” (it does not scroll with the page)?
If yes, how? Some tweak in the Customizer? Or CSS?

Thank you very much in advance for your information.

Best regards
Winfried

Hi Winfried,

You’re welcome. Glad to hear you found our support forum helpful to you.

Please try adding the below extra CSS code to Appearance > Customize > Additional CSS from your site dashboard.


@media only screen and (max-width:1024px) {
  
  #masthead.site-header{
    position: fixed !important;
  }
  
  .site {
    margin-top: 140px;
  }
  
}

As the header will cover the top part of your site, you’ll add margin top to the .site element – adjust its value to meet your need.

Regards,
Kharis

Hello
I used your CSS it is working great on 1024px but on smaller ones the slider needs more room still so I wrote also the same thing but for 768px
Is it a correct way to do it like this:

    @media only screen and (max-width:1024px) {
      
      #masthead.site-header{
        position: fixed !important;
      }
      
      .site {
        margin-top: 140px;
      }
      
    }

    @media only screen and (max-width:768px) {
      
      #masthead.site-header{
        position: fixed !important;
      }
      
      .site {
        margin-top: 180px;
      }
      
    }
@media only screen and (max-width:1024px) {

  #masthead.site-header{
    position: fixed !important;
  }

  .site {
    margin-top: 140px;
  }

}

It alone should be working on smaller screen as well. Probably you should have cleared your device history/cache to load the recent changes applied on your site.

https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis

Thank you. I went forward and back with different css for this I ended up using this:

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

    .header-wrap .container{
    text-align: left;
        margin-bottom: -20px;
        margin-top: -15px;
    }


    .header-wrap .btn-menu{
    float: right;
    margin-right: 15px;
    margin-top: -50px;
    }
      .header-wrap .col-md-8 {
        padding: 0;
        margin-top: -15px;
    }

    }

The extra css I only have it for landscape because is for having a smaller logo header menu bar and more space since it horizontally align the logo and the menu and squeeze the hight of the bar. With out it on landscape on a phone the header took to much space, more then half the screen so there was too little space for the webpage info

The only issue I have is that is not super smooth.
I used one CSS for this fixed menu effect that just kept the menu fixed and when scrolling the page the menu stayed all the time fixed.
But it does not have a smaller menu heder on landscape and when I tried to squeeze everything with that one the menu when clicked appeared with a big gap detached from the header, not a nice look IMHO

With this css I pasted above everything looks ok but when you scroll the page the menu goes up a little, depending on screen size and orientation, it will go half way up or full up and then it will pop up back fixed to the top of the screen.
Is a little bit annoying. I would like it will behave as the simpler css mod
I don’t know if maybe I wrote something wrong, maybe some bracket is missing and that is causing this strange behavior.
Not sure
Any Ideas?

This is the CSS that is super smooth

    .roll-button {
     margin-left: 7px;
     
     padding: 8px 16px;
    }

    .text-slider {
        margin-bottom: 80px !important;
    }   /* affects CTA buttons placement */

    @media only screen and (max-width: 768px) and (orientation:portrait) {
    .text-slider {
        margin-bottom: 45px !important;
      } } /* affects CTA buttons placement mobile */

    .text-slider .maintitle, .text-slider .subtitle{
     color:#ffffff;
        text-shadow: 2px 2px #000;
    }

    .slide-inner {
        top: 60% !important;
    } } /* affects slider text position */

    @media only screen and (max-width: 768px) {
    .slide-inner {
        top: 60% !important;
    } } /* affects slider text position on mobile */

     @media only screen and (max-width:1024px) and (orientation:portrait)
    {
      
      #masthead.site-header{
        position: fixed !important;
      }
      
      .site {
        margin-top: 140px;
      }
      
    }

    @media only screen and (max-width:768px) and (orientation:portrait)
    {
      
      #masthead.site-header{
        position: fixed !important;
      }
        
      .site {
        margin-top: 180px;
         }
      }

    .site-header.float-header {
        background-color: rgba(48, 48, 48, 0.71); 
    }  

But I had to use it only on Portrait because on Landscape the header menu takes to much space as I explained above.

I need to have merge them in some way. I need to get the Landscape menu heder size and logo and menu placement of the CSS that is not smooth.

Hello there,

Thank you for getting back!

Please share a link to your site, so I can have a closer look and assist you a bit easier.

Regards,
Kharis

I ended up with this:

@media only screen and (max-width:1024px)
{
#masthead.site-header{
position: fixed !important;
}
.site {
margin-top: 100px;
}
}

.site-header.float-header {
background-color: rgba(48, 48, 48, 0.71);
}

.header-wrap .container{
text-align: left;
margin-bottom: -8px;
margin-top: -8px;
}

.header-wrap .btn-menu{
float: right;
margin-right: 35px;
margin-top: -50px;
}
.header-wrap .col-md-8 {
padding: 1px;
margin-top: -17px;
}

}

I like it a lot but…
My only problem now is:

  1. on 10 inch tablet on portrait the menu lines disappear for some reason. So the menu ends up inaccessible.

  2. on phone the menu heder get very well fix on landscape but on portrait it moves a little big up when scrolling so the upper part gets a little bit cut, but if I add more margin to fix that then in landscape it begins to get to big and take away space for the website. In Landscape it takes more than third of the screen real state. Maybe if everything, logo image and heder space could shrink a little for phones on landscape.

Temporary website link is this one https://websicl.000webhostapp.com/
Thank you

Ok one issue got resolved, the one were the menu container or heder moved up a little when scrolling on phones on portrait, now is completely fixed. I am not sure why

I did change .site {
margin-top: 100px; up 110px to get more room for the slider picture and I cleared cache, maybe one of those thing cleaned the problem.

So the only things I need to fix is
Get back the menu on Tablet on Portrait orientation.
And find a way to get the heder and logo a little smaller on phones when in Landscape. So it takes only 1/4 of the screen instead of more than a third.
Any ideas?
Thank you

Hello there,

Please try adding this extra CSS code:

    @media only screen and (max-width: 780px) {
      .site-logo {
        max-height: 70px;
      }
      .sydney-hero-area {
        margin-top: -16px;
      }
    } 

Regards,
Kharis

Hello

I added that but nothing happen. The logo size and header on mobile on landscape continue to have the exact dimensions as before and on tablet on portrait mode the menu does not show up

This is the code I have for the slider:

    .roll-button {
     margin-left: 7px;
     
     padding: 8px 16px;
    }

    .text-slider {
        margin-bottom: 80px !important;
    }   /* affects CTA buttons placement */

    @media only screen and (max-width: 768px) and (orientation:portrait) {
    .text-slider {
        margin-bottom: 45px !important;
      } } /* affects CTA buttons placement mobile */

    .text-slider .maintitle, .text-slider .subtitle{
     color:#ffffff;
        text-shadow: 2px 2px #000;
    }

    .slide-inner {
        top: 60% !important;
    } } /* affects slider text position */

    @media only screen and (max-width: 768px) {
    .slide-inner {
        top: 60% !important;
    } } /* affects slider text position on mobile */

     @media only screen and (max-width:1024px) 
    {
        #masthead.site-header{
        position: fixed !important;
      }
        .site {
        margin-top: 110px;
      }
      }

    .site-header.float-header {
        background-color: rgba(48, 48, 48, 0.71); 
    }  


    .header-wrap .container{
    text-align: left;
        margin-bottom: -8px;
        margin-top: -8px;
    } 


    .header-wrap .btn-menu{
    float: right;
    margin-right: 35px;
    margin-top: -50px;
    }
      .header-wrap .col-md-8 {
       padding: 1px;
    margin-top: -17px;
    }

    }

    @media only screen and (max-width: 780px) {
          .site-logo {
            max-height: 70px;
          }
          .sydney-hero-area {
            margin-top: -16px;
          }
        } /* affects logo and header on landscape mobiles */

I attach pictures.
The one from tablet seems Landscape but is Portrait I cropped the lower part.
The phone one is Lanscape
Temporary website link is this one https://websicl.000webhostapp.com/

Thank you

Problem%20on%20Tablet%20Portrait

Hello there,

Please try this code:

    @media only screen and (max-width: 1024px) {
      .site-header.float-header {
        padding: 20px 0;
      }
      .site-logo {
        max-height: 70px;
      }
      .sydney-hero-area {
        margin-top: -16px;
      }
    }

Regards,
Kharis

Should I just add it or should I replace something?
I have made so many CSS changes that I am starting to get confused :confused:

Hello there,

Sorry for being unclear. You shouldn’t have to remove anything. Just add that code right after the below code:

    @media only screen and (max-width: 780px) {
      .site-logo {
        max-height: 70px;
      }
      .sydney-hero-area {
        margin-top: -16px;
      }
    } 

Regards,
Kharis

OK
i add it but, it is shrinking the logo and the menu header on tablets on Portrait.
and the Menu still disappears.

The thing is that I do not need this effect on Tablets, since they have more than enough room.

I need this shrinking effect on mobiles and on Landscape mode.

With the code I have right now is not affecting mobiles on any orientation, only Tablets on Portrait and the menu on Tablets on Portrait is still missing.

I tried to modify the CSS you gave me, to try to get the effect needed, but It didn’t work. I played by changing 1024px to 768px added " and (orientation: landscape)" but probably didn’t do it correctly, or I am missing something.

I paste here all the css I have for the Header slider area.
I hope you can help me figure it out.

thank you

    .roll-button {
     margin-left: 7px;
     
     padding: 8px 16px;
    }

    .text-slider {
        margin-bottom: 80px !important;
    }   /* affects CTA buttons placement */

    @media only screen and (max-width: 768px) and (orientation:portrait) {
    .text-slider {
        margin-bottom: 45px !important;
      } } /* affects CTA buttons placement mobile */

    .text-slider .maintitle, .text-slider .subtitle{
     color:#ffffff;
        text-shadow: 2px 2px #000;
    }

    .slide-inner {
        top: 60% !important;
    } } /* affects slider text position */

    @media only screen and (max-width: 768px) {
    .slide-inner {
        top: 60% !important;
    } } /* affects slider text position on mobile */

     @media only screen and (max-width:1024px) 
    {
        #masthead.site-header{
        position: fixed !important;
      }
        .site {
        margin-top: 110px;
      }
      }

    .site-header.float-header {
        background-color: rgba(48, 48, 48, 0.71); 
    }  


    .header-wrap .container{
    text-align: left;
        margin-bottom: -8px;
        margin-top: -8px;
    } 


    .header-wrap .btn-menu{
    float: right;
    margin-right: 35px;
    margin-top: -50px;
    }
      .header-wrap .col-md-8 {
       padding: 1px;
    margin-top: -17px;
    }

    }


     @media only screen and (max-width: 780px) {
          .site-logo {
            max-height: 70px;
          }
          .sydney-hero-area {
            margin-top: -16px;
          }
        } 

       @media only screen and (max-width: 1024px) {
          .site-header.float-header {
            padding: 20px 0;
          }
          .site-logo {
            max-height: 70px;
          }
          .sydney-hero-area {
            margin-top: -16px;
          }
        } /* affects logo and header mobiles */

Hello there,

Please try adding this extra CSS code:

    @media only screen and (max-width: 1024px) {
      
      .header-wrap .btn-menu {
        margin-top: 30px;
      }  
      
      #mainnav-mobi {
        margin-top: 50px;
      }
      
    }

    @media only screen and (max-width: 767px) {
     
      .header-wrap .btn-menu {
        margin-top: -50px;
      }  
      
      #mainnav-mobi {
        margin-top: 20px;
      }  
      
    } 

Regards,
Kharis

Thank you Kharis
Now I can see the menu on tablets on Portrait orientation.
So that got fixed :slight_smile:

But The logo and menu header is shrinking on Tablets on portrait mode. I don’t need that behavior on Tablets on any orientation. I need that behavior on Phones and on Landscape mode, that is where the page screen real state ends up being to small. That is the last thing I need to get working.

I just discovered a new issue I am using polylang, Main page is in Spanish, but for some reason the latest CSS I have paste from this thread are not working on the english version of the webpage :confused: So the Menu in the english version on tablets on portrait is still not showing up but on the Spanish version it got fixed :confused:

To recap I paste here again the CSS mods I have for the Header sliding part to be sure there is no mods conflicting with each other:

    .roll-button {
     margin-left: 7px;
     
     padding: 8px 16px;
    }

    .text-slider {
        margin-bottom: 80px !important;
    }   /* affects CTA buttons placement */

    @media only screen and (max-width: 768px) and (orientation:portrait) {
    .text-slider {
        margin-bottom: 45px !important;
      } } /* affects CTA buttons placement mobile */

    .text-slider .maintitle, .text-slider .subtitle{
     color:#ffffff;
        text-shadow: 2px 2px #000;
    }

    .slide-inner {
        top: 60% !important;
    } } /* affects slider text position */

    @media only screen and (max-width: 768px) {
    .slide-inner {
        top: 60% !important;
    } } /* affects slider text position on mobile */

     @media only screen and (max-width:1024px) 
    {
        #masthead.site-header{
        position: fixed !important;
      }
        .site {
        margin-top: 110px;
      }
      }

    .site-header.float-header {
        background-color: rgba(48, 48, 48, 0.71); 
    }  


    .header-wrap .container{
    text-align: left;
        margin-bottom: -8px;
        margin-top: -8px;
    } 


    .header-wrap .btn-menu{
    float: right;
    margin-right: 35px;
    margin-top: -50px;
    }
      .header-wrap .col-md-8 {
       padding: 1px;
    margin-top: -17px;
    }

    }


     @media only screen and (max-width: 780px) {
          .site-logo {
            max-height: 70px;
          }
          .sydney-hero-area {
            margin-top: -16px;
          }
        } 

       @media only screen and (max-width: 1024px) {
          .site-header.float-header {
            padding: 20px 0;
          }
          .site-logo {
            max-height: 70px;
          }
          .sydney-hero-area {
            margin-top: -16px;
          }
        }


      @media only screen and (max-width: 1024px) {
          
          .header-wrap .btn-menu {
            margin-top: 30px;
          }  
          
          #mainnav-mobi {
            margin-top: 50px;
          }
          
        }

        @media only screen and (max-width: 767px) {
         
          .header-wrap .btn-menu {
            margin-top: -50px;
          }  
          
          #mainnav-mobi {
            margin-top: 20px;
          }  
          
        }

Try adding this CSS code:

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .site-header.float-header {
    padding: 20px 0;
  }
}

For specific CSS issue with language plugin, please post it in a separate topic and avoid posting multiple questions at once. Doing so, we’ll be easier to assist you. And also it’ll be easier to follow by others.

Regards,
Kharis

ok.
I added this but is doing nothing in any way.

I opened a thread for the CSS issue with Polylang here Polylang other Language not responding to CSS changes

What’s your device resolution?

https://www.whatismyscreenresolution.com/

Try clearing cache/history in your mobile web browser, and try again.

Regards,
Kharis

Yes I did that, I even used a browser that I never use.

the tablet is 2560 x 1600 píxeles
The phone is 1080x1920 pixels