Hamburger Menu Mobile

Hello,

Have been testing a bunch of code found on this forum as I can’t have hamburger menu show on mobile for sydney.

I have tried the solution here as it worked for some: Always mobil meny
But no luck for me…

My website is: www.hbcnaturals.com / have not customized anything…

Would be wonderful if someone could help! thanks!
Nicolas.

Hello Nicolas,

It’s displaying hamburger menu on my PC.

This indicates the code works correctly. Or am I missing anything?

Regards,
Kharis

Hello Kharis,

thanks for your reply. Ok I just noticed this on my PC as I was focusing on mobile…ok I see now…and I realize that it is not I wanted to achieve. sorry for the trouble:

What I was hoping is to get a hamburger menu ONLY on the right side of my logo (that would be aligned on the left side for mobile/tablets ONLY and the usual top text menu for PC.
This burger still does not show up on mobile and this is what I was stuck on this afternoon…

I know it has been a wide spread request but somehow I am not sure anymore of which code to copy to get that. I know you do lots of magic for many…I hope you can do it for me too :slight_smile:

Thanks again! Nicolas.

Hello there,

If you feel that the code you copied doesn’t really work, you can remove it. Let me know once you’re done, then I’d like to suggest you with another code.

Regards,
Kharis

Done, I removed the custom Javascript.

I just kept a custom CSS below I saw that you gave someone else in order to align my logo on left on mobile. It works…I just need now the burger menu on mobile…

    @media only screen and (max-width: 767px){
      .site-header .col-xs-12 {
        width: 50%;
      }
    }

    .site-header{
      padding-top: 10px;
      padding-bottom: 10px;
    }

thanks much! Nicolas.

Hello Kharis,

Sorry to bother you…any tip for me to achieve the hamburger menu on mobile/tablet? I have my logo aligned on left already, so having the menu on the right would be awesome!
thnaks! Nicolas.

Try adding this CSS code:

    .btn-menu {
      color: #000;  
    }

    @media only screen and (max-width:767px){
            
      .header-wrap .container{
        text-align: left;
      }

      .header-wrap .btn-menu{
        float: right;
        margin-right: 15px;
      }  

      .header-wrap .col-md-4 {
        max-width: 90%;
        position: relative;
        z-index: 2;
      }

      .header-wrap .col-md-8 {
        margin-top: 0;       
      }        

      #mainnav-mobi {
        top: 70px;
      }
      
    }

Regards,
Kharis

Khakis…you did it again and providing awesome support and solution! Thanks so much as the code works perfectly as shown in attachments

There is one last thing if I may ask…on other individual pages than the front one I am trying to put a pictures as headers to avoid having all that « green » that you can see but when I upload a picture in the « header » spot on the WP Editor it does not come up. Is there something that overwrites this space by any chance?

Thanks again very much! Nicolas

Hello there,

That’s actually a green box that overlays the uploaded header image. To eliminate it, you could add this CSS code:

    @media only screen and (max-width: 1024px) {
      body:not(.home) .header-image .overlay {
        display: none;
      }  
    }

Regards,
Kharis

Thank you! It worked and the green is now removed as you can see. My last struggle is that I would want to have different headers for my pages (besides the front) but the same picture (the sky/clouds keeps showing as this is what I set up for my front).

I added a header picture on my page Editor (example of Contact page) but it does not show…so I guess there should be a way to force it somehow?

Thank you and this is the last thing I will bother you with as a direct email like that.

Appreciate your help. Nicolas

To enable specific header image for selected page, you can use this plugin: https://wordpress.org/plugins/unique-headers/. Once enabled, choose the image from Custom header box.

Regards,
Kharis