The Linux Page

Wordpress Twentyseventeen Theme Menu hidden by default!?!?

Screenshot of a Wordpress website with the problem fixed.I have a website where I use Wordpress as the CMS. It's good enough for  that website (frankly, unless you want a blog, it's rather limited to my point of view, but I'm crazy...)

In 2017, they created a theme called Twentyseventeen, which looks good and has most of the functionality I need. However, there is a huge bug:

The front page has a smartphone menu at the bottom of the page which opens HIDDEN. That's just plainly wrong. Either you put the menu at the top or you make sure that the menu gets shown, somehow.

Since I'm a programmer (at times I forget) I decided to look into it. I added a piece of code in the navigation.js script.

WARNING: to make changes to a theme, it is better to create a copy with a new name. In my case I called the copy twentyseventeen-child.

cd .../wp-content/themes
mkdir -p twentyseventeen-child/assets/js
touch twentyseventeen-child/style.css
touch twentyseventeen-child/functions.php
cp -i twentyseventeen/assets/js/navigation.js twentyseventeen-child/assets/js/

Notice that I create a style.css and functions.php files too. These are required to create a child theme. The style.css file must include a declaration:

/*
 Theme Name:   Twenty Seventeen Child
 Theme URI:    https://example.com/twentyseventeen-child/
 Description:  Twenty Seventeen Child Theme
 Author:       John Doe
 Author URI:   https://example.com
 Template:     twentyseventeen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentyseventeen-child
*/

And the functions.php must have a function to load the styles:

<?php
function twentyseventeed_child_styles() {
    wp_enqueue_style(
        'twentyseventeen-style',
        get_template_directory_uri() . '/style.css'
    );
    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'twentyseventeen-style' ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'twentyseventeed_child_styles' );

Now I would edit the navigation.js file in the copy.

Search for the function that looks like this:

menuToggle.on( 'click.twentyseventeen', function() {
    siteNavContain.toggleClass( 'toggled-on' );

    $( this ).attr( 'aria-expanded', siteNavContain.hasClass( 'toggled-on' ) );
});

And after the $( this ).attr() call, add the following code:

if(siteNavContain.is(":visible")) {
    // make sure it is in view
    //
    y = siteNavContain.offset().top;
    screen_height = parseFloat(jQuery(window.top).outerHeight());
    max_y = y + siteNavContain.outerHeight() + 5 - screen_height;
    scroll_top = parseFloat(jQuery(window.top).scrollTop());
    if(scroll_top < max_y) {
        //y -= 50;
        //y -= jQuery("header").outerHeight();
        $("html, body")
            .stop()
            .animate(
                {
                    scrollTop: max_y < y ? max_y : y
                },
                1250,
                null,
                null);
    }
}

This block of code first checks whether the menu is now visible. If so, it calculates the bottom location of the menu and scrolls the screen accordingly if that bottom is not visible. The scrolling uses the animate() function.

And finally I would install the child theme as the current theme in my wordpress website. Now the menu works as one would expect!

Syndicate content

SMS From Me Logo

SMS From Me

To automatically start one on one conversations with your online leads.

     

Terms of Site Index

Find the page/content you are looking for with our index.