Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Resolved] Edit nav structure, preserve dropdown functionality

Home Forums Support [Resolved] Edit nav structure, preserve dropdown functionality

Home Forums Support Edit nav structure, preserve dropdown functionality

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #232739
    Tommi

    Hello again your problem child is back again.

    On the bitbar.com site I’m using a system which makes navigation dropdowns as wide as the page with a black background element. The output is as follows:

    
    <div id ="primary-menu">
     <ul>
      <li id="menu-item">
       <ul id="sub-menu">
        <div id="PROBLEM">
         <li>Submenu-content</li>
        </div>
       </ul>
      </li>
     </ul>
    </div>
    

    To explain: The #sub-menu uses position absolute to match screen width at every occasion. This is due to wanting a black background stretch from end to end. The #PROBLEM div has max width of 1600 (matching site content max width) With this the items inside the sub-menu don’t reach beyond the 1600 mark and line up nicely with the rest of the content. The solution works but it is Invalid HTML (<div> may not be a direct child of <ul> element) so at any second it could break. Or there might be browsers around there that already have it broken.

    Fixing this requires me changing the position of the two elements and their values, this change breaks the dropdown.js functionality though, now I could go and modify that file to match but it could mess with theme updates down the line.

    So.. What is the best way of modifying a parent theme .js file or is there another work-around that I haven’t taken into account?

    #232828
    Tom
    Lead Developer
    Lead Developer

    It’s technically invalid HTML, but that doesn’t mean it will break at any second. It does however mean that some old browsers might not like it.

    You can remove our dropdown.js file and enqueue your own like this:

    add_action( 'wp_enqueue_scripts', 'tommi_custom_scripts' );
    function tommi_custom_scripts() 
    {
        wp_dequeue_script( 'generate-dropdown' );
        wp_enqueue_script( 'tommi-dropdown', get_stylesheet_directory_uri() . "/js/dropdown.js", array( 'jquery' ), '1.0', true );
    }

    This assumes that you add your custom dropdown.js file into the js folder of your child theme.

    Hope this helps πŸ™‚

    #233068
    Tommi

    Thanks for the quick response Tom, worked like a charm after adding priority 100 to the action. My inner perfectionist is at peace once more. Well regarding one of the errors atleast.

    #233069
    Tom
    Lead Developer
    Lead Developer

    Awesome, glad I could help! πŸ™‚

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