Docs

[laluz]

Hi Themeco Support Team,

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

[Christopher]

Hi there,

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.

[laluz]

Hi Themeco Support Team,
Many thanks for your prompt reply.
I’ve added the above code to my custom CSS and I’ve got the requested behaviour. Now the page scroll automatically up in mobile view when pressing the hamburger menu icon.
Great support, thanks again.
Best regards,
LaLuz Visuals Budapest

[laluz]

Hi Themeco Support Team,

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

[Christopher]

Hi there,

Please change your code to :

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

Hope that helps.

[laluz]

Hi Themeco Support Team,

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

[Zeshan]

Hi LaLus,

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.

[Tristan A]

Hi support,

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

[Tristan A]

This reply has been marked as private.

[Rue Nel]

Hello There,

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.

[Tristan A]

Thanks! That worked

[Zeshan]

You’re welcome! 🙂

[Tristan A]

Hi support staff,

My apologies in advance for making this complicated.

I have two issues:

1. On my homepage, there is an above masthead slider. The menu sits below it. With the above code I wanted to achieve that on mobile the hamburger menu would move upward, because if downward, the user does not see it. It seems unfortunately, that this works quite erratically now?

2. On my blog posts, the menu sits in front the slider and the menu is transparent. You can quickly see from the URL’s that I will provide below, what the look is I am building. It will speak for itself. When the user scrolls down to the post, the menu changes color and is no longer transparent (thanks again for helping set that up!).

Whilst this looks really great on big screens, the hamburger menu is now also transparent on mobile screens. When it then opens up, it opens up with a transparant color, across the slider. This makes it impossible to read. Is there a way to customize the JS code to make sure the menu on large screens is transparent until the user scrolls down and then turns white (which the code does now) but that if it is a hamburger menu, it is always white??

Thanks!! And again… I apologize for making things difficult.

[Tristan A]

This reply has been marked as private.

[Christopher]

HI there,

Upon checking your site you didn’t add the code completely, find the following selector and update it to :

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

Add this as well :

@media (max-width:979px){
.x-navbar.x-navbar-fixed-top {
    background-color: #fff !Important;
}
}

Hope it helps.

[Author]

Posts