To insert code in a forum thread or comment wrap it in code tags : <code>...</code>.
Ubermenu 3.0 Tutorial
  • Hi All,

    Ubermenu released a major update and here is a tutorial on how to integrate the new plugin.


    This is what you should know !!



    This is what you should know first : Ubermenu now has the ability to add more then one menu (also shortcoded). Each menu has its own id name. Default it is called main.

    This tutorial uses the id "main" and the hardcoded adjustment in the header.php If you create a new instance for the ubermenu the name main will be different and you will have to use the correct naming while adjusting the header.php

    Image and video hosting by TinyPic

    Image and video hosting by TinyPic

    All instructions below are to make the Ubermenu work with our Sticky header


    Hard coded integration fullwidth



    There are two locations to insert the fullwidth ubermenu

    - before the #header .inner
    - after the #header .inner closes just before the end of the header


    Before the #header .inner



    Step 1) open the header.php and just before <div class="inner"> insert this code after line 68


    <div class="menuinnertop">
    <?php ubermenu( 'main' ); ?>
    </div>


    So you get this:

    Image and video hosting by TinyPic

    In that same file goto line 117 (115 before above code has been inserted) and disable the default striking menu

    Image and video hosting by TinyPic


    Step 2) Custom CSS required

    Please put this custom css code into the custom css field of the striking general settings.


    .menuinnertop{
    position:relative;
    z-index:20;
    }

    #header { overflow:visible;}

    #header { height:auto;}



    Step 3 The result

    Image and video hosting by TinyPic


    after the #header .inner closes just before the end of the header



    Step 1) open the header.php and just before </header> insert this code at the bottom of that file


    <div class="menuinner"><?php ubermenu( 'main' ); ?></div>


    So you get this:

    Image and video hosting by TinyPic

    In that same file goto line 115 and disable the default striking menu

    Image and video hosting by TinyPic


    Step 2) Custom CSS required

    Please put this custom css code into the custom css field of the striking general settings.



    .menuinner{
    position:relative;
    z-index:10;
    }

    #header { overflow:visible;}

    #header { height:auto;}



    Step 3 The result

    Image and video hosting by TinyPic


    The Ubermenu Integrated solution taking over the Striking menu



    The Ubermenu code has changed dramatically. I am still investigating on the how to take over the striking menu without recoding the theme header.php. For now i only have this solution

    Step 1) open the header.php and just before </header> insert this code after line 116 (the closing div for the #header .inner)


    <div class="menuinner">
    <?php echo theme_generator('menu');?>
    </div>



    In that same file goto line 115 and disable the default striking menu

    Image and video hosting by TinyPic

    So you get this

    Image and video hosting by TinyPic

    Step 2) Custom CSS required

    Note the bottom:0px can be changed to any positive or negative value to position the menu. Or change it to top:0; and move it from the top in pixels.....



    #header, #header .inner {
    overflow: visible;
    }

    .menuinner {
    width:960px;
    margin: 0 auto;
    bottom : 0px;
    position:absolute;
    }

    @media only screen and (min-width:980px){
    .menuinner {
    width:960px;
    }
    }


    @media screen and (max-width:979px) {
    .menuinner {
    width:100%;
    margin: 0;
    }
    #header {
    padding-bottom: 0px;
    }
    }

    @media screen and (max-width:767px) {
    .menuinner {
    bottom : 0;
    position: relative;
    }
    }


    Step 3 Settings Ubermenu

    Image and video hosting by TinyPic

    Step 4 Wordpress Menu Settings

    Image and video hosting by TinyPic

    Step 5 The result
    Image and video hosting by TinyPic


    Step 6 Getting the integrated to full width !!!
    By changing the width 980px to 100%


    .menuinner {
    width:100%;
    margin: 0;
    bottom : 0;
    position:absolute;
    }



    or


    .menuinner {
    width:100%;
    margin: 0;
    bottom : 48px;
    position:relative;
    }




    How about two Different Menu's?



    Yes now UBERMENU can do so !!!

    Add the code in the Before header Tutorial Above and the Code After the Header or the integrated Striking solution.

    Also add the corresponding css and create two different menu containers. And Guess what you have two menus in your website.

    Step 1) Custom CSS required


    .menuinnertop{
    position:relative;
    z-index:20;
    }


    .menuinner{
    position:relative;
    z-index:10;
    }

    #header { overflow:visible;}


    #header { height:auto;}

    @media screen and (max-width:979px) {
    #header {
    padding-bottom: 0px;
    }
    }



    The result of two menus

    Image and video hosting by TinyPic




    Best regards,
    Striking Team,
    Paul

    http://codecanyon.net/item/ubermenu-wordpress-mega-menu-plugin/154703?WT.ac=search_item&WT.oss_phrase=Ubermenu&WT.oss_rank=4&WT.z_author=sevenspark
This discussion has been closed.
All Discussions