Custom Menus for mobile using phpplugins not working

scottfrey · 2019-02-27 04:39:53

I'm trying to implement Daniel's suggestion from this thread: http://community.theturninggate.net/vie … hp?id=9243

post #7:

I would design a dedicated menu-set for mobile that uses a simpler structure. First I would design this alternative menu in Backlight (create a new menu-set for that!), then copy the generated source code that is enclosed by the nav divs:

I've done that, and added the following to my phpplugins;

// mobile navigation
function pallet01_top () {
  echo '
<nav class="nav nav_v">

<div id="page__pallet__T1" class="page__column page__pallet" data-position="T1">
	<div class="content clearfix">


<nav class="nav nav_v">
 

<ul class="primary-menu menu mouseable"><li class="menu-item"><a href="/portfolio/"><b>Portfolios</b></a></li><li class="menu-item"><a href="/collections/">Places</a></li><li class="menu-item"><a href="/events/">Events</a></li><li class="menu-item"><a href="/about/">About</a></li><li class="menu-item"><a href="/backlight/search/">Search</a></li></ul>
 
</nav>

	</div>
</div>

</nav>
  ';

   return true;
} // END /**/

However, I've done something wrong, as I still get the pages' normal navigation.

ALSO:

And then obviously you need to revert your site back to the original menu and disable the mobile menu.

If I disable Vertical navigation (as opposed to pallet1) I no longer get any navigation for mobile (and no hamburger menu button).

Last edited by scottfrey (2019-02-27 04:53:33)

rod barbee · 2019-02-27 05:56:51

you've got too many nav divs!
try removing the first

<nav class="nav nav_v">

and the last

</nav>

Then change return true; to return false; that's what removes the normal navigation

If I disable Vertical navigation (as opposed to pallet1) I no longer get any navigation for mobile (and no hamburger menu button).

Then try not disabling it. The phplugins function should replace it.

scottfrey · 2019-02-27 06:08:08

Thus:

// mobile navigation
function pallet01_top () {
  echo '
<div id="page__pallet__T1" class="page__column page__pallet" data-position="T1">
	<div class="content clearfix">


<nav class="nav nav_v">
 

<ul class="primary-menu menu mouseable"><li class="menu-item"><a href="/portfolio/"><b>Portfolios</b></a></li><li class="menu-item"><a href="/collections/">Places</a></li><li class="menu-item"><a href="/events/">Events</a></li><li class="menu-item"><a href="/about/">About</a></li><li class="menu-item"><a href="/backlight/search/">Search</a></li></ul>
 
</nav>

	</div>
</div>

  ';

   return false;
} // END /**/

Makes no change, same exact behavior.

Then try not disabling it. The phplugins function should replace it.

it does not.

I'm still missing something. How can I tell if phpplugins is actually doing anything at all?

Daniel Leu · 2019-02-27 06:21:23

scottfrey wrote:

I'm still missing something. How can I tell if phpplugins is actually doing anything at all?

function main_top () {
   echo 'hello scott frey';
}

A link to your page could be helpful too.

Do you have a two column layout selected?

rod barbee · 2019-02-27 06:23:23

are you starting with the phplugins-pangolin-sample.php file?
Are you leaving in all the existing code at the top (the stuff that makes this work)?

In your page template have you enabled phplugins and chosen the correct file?

scottfrey · 2019-02-27 07:02:56

function main_top () {
   echo 'hello scott frey';
}

Perfect test. Yes, it works

A link to your page could be helpful too.

https://www.lightsmithy.com

are you starting with the phplugins-pangolin-sample.php file?
Are you leaving in all the existing code at the top (the stuff that makes this work)?
In your page template have you enabled phplugins and chosen the correct file?

All good questions, and initially I had not, but I figured that part out on my own ;) Yes, to all those. Daniel's sample code is showing on the page. (that might be something to leave uncommented in the sample, like the RED background in the custom CSS sample). PHPlugins is clearly working now with the sample code, but not writing in the menu code

Here is a link to the full phplugins file: https://www.dropbox.com/s/whzw5a7941koo … y.php?dl=0

Daniel Leu · 2019-02-27 07:40:36

Using the navigation() hook, one can replace the menu. But this affects horizontal and mobile menus.

scottfrey · 2019-02-27 07:41:03

If I use a two column layout, I have a two column page instead of a nicely centered one column page. That does however, kinda get menu showing.... I get both, overlapping each other.

I don't know if there is a way to force pallet01 to show on mobile only.

The problem is started by there not being a way to force pallet01 to NOT replace Navigation on mobile.

It's frustrating that Matt has given us such a great way to make elegant useable menus on desktop, but if we use them we cripple navigation on mobile (I dare you to try navigating my site on a phone).

scottfrey · 2019-02-27 07:42:20

Using the navigation() hook, one can replace the menu. But this affects horizontal and mobile menus

thus defeating the whole point of separate menus (one complex for desktop, one simplified for mobile)

rod barbee · 2019-02-27 07:45:31

I've got this working. Sort of. It requires a two-column page setup apparently.
And you need to disable Vertical Navigation in the page template (or else you get overlapping menus)

However, with the two column page layout, nothing appears in the pallet when the page is at desktop size. So the layout looks strange. But the menu toggle button does show up when the browser goes to mobile size and the custom menu does appear.

To use this, you can either go with that two column layout with nothing in the pallet at desktop sizes. Or you can add extra content in the pallet01_top hook, like I have: http://backlight-2-100.barbeephoto.com/custom-mobile/

EDIT: Ah, I see you've discovered some of this already.

Daniel Leu · 2019-02-27 07:51:12

How about just hiding the sub-menu on mobile?

#page__pallet__T1 ul.sub-menu {
    display: none;
}

rod barbee · 2019-02-27 07:51:30

Well crap. Something even more awkward happens with that pallet content added with phplugins. It gets mixed up with the mobile menu. I'm guessing there's some html structure that needs to be used to avoid this.
Off to probe a normal page....

Daniel Leu · 2019-02-27 07:55:57

rod barbee wrote:

Well crap. Something even more awkward happens with that pallet content added with phplugins. It gets mixed up with the mobile menu. I'm guessing there's some html structure that needs to be used to avoid this.
Off to probe a normal page....

Your code looks strange:

<div id="page__pallet__T1" class="page__column page__pallet" data-position="T1">
	<div class="content clearfix">





<div id="page__pallet__T1" class="page__column page__pallet" data-position="T1">
	<div class="content clearfix">

I don't know why this div is repeated.

rod barbee · 2019-02-27 07:59:41

I fixed it. It needed all the pallet structure. This works:

function pallet01_top () {
  echo '
<div id="page__pallet__T1" class="page__column page__pallet" data-position="T1">
	<div class="content clearfix">


		<nav class="nav nav_v">
 

			<ul class="primary-menu menu mouseable"><li class="menu-item"><a href="/portfolio/">Portfolios</a></li><li class="menu-item"><a href="/collections/">Places</a></li><li class="menu-item"><a href="/events/">Events</a></li><li class="menu-item"><a href="/about/">About</a></li><li class="menu-item"><a href="/backlight/search/">Search</a></li></ul>
 
		</nav>


		<div class="widget textwidget">
			<div class ="textwidget">
				<h2>Pallet Content via phplugins</h2>
				<p>This is content added via phplugins to fill this awkward space. Don\'t laugh at me.</p>
			</div>	
		</div>
	</div>
</div>	

  ';

   return false;
} // END /**/

fixed!

scottfrey · 2019-02-27 08:01:58

  ';

   return false;
} // END /**/

at teh end I assume...

rod barbee · 2019-02-27 08:03:29

yep missed that in the copy. I'll fix it

scottfrey · 2019-02-27 08:07:21

Does not work on mine.

Does not show at all if 1 Column Layout. Does not show at all if vertical nav disabled

rod barbee · 2019-02-27 08:16:39

It needs to be a two column layout with vertical nav disabled.

scottfrey · 2019-02-27 08:20:55

that kinda defeats the point of that big beautiful slideshow then unless I can make the right column really narrow (or 3 column and both narrow)

does the:

Pallet Content via phplugins
This is content added via phplugins to fill this awkward space. Don't laugh at me.

need to be there?

scottfrey · 2019-02-27 08:23:41

yeah, that looks terrible and unbalanced in 2 column

rod barbee · 2019-02-27 08:30:29

That added content doesn't need to be there. But if it's not, the empty pallet is there, being just an empty, awkward, lonely, pathetic space.

rod barbee · 2019-02-27 08:32:34

Daniel Leu wrote:

How about just hiding the sub-menu on mobile?
#page__pallet__T1 ul.sub-menu {
    display: none;
}

Ooh. I like that option. As long as you're not using inactive items in the main menu this is a great option.

Daniel Leu · 2019-02-27 09:58:05

rod barbee wrote:

Daniel Leu wrote:
How about just hiding the sub-menu on mobile?
#page__pallet__T1 ul.sub-menu {
    display: none;
}
Ooh. I like that option. As long as you're not using inactive items in the main menu this is a great option.

Depending on the hierarchy of the galleries, you could even expose the first sub-level. Check my site, https://danielleu.com/ vs https://danielleu.com/galleries/.

rod barbee · 2019-02-27 10:16:26

ah, children.....gotta love em'

scottfrey · 2019-02-27 10:34:29

That could be a perfect solution. I'll poke at that tomorrow

That is just a custom CSS call, correct?

Last edited by scottfrey (2019-02-27 10:35:00)

Community @ The Turning Gate

#1 2019-02-27 04:39:53

Custom Menus for mobile using phpplugins not working

#2 2019-02-27 05:56:51

Re: Custom Menus for mobile using phpplugins not working

#3 2019-02-27 06:08:08

Re: Custom Menus for mobile using phpplugins not working

#4 2019-02-27 06:21:23

Re: Custom Menus for mobile using phpplugins not working

#5 2019-02-27 06:23:23

Re: Custom Menus for mobile using phpplugins not working

#6 2019-02-27 07:02:56

Re: Custom Menus for mobile using phpplugins not working

#7 2019-02-27 07:40:36

Re: Custom Menus for mobile using phpplugins not working

#8 2019-02-27 07:41:03

Re: Custom Menus for mobile using phpplugins not working

#9 2019-02-27 07:42:20

Re: Custom Menus for mobile using phpplugins not working

#10 2019-02-27 07:45:31

Re: Custom Menus for mobile using phpplugins not working

#11 2019-02-27 07:51:12

Re: Custom Menus for mobile using phpplugins not working

#12 2019-02-27 07:51:30

Re: Custom Menus for mobile using phpplugins not working

#13 2019-02-27 07:55:57

Re: Custom Menus for mobile using phpplugins not working

#14 2019-02-27 07:59:41

Re: Custom Menus for mobile using phpplugins not working

#15 2019-02-27 08:01:58

Re: Custom Menus for mobile using phpplugins not working

#16 2019-02-27 08:03:29

Re: Custom Menus for mobile using phpplugins not working

#17 2019-02-27 08:07:21

Re: Custom Menus for mobile using phpplugins not working

#18 2019-02-27 08:16:39

Re: Custom Menus for mobile using phpplugins not working

#19 2019-02-27 08:20:55

Re: Custom Menus for mobile using phpplugins not working

#20 2019-02-27 08:23:41

Re: Custom Menus for mobile using phpplugins not working

#21 2019-02-27 08:30:29

Re: Custom Menus for mobile using phpplugins not working

#22 2019-02-27 08:32:34

Re: Custom Menus for mobile using phpplugins not working

#23 2019-02-27 09:58:05

Re: Custom Menus for mobile using phpplugins not working

#24 2019-02-27 10:16:26

Re: Custom Menus for mobile using phpplugins not working

#25 2019-02-27 10:34:29

Re: Custom Menus for mobile using phpplugins not working

Board footer