[AutostopowiczParticipant]

Hi
First of all this forum was very helpful in solving different theme issues I have encountered (resulting from lack of control over some of the attributes in gui, althought the X theme in general is very good). But after searching for solution of mobile menu visibility issue, I came to a point from where I can not go any further. I have tried several of code pieces – unsuccessfully.
The point is, I would like the mobile menu icon to show up (and replace standard menu) when specific screen resoultion is reached.
Sounds easy, but the code pieces I have found here and used, in my case do not work.
I would like the mobile menu to be visible on screen smaller than 900px. Please help.

[AutostopowiczParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Thanks for writing in.

I’m not really sure about your issue, but the mobile menu will always display at 979px and below. I checked that and confirmed that it’s working properly.

Perhaps what you’re referring is display mobile menu when the contain is 900px? And not the screen width is 900px?

Thanks!

[AutostopowiczParticipant]

Hi. Thanks for Your reply.

Perhaps – I did not measure the exact screen size. But I have set left and right padding for x-columns on 50px at each sides for screens smaller than 900px:

@media (max-width: 900px) {
.x-column {
padding-left: 50px !important;
padding-right: 50px !important;
}
}

And what I have observed, is that whenever I resize my web browser window to a point when the padding switches from 260px set in cornerstone to the padding mentioned above (50px) the mobile menu icon is already there. I want the icon to appear at the same moment when the padding switches 50px on left and right.
Is it possible to change those 979px You have mentioned?

[ZeshanMember]

Hi there,

Yes, if you want to change the breakpoint on which navbar mobile button appears, you can use following CSS code under Custom > CSS in the Customizer:

/* Changing Navbar Breakpoint - Mobile */
/* Replace 801px with your desired breakpoint value */

@media (min-width: 801px) {
  .x-nav-wrap.desktop,
  .x-nav-wrap.desktop {
    display: block !important;
  }

  .x-nav-wrap.mobile,
  .x-nav-wrap.mobile,
  .x-btn-navbar {
    display: none !important;
  }
}

Thank you!

[AutostopowiczParticipant]

It works perfectly – thank You!

[Prasant RaiModerator]

You are most welcome. 🙂

[AutostopowiczParticipant]

Hi again,
I got one more problem concerning mobile menu. I got single-page navigation but actually it is not single-page website – there is a second page accessible via the link in the footer. I am trying to disable the menu on that “sub-page” using css (because the single-page navigation does not work there). After few attempts I found out how to do it using the code as below, but unfortunatelly it also disables the mobile menu icon (.x-btn-navbar I assume) on the main page:

.page-id-1236 #menu-menu_1,
.x-btn-navbar, .x-nav-wrap.mobile {
display: none !important;
}

Could You please tell me, what is wrong with this piece of code?
Thanks.

[ChristianModerator]

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[AutostopowiczParticipant]

Ok, thanks. I will try, but honestly I don’t undertand this. I thought that if there is a problem/lack of options, You could help me. I am sure that You can. Besides, where elese could I use the solution? But allright, I will ask the developer. Could You please give me via private message an e-mail address to the developer (I thought You guys are part of it).

[Paul RModerator]

Hi,

You may contact one of our trusted partners

https://theme.co/x/member/custom-development/.

At the meantime you can try this.

1. Add unique ids to your sections. I can see you have added ids but it’s the same id as the one that is automatically generated by the theme. Kindly add a different one eg. mysection-1

2. Change all links in your menu with the new ids and remove http:// from them

eg. Change http://#x-section-1 with #mysection-1
Change http://#x-section-2 with #mysection-2

3. Create another menu, I can see you already have created one Menu_empty.
You can add menu items to it but you need to use absolute urls

eg. http://sprezyny-resory.pl/#mysection-1

Then activate this menu in http://sprezyny-resory.pl/nota_prawna/

Hope that helps.

[AutostopowiczParticipant]

Thank You. The method with the menu You have described works.

[Prasant RaiModerator]

You are most welcome. 🙂

[Author]

Posts