Mobile Menu (sticky) hamburger bars only

Support
#1

How can I have the mobile menu be sticky but not display the logo in the mobile header and only display the hamburger bars in that header at the right. or maybe it could have text saying MENU and or the bars?

Thanks,
Adam

#2

now I took out the css code I added to make the mobile menu sticky and now it keeps acting as though the code is still there and displays the mobile menu as sticky although I deleted that and cleared the cache on the phone. how do I get this to display without the sticky menu again. Mostly I don’t want that to happen now because the submenu items at the bottom get cut off of the view and scrolling down to see those submenu items is not working. the menu is just cut off before those. Hmmmm isn’t there a simple way to get the mobile menu to display only with the hamburger bars in the mobile header and display all the menu on the screen if the subitems extent beyond the screen display size???

Thanks,
Adam

#3

Hello Adam,

Thanks for writing in!

If you want to display the hamburger menu as sticky, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media (max-width: 979px){
  .masthead-inline .x-btn-navbar {
    display: block;
    position: fixed;
    top: 5px;
    right: 20px;
    background-color: rgba(0,0,0,0.5);
    padding: 8px;
  }
}

Please clear all your plugin caches. You might have cache feature in your server which needs flushing too. You can make use of the private browsing mode or Incognito mode and check your site again.

Please let us know how it goes.

#4

thanks, that’s not exactly like I was trying to describe. plus it isn’t functioning properly when using it if already scrolled down on any page. Isn’t there a way to use a specific logo and header height with the menu bars icon which expands(like a drop down) properly no matter where the view is scrolled down to on any page. ? and that would be specifically for the mobile view only. Then everything larger would display the normal logo and menu as currently displayed on larger screen views.

#5

so for the mobile version of the menu it would look like the attached image and be a sticky menu, and for everything else it would display as the theme has been displaying the menu as is currently.

#6

Hello @Adubs777,

Thanks for writing in!

To resolve your issue, please do the following instead:

  • Please add this JS code in the Theme Options > Global JS (http://prntscr.com/evswzb) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL Javascript
jQuery(function($) {
 $(window).scroll(function() {
   var W = $(window).width();
   if ( W < 980 ){
     if($(window).scrollTop() > 50) {
       $('.x-navbar .x-brand img').attr('src','//wishcandle.com/wp-content/uploads/2013/06/WISH-lt.png');
       $('.x-navbar').addClass('x-navbar-fixed-top');
     }else{
       $('.x-navbar').removeClass('x-navbar-fixed-top');
       $('.x-navbar .x-brand img').attr('src','//wishcandle.com/wp-content/uploads/2015/11/wish-full-logo-REV-2.png');
     }
   }
 });
});

@media (max-width: 979px){
  .x-navbar-fixed-top {
    position: fixed;
  }  

  .x-navbar-fixed-top .x-navbar-inner {
      min-height: 85px;
  }

  .x-navbar-fixed-top #x-btn-navbar {
      margin-top: 30px;
  }
}

This method will swap your image logo upon scrolling the page and the navbar will become sticky and changes its height.

Please note that custom coding is outside the scope of our support. We have given the above codes to get you started with. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

We would loved to know if this has work for you. Thank you.

#7

thanks I’ll give that a try and let you know how it works.

#8

Sure do let us know how this goes!

#9

Hello! Sorry to interupting you here I know that I didn’t create this topic, but I tried to implement this code into my website and it’s helped, could you please tell me how can I switch not just logo while scrolling but the background of header/menu and font color, and how can I make header/menu to be transparent on some pages of website? Thanks in advance.

#10

Or I should create another topic?

#11

Hello Tanya,

Thanks for writing in!

To avoid any confusion, it’s my humble request to you to create a new ticket and share the relevant details. Posting on a ticket created by a different customer create lot of confusion which slows down the response time. Please create a new ticket and one of Themeco support staff will take a look and assist you accordingly.

Thanks for understanding.

#12

I created but nobody helping me :frowning:

#13

Hi @Tanya,

Thank you for creating a separate thread. I’ve replied you on your thread https://theme.co/apex/forum/t/sticky-menu-with-changeble-background-font-color-and-logo-footer/46206/2 let’s continue with that.

Thanks!

1 Like
#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.