Hamburger Menu Items

charking · 2019-02-17 04:55:08

When I view my web site on my cell phone or tablet, also when I horizontally compress the web browser window on my desktop, the hamburger menu appears in the upper left hand corner of the screen to provide the navigation menu items. In my case these appear in a small blue type font. As I recall with Backlight 1 these menu items appeared in a larger black font. I am using Adobe fonts, but I don't think this is affecting the hamburger menu items. Is there a way I can change this small blue font and; if so, where would the code be so that I can write the necessary overriding custom code?

My web site: http://charleskinghorn.com

Last edited by charking (2019-02-17 04:57:07)

rod barbee · 2019-02-17 05:12:14

Navigation > Vertical Navigation > Menu Items : Color

Or were you referring to the hamburger icon color?

charking · 2019-02-17 05:32:03

rod barbee wrote:

Navigation > Vertical Navigation > Menu Items : Color
Or were you referring to the hamburger icon color?

Thanks again, Rod. Once again, something simple set a couple of months ago and then forgotten. I expected special coding. I even kept my Adobe fonts.

The hamburger icon is blue right now and matches the social website icons in colour and sizing. Just for interest's sake, how can it be changed?

rod barbee · 2019-02-17 06:10:39

Top Pallet Settings.
Pallet Toggle for the hamburger and Buttons (I believe) for social media.

pideja · 2019-08-31 22:57:37

Related question: is it possible to change the hamburger button to the word "menu"?

rod barbee · 2019-08-31 23:18:24

I’ve done it in Backlight 1 (Pangolin) so this should work:
https://ttg-tips-and-tricks.barbeephoto … menu-icon/

Phplugins code will need updating to the Backlight 2 format, as noted at the end of the post

pideja · 2019-12-01 03:07:10

I have tried the code suggested in https://ttg-tips-and-tricks.barbeephoto … menu-icon/ but still no "Menu".

Where is the mistake?

/* hamburger replaced by menu */
.page__toggle__buttons label p {
    cursor: pointer;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    min-width: 48px;
    height: 48px;
}

for the CSS and for the php:

<!-- Replace the mobile menu icon with the word "Menu"-->
function scripts($style, $path) {
<script>$(".page__toggle__buttons label ul").replaceWith("<p>Menu</p>");</script>

pideja.ca

rod barbee · 2019-12-01 03:21:25

As noted in that post, that code is for Backlight 1.
(EDIT: the end of the post addresses Backlight 2)

You can try modifying the phplugins so that it’s compatible with the Backlight 2 version, but I haven’t looked at the html structure to see if the css will even work.

(Remember, function ($style, $path) is not used in Backlight 2)

pideja · 2019-12-01 04:24:05

My php is now:

<?php

function user_load($style, $path) {
  $g_tsvrl = explode(' ', $style); // Extract gallery type
  define ('G_STYLE', strtoupper($g_tsvrl[1])); // and set global for later
  $g_path = str_ireplace('\\','/',$path); // change \ to /
  $chunks = explode('/',$g_path); // and put into array
  define ('G_PATH', strtoupper($chunks[count($chunks)-2])); // gallery folder name is second to last
  //define ( 'TTG_SITE', ''); // set new site root for navigation, resources, etc.
}

if (defined('BACKLIGHT_HOOK')) {
	require_once(realpath(BACKLIGHT_HOOK).'/modules/module-designer/application/helpers/APHPlugins.php');
}

class PHPlugins extends APHPlugins
{

/* Replace the mobile menu icon with the word "Menu"*/
function scripts() {
<script>$(".page__toggle__buttons label ul").replaceWith("<p>Menu</p>");</script>

/* Display the logo in pallet_top */

function pallet_top_title () { 
  echo '

  <li class="top-pallet-logo"><a href="/"></a></li>

  ';
  return false;
} 
} ?>

While the CSS is still the same.

Still, no "Menu" replacing the hamburger.

By the way, where could I check to see if it will work, relative to the HTML structure?

Last edited by pideja (2019-12-01 04:28:25)

rod barbee · 2019-12-01 08:59:37

Actually, I should have written that I hadn’t looked at the html structure as it pertains to the jQuery.
The jQuery looks for an existing html element and replaces the existing content with something else.
Since Backlight 2 is structurally different in some places, the selector in that jQuery may not be appropriate. That’s probably why it’s not working.

rod barbee · 2019-12-01 22:31:48

Just noticed that you didn’t properly close the function scripts () { section

rod barbee · 2019-12-05 08:50:27

just took a look at the post again. The code in the post does work in BL 2. You just need to format the phplugins function correctly.
Unfortunately, it eliminates the X to close the mobile menu. Clearly, more work needs to be done on it.

And you'll need to style the new Menu button

pideja · 2019-12-05 23:10:58

I think I correctly closed that PHP function...

<?php

function user_load($style, $path) {
  $g_tsvrl = explode(' ', $style); // Extract gallery type
  define ('G_STYLE', strtoupper($g_tsvrl[1])); // and set global for later
  $g_path = str_ireplace('\\','/',$path); // change \ to /
  $chunks = explode('/',$g_path); // and put into array
  define ('G_PATH', strtoupper($chunks[count($chunks)-2])); // gallery folder name is second to last
  //define ( 'TTG_SITE', ''); // set new site root for navigation, resources, etc.
}

if (defined('BACKLIGHT_HOOK')) {
	require_once(realpath(BACKLIGHT_HOOK).'/modules/module-designer/application/helpers/APHPlugins.php');
}

class PHPlugins extends APHPlugins
{

/* Replace the mobile menu icon with the word "Menu"*/

function scripts  () {
<script>$(".page__toggle__buttons label ul").replaceWith("<p>Menu</p>");</script>
}

/* Display the logo in pallet_top */

function pallet_top_title () { 
  echo '

  <li class="top-pallet-logo"><a href="/"></a></li>

  ';
  return false;
} 
} ?>

Still, no "MENU" in lieu of the hamburger.

While we are at it, that top pallet logo needs a reference (href) that would lead to where I put my top pallet image, right?

rod barbee · 2019-12-05 23:25:01

While we are at it, that top pallet logo needs a reference (href) that would lead to where I put my top pallet image, right?

Yes. That's done in the css
https://backlight-2-100.barbeephoto.com … ackground/

rod barbee · 2019-12-05 23:31:42

Still, no "MENU" in lieu of the hamburger.

you forgot to use echo in the scripts hook

I also don't see the pallet_top_title html code being inserted

Make sure that you've chosen the correct phplugins file in the Page Template > Advanced Settings

pideja · 2019-12-05 23:41:55

My bad: I forgot to enable the php plugin but when I did, I got this message:

Something went wrong
Unexpected error: syntax error, unexpected '<' in pangolin-pideja.php on line 22
Please report error at http://community.theturninggate.net

rod barbee · 2019-12-05 23:45:26

you forgot to use echo in the scripts hook

rod barbee · 2019-12-05 23:46:54

it should look like this:

function scripts () {
echo'
<script>$(".page__toggle__buttons label ul").replaceWith("<p>Menu</p>");</script>
';
}

pideja · 2019-12-05 23:54:09

Great, thanks. All the menu needs now is a bit of styling in CSS.

As to the top pallet banner, as you have seen, I indicated a path to an image residing in the img folder. However, now that the php is in function, the title has been correctly replaced by an image, but it's not the one I indicated.
I'll have to look into the already uploaded images in Backlight and correct that path.

pideja · 2019-12-06 00:30:38

Having a hard time styling that word "MENU"...

rod barbee · 2019-12-06 00:47:48

you've already got css to target the p element, just mess around with that

pideja · 2019-12-06 01:12:11

With your help pointing out where to interact with the CSS, I finally set it up the way I want it:

.page__toggle__buttons label p {
    cursor: pointer;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    line-height: 2.5em;
    min-width: 48px;
    height: 48px;
}

Thanks again...

P.S. I will live with this layout for a while. I need to populate the web site a bit more. If and when I need more help with the top pallet, I'll start a new topic.

Last edited by pideja (2019-12-06 01:24:12)

Matthew · 2019-12-06 11:42:36

Guys, hamburgers are gross and unsustainable. Backlight is environmentally neutral; it's a Pancake menu.

rod barbee · 2019-12-06 12:32:04

Community @ The Turning Gate

#1 2019-02-17 04:55:08

Hamburger Menu Items

#2 2019-02-17 05:12:14

Re: Hamburger Menu Items

#3 2019-02-17 05:32:03

Re: Hamburger Menu Items

#4 2019-02-17 06:10:39

Re: Hamburger Menu Items

#5 2019-08-31 22:57:37

Re: Hamburger Menu Items

#6 2019-08-31 23:18:24

Re: Hamburger Menu Items

#7 2019-12-01 03:07:10

Re: Hamburger Menu Items

#8 2019-12-01 03:21:25

Re: Hamburger Menu Items

#9 2019-12-01 04:24:05

Re: Hamburger Menu Items

#10 2019-12-01 08:59:37

Re: Hamburger Menu Items

#11 2019-12-01 22:31:48

Re: Hamburger Menu Items

#12 2019-12-05 08:50:27

Re: Hamburger Menu Items

#13 2019-12-05 23:10:58

Re: Hamburger Menu Items

#14 2019-12-05 23:25:01

Re: Hamburger Menu Items

#15 2019-12-05 23:31:42

Re: Hamburger Menu Items

#16 2019-12-05 23:41:55

Re: Hamburger Menu Items

#17 2019-12-05 23:45:26

Re: Hamburger Menu Items

#18 2019-12-05 23:46:54

Re: Hamburger Menu Items

#19 2019-12-05 23:54:09

Re: Hamburger Menu Items

#20 2019-12-06 00:30:38

Re: Hamburger Menu Items

#21 2019-12-06 00:47:48

Re: Hamburger Menu Items

#22 2019-12-06 01:12:11

Re: Hamburger Menu Items

#23 2019-12-06 11:42:36

Re: Hamburger Menu Items

#24 2019-12-06 12:32:04

Re: Hamburger Menu Items

Board footer