Want to use TwentySixteen Menu functions in TwentyTwelve

  • David Borrink

    (@davidborrink)


    9 years ago

    I have a number of sites created using child themes of TwentyTwelve. After looking at TwentySixteen’s mobile menu system, I’m very interested in modifying TwentyTwelve’s mobile menus to work like TwentySixteen. It has true dropdown menus with child menus hidden until needed, I’d rather add these to the TwentyTwelves instead of approaching my clients to recreate their sites as TwentySixteen child themes.

    I’ve studied the CSS of TwentySixteen, and have looked over it’s functions.js file that makes them work. In TwentyTwelve I see the navigation.js file for it’s menus system.

    As someone who hasn’t gotten into Javascript (yet), I’d like to ask the following…

    1. Can I use the TwentySixteen javascript from it’s functions.js file and replace the contents of the TwentyTwelve’s navigation.js file (as a child file, of course) and rename any ‘twentysixteen’ code instances with ‘twentytwelve’ instead? It looks like there are no class names to change between the two menu systems. If I could do this, it would mean that I don’t have to redo the functions.php to call up a different javascript file.

    2. Obviously I would add CSS classes such as .dropdown-toggle which constructs the buttons. And I’d also use relevant portions of the twentysixteen CSS to re-style the menu items to look and act the same.

    3. The Genericons usage for the up and down icons in TwentySixteen is fascinating, and I’m assuming I can use those in TwentyTwelve if I add the Genericons file to my child themes. But I’m wondering if there are up and down icons I can use that are generic for any system, like are they built into Arial or something? Then I wouldn’t have to rely on Genericons.

    My idea is to set up a basic TwentyTwelve child theme file that adds this updated menu system, and which would be the starting point for new projects. I can also take these things and add them to my existing projects which currently run on their mobile menus in a default way from TwentyTwelve and make them better.

    I would greatly appreciate someone’s advice for this.

    Or… if you know of an easier way to add the kind of functions I’d like to existing TwentyTwelve setups, that would be great.

    Thanks!

Viewing 1 replies (of 1 total)
  • Thread Starter David Borrink

    (@davidborrink)

    Well, I tried it on a MAMP setup.
    – Created a child theme for twentytwelve
    – Put the content of twentysixteen’s functions.js file into twentytwelve’s navigation.js file in a js folder in the child theme folder, and edited all instances of twentysixteen to twentytwelve for localization, I assume.
    – Pulled in all the initial CSS for menus from .site-header-menu down to .dropdown-toggle from twentysixteen, and renamed .site-header-menu to .nav-menu to use the correct classes.
    – Brought in a .main-navigation ul.nav-menu class from twenty-twelve into the +600 media query to display block in desktop.

    I tested it and no menu shows in desktop. The menu button shows under 600 pixels, but no action. My HTML shows that the menus are there. They aren’t working.

    So I tried it. I’d really like to make this work, but obviously I could use a little help to be pointed in the right direction.

Viewing 1 replies (of 1 total)
  • The topic ‘Want to use TwentySixteen Menu functions in TwentyTwelve’ is closed to new replies.