X Pro Mobile Menu

Hi guys I was trying to setup a new menu.

Problem is I don’t know if it’s best to create a new Bar --> Container --> Element or put a new container in the same Menu bar.

Thing is I would like my collapse menu to be on the left and my BAR won’t allowed it.
But if I create a new bar when I scroll down I get this strange gap.

Which I recon is the other BAR even if is hidden for this specific device.

Any help on how to approach this?

thanks

Alek

Hi There,

The gap is most likely because you have two sticky bars, this is a bug which we are working on the solution.

You can hide the container just or the element just instead.

If you need further help please provide your URL

Thanks!

So same bar different container?

This is how is it now

So I have to use the same BAR instead? And add a extra container in there?
Is a pretty big bug you have there, how can you add a mobile manu if sticky menus don’t work?

cheers
Alek

Hi,

Thats how I usually make mobile menu with PRO.

I take the Bar that contains Inline Navigation and hide Inline Navigation element for tablets mobile devices.
Next I add Navigation Collapsed element into this very same Container where my Inline Navigation element is and the hide element for laptops and PC-s.

If the Inline Menu was aligned to the left (container settings), then you have your mobile burger on the left too.

Thanks man that’s exactly the problem of this post.
If I use the same bar I can align the burger to the left or right.
Seems quite a bug :slight_smile:

But you have the Inline Navigation set to left and you want the Burger also to be on the left?

Hey Alek,

To avoid the gap issue, you should include your menu inside one bar. I’m not sure what exactly is causing your Navigation Collapsed to not go to the left when you’ve included it in the bar with the rest of your elements. That setup is possible out of the box. Please see this demo. If I’m wrong, would you mind giving us WP Admin access in a Secure Note and the name of your bar so we could see the actual setup?

Thanks.

Hi there,

@MrK, that’s not a bug, that’s just how alignment works. It’s like having a text and a button and you assign text-align:left; to its container, then both text and the button will be aligned to left. Except that you can use float styling for the button

In the header, it uses flex layout and all child elements will only follow a single layout. If it’s layout is set to columns starting in the middle, then all elements will stay inline and centered (no exception with the element).

That’s why you’ll need two containers and that will be your two columns. The first container layout will start on left, the second container should start on right. You can see that implemented if you’ll create a sample header from standard templates.

Thanks!

The bug is the “hidden container” that keeps a space holder.
This seems a beta release to me honestly.

Anyway basically there’s no way to do it, right?
If I use just one container the alignment is the same and if I use 2 I get the hidden space bug due to the sticky.
I’ll do it without X Pro then thanks

Also why you changed to this forum is so bad when you need to quote some parts of the conversation

Hey @MrK,

Yes, the invisible bar that is taking up space is a bug.

To your question:

I showed a demo setup in my previous response. May I know if you’ve tested the setup?

Thanks.

Hi Christian,
so as I said in my post my approach was: bar --> container --> menu

If I add another bar we have the sticky menu “bug”
But if I try your approach so:
bar -->
container A --> MENU
Container B --> Mobile menu

The Mobile menu won’t go to the left cause obviously the BAR is set to centre.
Maybe I’m missing something so here is access to my admin:

thanks

Hi there,

I added a Test Page and duplicated the current header and changed the header to the one which I think I understand you want.

If you have any questions I will be happy to help:

Thanks guys but this is the first solution I tried and it doesn’t work due to the “sticky menu bug” (that’s the reason why I created this post)

As you can see here your menu has the same issue:

So the answer is no? I can’t have the mobile menu aligned to the left if the main menu is inside a container centred?

cheers
K

Hey @MrK,

It is achievable.

I’ve saved the setup in the test header and here’s how https://youtu.be/Hu3iozUm90E

Hope that helps.

1 Like

Thanks Christian now I get it works great

Glad to hear it,

Cheers!

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