Avada Forums Community Forum Adding a custom button to Avada Menu

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • Gandalf
    Participant
    Post count: 9

    I have a ‘onclick=toggleDarkMode() ‘ on a button to change light/dark mode of my website in a page, but i want this same button in my MENU. But i do not see the attribute field within Button Menu Options.
    How do I add this JS snippet to a button inside the MENU options?

    Working inside a page: https://i.imgur.com/n7oSQQT.png
    Not working inside menu https://i.imgur.com/AYeGf6s.png

    Metro
    Participant
    Post count: 116

    I suggest you build your menus using the Layouts builder

    Gandalf
    Participant
    Post count: 9

    I’ll try that out see if that works, thank you. Still weird I cant simply add buttons in the regular menu page but ah well..

    marklchaves
    Participant
    Post count: 873

    Hey @gandalf,

    You can use the wp_nav_menu_items filter hook to add custom HTML (including your onclick handler).

    Reference: https://developer.wordpress.org/reference/hooks/wp_nav_menu_items/

    The example below adds my custom day/night mode toggle to my main menu.

    
    function add_custom_toggle($items, $args) {
    	if( $args->theme_location == 'main_navigation' ){
    		$items .= <<<EOT
    <input class="checkbox" id="checkbox" type="checkbox" checked>
    <label class="toggle" for="checkbox">
      <i class="star"></i>
      <i class="star"></i>
      <i class="star"></i>
      <i class="star"></i>
      <i class="star"></i>
      <i class="star"></i>
      <i class="star"></i>
      <span class="disc">
        <i></i><i></i><i></i>
      </span>
      <span class="cloud">
        <i class="cloud__sub1"></i>
        <i class="cloud__sub2"></i>
      </span>
    </label>
    EOT;
    	}
    	return $items;
    }
    add_filter('wp_nav_menu_items', 'add_custom_toggle', 10, 2);
    

    Cheers

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.