hamburger menu selector - not working

[jcockroft64]

I noticed on my cellphone and on the desktop, the hamburger menu selector does not activate. On the cell phone, it is the only way to bring up the menu selection ... but it doesn't work.

[russellelliott]

Here's what I found: Github issue: https://github.com/ColorlibHQ/illdy/issues/311 Info article: https://news.thewindowsclub.com/wordpress-5-5-update-breaking-wp-plugins-102282/ Plugin: https://wordpress.org/plugins/enable-jquery-migrate-helper/

According to the info article, you need to download the "Enable jQuery Migrate Helper" to fix a number of issues present after updating to WordPress version 5.5 (we are currently on version 6.0.1). “With the update to WordPress 5.5, a migration tool known as jquery-migrate will no longer be enabled by default. This may lead to unexpected behaviors in some themes or plugins who run older code. This plugin serves as a temporary solution, enabling the migration script for your site to give your plugin and theme authors some more time to update, and test, their code.”

The plugin in question has been tested up to Wordpress version 6.0.1, so there shouldn't be any problems there.

You can find the current WordPress version by scrolling to the very bottom of the admin page: https://www.sierrahiking.net/wp-admin/index.php

I'll download the plugin and see if it solves the issue.

[russellelliott]

Update: That didn't seem to work (yet??). Hamburger menu is still not clickable.

[russellelliott]

The next best idea in my eyes is to have a new hamburger menu via a plugin. Here's what I found

WP Mobile Menu

Video: https://www.youtube.com/watch?v=UVAGf0NhNBY

Plugin: https://wordpress.org/plugins/mobile-menu/

Info site: https://www.wpmobilemenu.com/ Demos: https://www.wpmobilemenu.com/demos/

• Free Demo
• Ecommerce Demo
• Professional Demo
• Website
• Documentation

[russellelliott]

There is a setting called "Mobile Menu Visibility(Width Trigger)" that triggers the hamburger menus. This controls when the hamburger menus appear. Currently it's set to 1024, so they appear when the screen is less than or equal to 1024px wide. You mentioned that you want it to only display on mobile devices.

I set this to 767px to match the breakpoint discussed in issue #15.

I do notice that when the the mobile menu appears, the center header text disappears. Also, the desktop header seems to disappear when the screen is less than 1024px wide.

The desktop navigation bar belongs to the div "header-navigation-wrapper". The inactive desktop hamburger icon belongs to the div "header-widgets-wrapper"

[russellelliott]

The inactive hamburger menu is now hidden. Here is the CSS:

/*Inactive Hamburger Menu*/
.header-widgets-wrapper{
    display:none !important;
}

Added to global site CSS; see #11

[russellelliott]

Progress on making desktop navbar visible when the screen is at least 767px wide. Can't seem to det it to be always visible, but I think I got the CSS classes down.

/*Desktop navigation bar*/
@media only screen and (min-width: 767px) {
    .navbar .header-inner{
        visibility: visible !important;
        display: flex !important;
    }
}

When I do display: none, the navbar disappears, so I know I got the right classes down. HTe issue is making the navbar always visible until the screen is less than 767px wide.

Added to global site CSS; see https://github.com/jcockroft64/sierrahiking/issues/11

[russellelliott]

Interesting thing I noticed: when the screen is less than or equal to 1024, the data-elementor-device-mode changes from "desktop" to "tablet". When the width is less than 767px, it changes to "mobile". The desktop navbar disappears in "tablet" mode and the mobile navbar and hamburger menus appear in "mobile" mode.

Desktop

Tablet

Mobile

Custom Navbar CSS I tried setting data-elementor-device in the custom CSS I made as well. I first tried putting it in the inital CSS I made. I noticed data-elementor-device was part of the body tag so I tried making custom CSS for that as well. Neither worked.

body{
    data-elementor-device-mode:"desktop" !important;
}

Visiblity Adjustments I searched up "wordpress set data-elementor-device-mode" and clicked the first result: Website: https://elementor.com/help/mobile-editing/ Video: https://www.youtube.com/watch?v=EqFxeluk4U4 The video went over several topics, with "Hide and Show Elements on Different Devices".

Click element, go to Advanced -> Responsive to specify if you want an element to be hidden on certain device.

This doesn't work for the navbar however, as it's not a clickable element on the Wordpress page.

Adjusting Breakpoints I then tried adjusting the tablet breakpoint.

I found this question asked on the WordPress support forums: https://wordpress.org/support/topic/top-bar-menu-disappears-on-mobile/

They suggest changing the device breakpoints. From there, I could adjust the breakpoints. According to another WordPress forum, there is no option to remove given brekpoints, so adjsuting them is the next best option: https://wordpress.org/support/topic/turn-off-breaking-point/

Here's a video about adjusting device breakpoints: https://www.youtube.com/watch?v=i1yTLQ9R-Yw

From the Elementor Editor, click the hamburger menu in the upper left of the widget panel. Go to Site Settings -> Layout. Then, go down to the "Breakpoints" section. From there, you can adjust the breakpoints for mobile and tablet.

Tutorial: https://wpbuilt.co/tutorials/how-to-change-the-tablet-and-mobile-breakpoints-in-elementor/

I tried adjusting the breakpoint so it would be less than the mobile device breakpoint, but that doesn't seem to work. I can certainly enter custom values for it, but I can't bring the breakpoint below a certain point.

Editing the Theme File Then, I went into the dashboard and went to "Appearance" -> Theme File Editor". It will give you a popup so just accept that. From there, you are entered into "style.css". I tried looking for some area where the breakpoints are stored, but I can't seem to find it.

Elementor Custom Code From the Dashboard, go to Elementor -> Custom Code. There you can enter custom code in the head or body (top or bottom). More Info: https://elementor.com/help/custom-code-pro/ Video: https://www.youtube.com/watch?v=j6J-TvEXGLY

You can also modify where this code is applied. https://elementor.com/help/custom-code-pro/

I tried adding this text by itself: data-elementor-device-mode = "desktop" That didn't work. All it does is adds the text "data-elementor-device-mode = "desktop"" to the top of the page.

I consulted the tutorial video. Seems like the custom code is HTML. So, I tried this instead:

<style>
    body{
        data-elementor-device-mode:"desktop" !important;
    }
</style>

Still doesn't work. I tried adding it to the head. Still doesn't work.

There is a priority setting for the custom code. I had it set to 1 (highest priority).

Using a Script Consulted Stack OVerflow for how to change the class of the body. Perhaps this can aid in changing the view from tablet to desktop. https://stackoverflow.com/questions/4397289/javascript-fastest-way-to-remove-a-class-from-body https://www.codegrepper.com/code-examples/javascript/document.queryselector+body

document.querySelectorAll('[property]'); // All with attribute named "property"
document.querySelectorAll('[property="value"]'); // All with "property" set to "value" exactly.

//Pretend there is a <p> with class "example"
const myParagraph = document.querySelector('.example');
//You can do many this with is
myParagraph.textContent = 'This is my new text';

https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttributeExamples In the following example, setAttribute() is used to set attributes on a .

HTML

<button>Hello World</button>

JavaScript

const button = document.querySelector("button");

button.setAttribute("name", "helloButton");
button.setAttribute("disabled", "");

The first call to setAttribute() above shows changing the name attribute's value to "helloButton". You can see this using your browser's page inspector (Chrome, Edge, Firefox, Safari). To set the value of a Boolean attribute, such as disabled, you can specify any value. An empty string or the name of the attribute are recommended values. All that matters is that if the attribute is present at all, regardless of its actual value, its value is considered to be true. The absence of the attribute means its value is false. By setting the value of the disabled attribute to the empty string (""), we are setting disabled to true, which results in the button being disabled.

https://stackoverflow.com/questions/34745048/which-method-is-faster-to-select-body-element For the body, do this:

document.querySelector('body')

Here is the resulting code

<!--Custom Code intended to prevent tablet view from appearing; replace tablet with desktop-->
<script>
    var body = document.body; //get the body
    body.setAttribute('data-elementor-device-mode', 'desktop'); //set the view to desktop
</script>

It doesn't seem to work on it's own.

Viewing console; errors only appear when I try to use the custom code. Site still worked, but got errors on the console.

(index):116 Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')
    at (index):116:37
(anonymous) @ (index):116
(index):104 Uncaught TypeError: Cannot read properties of null (reading '1')
    at window.onerror ((index):104:500)

However, entering the code in the console of inspect element changes the data-elementor-device-mode to "desktop" as intended, but the desktop navbar still disappears

Commented out the code I made in the Custom Code. It's called "Custom Navbar Code" if you want to check out what I tried to do. I'll stop working on this for now; none of what I tried to do for making the navbar appear on tablets has gone anywhere.

Another option is just to make the mobile navbar appear for tablets as well. That's much less complicated.

[jcockroft64]

I haven't read through your above comments yet, but I have a few thoughts here:

• The problem produces itself on our land page (sierrahiking.net). Therefore any hiking-page only customizations can't be the cause. I had previously thought that the block locations (even adding the 7-day hike button) may have caused this - but we can practically eliminate that.
• Through our bug fixing there were some global edits through Elimentor. I think these edits should be on our list of likely causes.
• Besides the global edits, only the Theme itself controls that hamburger menu selector. I would attempt to reproduce the problem with another Theme, just to see if the problem is a Theme related.
• It is important to test on really simple pages (like the landing page). The problem is also reproduced on the Security page (it's practically a blank page to begin with).

[jcockroft64]

I've didn't define this bug correctly :( Our main problem that our menus are not working well on mobile and tablet. I watched this video: https://www.youtube.com/watch?v=ndh4raUtueQ. It made think that the Inspiro (theme) header isn't working for us the way we want. I'm almost ready to suggest that we should build our own header instead of using the Theme one.

Note that the Hiking Page and the About page has two mobile menus (left and right), and Discussion, Favorites, Pre and Planning, Events, Afflications, Terms of Use and Security has no mobile menus. I suspect those basic pages (eg Events), has no header definition. Maybe Elementor wiped it out.

[jcockroft64]

To be clear, here is the bug definition:

1. In mode mode, on the Hiking Page and the About page, we are seeing two menus despite having turned off in the left-menu in the Theme.
2. In Tablet mode, we are seeing no menus at all.

[jcockroft64]

I commented this out on Saturday and re-established it on Sunday: /Inactive Hamburger Menu / .header-widgets-wrapper{ display:none !important; }

[russellelliott]

I followed some tutorials and made a dynamic header and footer for the site.

The header turns into a hamburger menu when the screen size is smaller than 767px. I have it set up so the left section is the site's logo to which clicking on it leads the use back to the homepage.

According to the tutorial for making a header, some themes automatically delete the site's footer when a new header is made. So, I went ahead and made a new footer, which turns into a hamburger menu like the header.

How To Make A Mobile Menu Header On Elementor Pro | Responsive Header https://www.youtube.com/watch?v=ndh4raUtueQ

Header and Footer Builder in Elementor https://elementor.com/blog/header-footer-builder/

How to Make a Header in Elementor https://www.youtube.com/watch?v=tDePkL-1tu4

How to Make a Footer in Elementor https://www.youtube.com/watch?v=ob7SMEfVRfc

For publishing the header add footer, click “Publish”, and under the Conditions, set it to “Include Entire Site”.

An issue I see is that the header isn't merged into the hero image like the old header was. Gonna look into that.

[russellelliott]

Update; the header is now integrated into the hero section of the page. To do this, set the bottom margin of the header to -1*[height of header]

Here's a tutorial: https://www.youtube.com/watch?v=Y9vnx6TZp2E

In our case, the header is 66px tall, so I set the bottom margin to -66px.

I set the z margin to 10 so the header is in front of everything else.

Also replaced the site icon with a button because the site icon took up a lot of space, especially on mobile.

Will also adjust the header link colors so they have better contrast against the blue sky of the hiking page hero image.

Also, the hero image on the homepage seemed to have disappeared (unless that was already removed).

[russellelliott]

Changed the nav menu text color Tutorial: https://wordpress.org/support/topic/change-navigation-menu-text-color/ CSS Format:

.menu-item a{
    color:#444444 !important;
}

This code was added to the Elementor Global CSS. Tutorial outlined in #11

[russellelliott]

Deleted "home" button I made; not very useful.

[russellelliott]

Deactivated the WP Mobile Menu Plugin as we no longer need it. Our menu becomes a hamburger menu on mobile so users can easily access other pages.

[russellelliott]

Styling Applied to the Website Yesterday

Changed site background color Elementor -> Site Settings -> Background Background Color: #dfdfdf

Header and Footer font color changed Tutorial: https://wordpress.org/support/topic/change-navigation-menu-text-color/ CSS Format:

.menu-item a{
    color:#ffffff !important;
}

This code was added to the Elementor Global CSS. Tutorial outlined in https://github.com/jcockroft64/sierrahiking/issues/11

Margin of header dropdown

• 10px right and 10px up

Adjusted width of dropdown Advanced -> Width
Width: inline auto

• Right width
  • Looks at longest word
• Hamburger on left

Footer not a hamburger Templates -> Theme Builder Go to Footer, change “Breakpoint” to None

Edit Header Background Color and Border Style -> Dropdown -> Background Color Background color: b9b9b9 Active background color: b9ccb9

Style -> Dropdown -> Border

• Border type: solid
• Border thickness = 1px
• Radius = 10px

Navbar position: Absolute

Make Navbar on the Right Toggle Align: Right

Changed Active Color of Tabs for Hiking Page Style -> Tab Active Color: #459F45

Changed width of the nav menu on mobile Advanced -> Width: Custom Custom Width: 140px

Hiking Day Icon Position Altered To do this, change the top offset

• Mobile: -62px
• Desktop/tablet: -120px

[russellelliott]

Update: Centered the navbar on desktop and tablet.

To do this, go to the header editor by going into Template -> Theme Builder. Go into the header, select the navbar, and go into advanced. At the very bottom is an area where you can apply custom CSS to that element. For the CSS, I made the header div have a 100% width, which makes the content at the center of the page, as the content of the nav menu is center-aligned.

As for the CSS, "selector" is used to apply CSS to a given wrapper element.

CSS I used:

@media only screen and (min-width: 767px) {
    selector{
        width:100% !important;
    }
}

This styling is reflected across all pages.

An issue that arises from this is that the text from the header clashes against the text of the page title. The Hiking Page isn't negatively affected, as the title is in a hero image and is already positioned lower than the centered header text.

[russellelliott]

Update: changed the top margin to 30px. This puts the header text away from the site title text on the top of the page CSS

@media only screen and (min-width: 767px) {
    selector{
        width:100% !important;
        margin-top:30px;
    }
}

Here's what a basic page looks like now

More info on margin-top: https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top

I also began making the master map page. Here is a link to it: https://www.sierrahiking.net/master-map/

[jcockroft64]

Done.