We are currently working on new site for our company, LaLuz Visuals Budapest using your X theme along with Revolution Slider on main page. The current setting is ‘use slider above masthead’ and there is an offset configured in Revolution Slider (slider layout: full screen; offset size: 75px – same at height of navbar). This gives us full screen slider with navbar at the bottom of the page. It looks great and works fine. However we just noticed that in mobile view the hamburger menu opens but does not scroll the page up automatically so basically it is difficult for people to notice the hamburger menu is open.

We have noticed the page automatically scrolls up in mobile view after pressing the hamburger menu on your page (http://theme.co/x/). We would like to achieve same behavior in our site.
You can find our ‘work in progress’ main page here:
http://uj.laluz.hu/wp/?page_id=72

Please advise what other setting needs to be configured in order to get the behavior we want.
Many thanks.

LaLuz Visuals Budapest

Please add the following CSS under Customize -> Custom -> CSS :

@media (max-width:979px){
.x-navbar {
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
}

Hope it helps.

After sending my first reply above I just realised the behaviour is fine until I stay on the same main page. When I navigate to blog or portfolio page my menu appears at the bottom of the mobile view page but basically what I want it to appear at the top of the page. I just want the menu to appear at the bottom of the main page below slider until user scrolls up. After that the menu should stick to the top of the page.

Please advise.
Thanks.

Regards,
LaLuz Visuals Budapest

Please change your code to :

@media (max-width:979px){
.home .x-navbar {
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
}

Hope that helps.

Thanks for your prompt reply.
It’s getting there. 🙂
On the positive side the new code limits now (due to the .home part) the behavior to the home page.
Although there is something strange. When I press the ‘Scroll Bottom Anchor’ on my home page (in the slider in mobile view) the page scrolls up as expected (so the navbar goes to the top of the window) however the logo and the hamburger menu icon disappear.

http://uj.laluz.hu/wp

If I manually scroll further on the page the navbar goes out of the view. Can I somehow get it stuck to the top of the page? Of course this request gets valid once the visibility of the logo and the hamburger menu is resolved.

Thanks.
Regards,
LaLuz Visuals Budapest

Please try using this:

@media (max-width: 979px) {
    .x-navbar-fixed-top {
        position: fixed !important;
        top: 0 !important;
        bottom: auto !important
    }
}

Hope this helps. 🙂

Thank you.

I tried the same code on my site…. However, it does not seem to work properly. I have tried several variations of the code.

When on mobile, the menu sometimes appears in the screen (as intended) but sometimes opens up downwards, so the user doesn’t actually see it unless scrolling down.

What I am trying to achieve is:
1. when first opening the site, the slider should appear with the navbar below.
2. When the user then clicks the hamburger menu, the menu should open up in the visible screen (as per this topic) and ideally, the slider should dissappear (move to the non-visible top part of the screen).

Any suggestions how to code this?

will provide URL and login credentials below.

Kind regards,

Tristan

Thanks for updating this thread!

To accomplish what you have in mind, please add the following JS code in your customizer, Appearance > Customize > Custom > Javascript

(function($){
  $('.x-btn-navbar').on('click', function(){
    $('.x-navbar').addClass('x-navbar-fixed-top');
  });
})(jQuery);

Please let us know if this works out for you.