Add dark mode toggle to responsive menu

[eddie]

I've been successfully able to add my dark mode toggle to the full width menu as you can see. Works great.

However, because I want this VERY handy, I would also like to put it directly next to the "MENU" item in the responsive menu. I haven't been able to do this successfully. I tried the following code, which places the toggle but it doesn't work since it is nested inside the menu button.

Any ideas?

function monochrome_responsive_menu_settings() {

        $settings = [
                'mainMenu'         => __( 'MENU' . do_shortcode('[dark-mode-toggle]'), 'monochrome-pro' ),
                'menuIconClass'    => 'ionicons-before ion-ios-menu',
                'subMenu'          => __( 'Submenu', 'monochrome-pro' ),
                'subMenuIconClass' => 'ionicons-before ion-ios-arrow-down',
                'menuClasses'      => [
                        'combine' => [],
                        'others'  => [
                                '.nav-primary',
                        ],
                ],
        ];

        return $settings;

}

[eddie]

The secret to getting your answers is asking... because I always seem to figure it out after asking.

I simply added the following to my functions.php

add_action( 'genesis_header', 'dark_mode_toggle' );
function dark_mode_toggle(){
        echo do_shortcode('[dark-mode-toggle]');;
}

Note: I did have to style it by floating it to the right and padding it a bit... but it works great.

[Author]

Posts