Mobile menu on blog

grover_c · 2017-03-02 08:15:03

Hello,

My main website uses a One Column layout but I'm using a separate template with a Two Column layout for my Wordpress blog. The problem I'm having is that on my main site the mobile menu is on the left side, which is what I want, but the blog mobile menu is on the right. I want the blog widgets to be on the right so I have selected Columns Layout to be right. I can't figure out how to keep that the same and have my mobile menu on the left so it matches the rest of my site.

Any ideas?

rod barbee · 2017-03-02 08:35:49

I don't think that's possible. You're best option is to either move the mobile menu to the right in your one-column template or move the tray column to the left in your WordPress template.

grover_c · 2017-03-03 01:31:43

Is there a reason we don't have that control?

Matthew · 2017-03-03 14:44:43

So you want the righthand column to slide in from the left side? The reason we don't offer that control is because it makes not a lot of sense. At best, it would make the designer UI confusing and unintuitive.

Your options to achieve consistency are:

1) For your one-column template, set the "Columns Layout" option to "Right" so that your mobile menu matches the blog.

2) Use custom CSS to reposition the menu trigger.

body[data-layout~="1col"] .page__toggle__trigger[for="page__toggle__T1"] {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1
  -ms-flex-order: 1;
  order: 1;
}

grover_c · 2017-03-04 06:33:46

Maybe I didn't explain my question clearly.

My main website uses a one column layout. When on a mobile phone, for example, the mobile menu is on the left, which I like, per the image below.
reference 1
Main Site mobile ref image

I have elected to use a two column layout for my blog with the main blog on the left and the 2nd column (widgets, etc) on the right (although not visible on my phone per the image below). For website continuity I would like the mobile menu to continue to be on the left side. Why does the menu have to be on the right side just because I have elected to position column two on the right side?
reference 2
Mobile Blog ref image

I'm not sure why my question/request does not make sense.

Last edited by grover_c (2017-03-04 06:40:59)

rod barbee · 2017-03-04 07:25:26

have you tried Matt's custom css? On my test site, it moved the mobile menu icon from the right hand side to the left.
When clicking it, however, the menu and sidebar widget stuff still slides in from the right, following the page design.

grover_c · 2017-03-04 07:32:02

I will try it, but why is the menu tied to column two? What am I missing or not understanding? BTW, I'm not using the slide out option so I never see the slide.

Last edited by grover_c (2017-03-04 07:33:12)

rod barbee · 2017-03-04 07:34:15

one little correction. If you want this to affect your blog page, then it looks like the css needs to be altered slightly for the 2 column layout

body[data-layout~="2col"] .page__toggle__trigger[for="page__toggle__T1"] {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1
  -ms-flex-order: 1;
  order: 1;
}

rod barbee · 2017-03-04 07:36:38

My guess for the reason the menu icon is tied to the same side that the column is on is because it's just good design.
Just a guess though.

grover_c · 2017-03-04 08:06:27

Thanks, Rod.

I still don't understand why being tied to column two is good design and column one is not. But maybe I'm the only one.

grover_c · 2017-03-04 08:13:10

I tried the code and it didn't do what I was looking for. I don't want the actual menu, or the menu trigger, to ever be on the right side, always the left, no matter if I'm using my two column blog or my one column website. Is this possible?

rod barbee · 2017-03-04 08:56:32

The code will move the menu trigger to the left hand side of the mobile view on a page with a two-column layout. The actual trays will appear on the right since that's how your page is designed.

I don't know if it's possible to also have the tray appear on the left side on mobile devices when the page has been designed for the tray to be on the right.

It might be possible with custom css. Probe the selectors with the browser's inspector and see what 's there. It might just be a matter of changing the data-position value

rod barbee · 2017-03-04 09:09:07

The css controlling those trays looks pretty daunting. Moving a tray on a mobile device to the opposite side of what it was intended is beyond my css skills.

grover_c · 2017-03-04 09:41:25

So, because I've chosen a two column layout and selected right in order to put the widgets on the right side of my blog, it means I've designed the menu to be on the right as well? I don't understand why the menu must be tied to the column orientation. Shouldn't you be able to choose the menu side regardless of which column is on the left and which on the right? How is that bad design or unintuitive for a user if the menu is always in the same place.

Thanks

Last edited by grover_c (2017-03-04 09:41:57)

rod barbee · 2017-03-04 09:49:49

That's a question for Matt to answer.

remember, the mobile navigation goes in the tray and the tray goes where you've assigned it, either on the left or the right. What you're requesting sounds simple, but after a few years of being around this stuff, I've seen that things that seem simple rarely are.

But maybe Matt has has a solution.

grover_c · 2017-03-04 10:23:46

I didn't fully realize the mobile menu was in a tray, although I was starting to suspect it based on the seemingly interchangeable use of the word menu and tray in this thread. I know understand the issue a bit more.

Still it would be very helpful to have a separate selector for "Columns Layout" and the mobile menu layout. Or at last a custom css option.

Thanks again.

Matthew · 2017-03-04 15:14:35

The menu is in the tray, wherever that tray is assigned (left or right). Tray01 is used in the one and two-column layouts; Tray02 joins the fray for the three-column layout. Regardless of alignment, Tray01 always appears to the left of Tray02.

grover_c · 2017-03-05 00:41:43

I understand now. So I guess that means that there is no way to keep my mobile menu on the left side of my main site and my blog if my blog uses a right column layout. Correct?

Last edited by grover_c (2017-03-05 00:43:03)

Matthew · 2017-03-05 01:53:54

Yep. Like I said, if you want consistency, then you'll need to switch the column location for the blog, or the Backlight templates.

Community @ The Turning Gate

#1 2017-03-02 08:15:03

Mobile menu on blog

#2 2017-03-02 08:35:49

Re: Mobile menu on blog

#3 2017-03-03 01:31:43

Re: Mobile menu on blog

#4 2017-03-03 14:44:43

Re: Mobile menu on blog

#5 2017-03-04 06:33:46

Re: Mobile menu on blog

#6 2017-03-04 07:25:26

Re: Mobile menu on blog

#7 2017-03-04 07:32:02

Re: Mobile menu on blog

#8 2017-03-04 07:34:15

Re: Mobile menu on blog

#9 2017-03-04 07:36:38

Re: Mobile menu on blog

#10 2017-03-04 08:06:27

Re: Mobile menu on blog

#11 2017-03-04 08:13:10

Re: Mobile menu on blog

#12 2017-03-04 08:56:32

Re: Mobile menu on blog

#13 2017-03-04 09:09:07

Re: Mobile menu on blog

#14 2017-03-04 09:41:25

Re: Mobile menu on blog

#15 2017-03-04 09:49:49

Re: Mobile menu on blog

#16 2017-03-04 10:23:46

Re: Mobile menu on blog

#17 2017-03-04 15:14:35

Re: Mobile menu on blog

#18 2017-03-05 00:41:43

Re: Mobile menu on blog

#19 2017-03-05 01:53:54

Re: Mobile menu on blog

Board footer