Using QuadMenu With Oxygen

September 6, 2019

If you have tried to use QuadMenu in your Oxygen powered website, you either ran into a brick wall, or finally figured it out. Well I'm here to explain how I got it working so you don't have to spend hours trying to figure it out yourself.

The issue is that oxygen has themes disabled, and because of of that QuadMenu has nowhere to declare your menus. So install the code snippets plugin, add a new snippet, add the code below, save & activate.

add_filter('quadmenu_developer_options', 'my_hook_developer_options_configuration', 1);

function my_hook_developer_options_configuration($defaults) {

    $options['header-1_integration'] = 1;
    $options['header-1_theme'] = 'custom_theme_1';

    //$options['header-2_integration'] = 1;
    //$options['header-2_theme'] = 'custom_theme_2';

    //$defaults['quadmenu_viewport'] = 1;

    //$defaults['quadmenu_styles'] = 1;

    //$defaults['quadmenu_styles_normalize'] = 1;

    //$defaults['quadmenu_styles_widgets'] = 1;

    //$defaults['quadmenu_icons'] = 'fontawesome';

    //$defaults['quadmenu_styles_pscrollbar'] = 1;

    return $defaults;
}
add_filter('quadmenu_default_themes', 'my_hook_themes', 1);

function my_hook_themes($themes) {

        $themes['custom_theme_1'] = 'Custom Theme 1';
        //$themes['custom_theme_2'] = 'Custom Theme 2';

        return $themes;
    }

After you do that goto QuadMenu => Options and you will see the themes available to style.

Then under Appearance => Menus at the bottom you will see

Click the quadmenu dev and then save, you will then have these options at the top.

From there you can use this function to display it

<?php if( function_exists( 'quadmenu' ) ): ?>
 <?php quadmenu(array('menu'=> '1', 'theme' => 'custom_theme_1')); ?>
<?php else: ?>
 <nav id="navigation">
 <?php wp_nav_menu( array( 'menu'=> '1', 'theme' => 'custom_theme_1' ) ); ?>
 </nav>
<?php endif; ?>

So after that it should display your menu, but you still have alot ahead of you. There are lots & lots of settings in QuadMenu and its kinda hard to tell exactly which do what so you kinda have to play with all of them until you get it right. But on the plus side once you get it right you can export those settings for the next website, and hopefully just change some of the colors you have set already.

One thing I really like about QuadMenu is when it converts to the mobile version, you can choose to hide or display menu items per screen size. Maybe a logo at the top, contact button & social media links at the bottom.

Well that's all for now yall' hope this helps someone out!

© 2019 DMS Designz | Designed By DMS Designz
envelope-oclosechevron-leftchevron-rightphonefacebookgithubbarslinkedin