To insert code in a forum thread or comment wrap it in code tags : <code>...</code>.
Tutorial How to get Übermenu (mega menu) full width in striking
  • Hi

    Here is a small tutorial on how to get übermenu full width into Striking .

    There are 4 ways to integrate it.

    Getting the Ubermenu At the Striking theme menu location without doing any customization

    You can insert the ubermenu at the location of the current location of the striking menu. No need to alter the header.php file for Striking Normal (5 series).

    In StrikingR even though the striking menu container is used additional code in the header.php is needed to make this work. A extra Clear div after the default striking menu call needs to be added (see instructions further down below).

    Note: I haven't tested any of this in Striking (normal). So it could be due to all code changed the extra Clear Div as described further down below now also needs to be added to the striking normal header.php. If you have issues pls add the code and try. But since it is not responsive i dont expect any issues.


    I strongly advise to use the hardcoded integration.

    Here are the steps for getting the Ubermenu added at the striking theme default menu location without almost doing any customization.

    Image and video hosting by TinyPic

    Image and video hosting by TinyPic


    Image and video hosting by TinyPic


    STRIKING MENU REPLACE WITH UBERMENU IN HEADER BOTTOM JUST ABOVE THE SLIDER

    To position the menu on the bottom just above the slider you need a bit of custom css and (for STRIKING_R) add the extra clear div code <div class="clearboth"></div> to the header.php just below the default striking menu call as described further below. Please put the custom css code below into the custom css field of the striking general settings.



    /* STRIKING MENU REPLACE WITH UBERMENU IN HEADER BOTTOM */


    @media screen and (min-width:768px) {

    #megaMenu {
    bottom:0px;
    position:absolute;
    }

    #header .inner {
    padding-left:0px;
    padding-right:0px;
    }

    }

    @media screen and (max-width:768px) {

    #megaMenu {
    top:0px;
    }

    #header .inner {
    overflow:visible !important;
    }

    #header {
    padding-bottom: 0px!important;
    }
    }



    Now you still need to add some code in the header.php to make it work.

    Image and video hosting by TinyPic

    open the header.php scroll to the bottom and change this code


    ?>
    <?php echo theme_generator('menu');?>
    </div>
    </header>


    to this


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


    The Result.

    Image and video hosting by TinyPic


    STRIKING MENU REPLACE WITH UBERMENU IN HEADER TOP

    To position the menu at the top of the screen above the logo you need a bit of custom css and (for STRIKING_R) add the extra clear div code <div class="clearboth"></div> to the header.php just below the default striking menu call as described above in the previous step of adding the menu just above the slider area. Then put the custom css code below into the custom css field of the striking general settings.




    /* STRIKING MENU REPLACE WITH UBERMENU IN HEADER TOP */

    #megaMenu {
    top:0px;
    position:absolute;
    }


    @media screen and (min-width:768px) {
    #header .inner {
    padding-left:0px;
    padding-right:0px;
    }
    }


    @media screen and (max-width:768px) {

    #header .inner {
    overflow:visible !important;
    }

    #logo {
    margin-top:0px !important;
    padding-top: 40px !important;
    }

    }


    Image and video hosting by TinyPic

    *****************************************************************************************************

    Getting the Ubermenu into the striking theme with code customization


    There are 3 ways todo this and all of them all require adjustment of the header.php and setting of the ubermenu settings and wordpress menu system in a certain way.


    The steps they have in common


    *) Step 1
    You need to open the header.php of striking and adjust this line of code.

    Image and video hosting by TinyPic


    Change this line (116 previous 105)
    <?php echo theme_generator('menu');?>


    to (or remove it !!!)

    <?php //echo theme_generator('menu');?>


    *) Step 2

    Goto the ubermenu settings and goto the theme integration tab and enable the theme integration option.

    Image and video hosting by TinyPic

    *) Step 3

    Now open the wordpress menu settings and make sure to select the ubermenu integration and in the custom menu itself set that menu to the ubermenu integration

    Image and video hosting by TinyPic



    *******************************************************************************

    After above hardcoded changes you can change the header.php to insert the Ubermenu at the location you want it. There are 3 locations to be chozen.

    Location 1: Getting the Ubermenu Fullwidth in the Top of the theme


    after line 65 <header id="header">

    add this

    <?php uberMenu_easyIntegrate(); ?><div class="clearboth"></div>

    So you get this.


    <header id="header">
    <?php uberMenu_easyIntegrate(); ?>
    <div class="clearboth"></div>
    <div class="inner">


    Image and video hosting by TinyPic


    You need a bit of custom css. Please put this custom css code into the custom css field of the striking general settings.


    #megaMenu {top:0px;}




    NOTE: After this you can install the sticky menu ubermenu addon and you need to build your menu as you want it. But there is no need for that as our sticky header perfectly does the job.

    The Result

    Image and video hosting by TinyPic


    Location 2: Getting the Ubermenu Fullwidth Just above the slider

    change the header.php at the bottom of that file like this


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



    Image and video hosting by TinyPic


    You need a bit of custom css. Please put this custom css code into the custom css field of the striking general settings.

    Striking css code


    @media screen and (min-width:768px) {
    #megaMenu {bottom:0px;
    position:absolute;}
    }




    if the page starts shifting (left to right) because of page with less and more content the the current screen height you also need this. It will put a default scrollbar in every page so the shifting (left to right) stops.

    body {
    overflow-y: scroll;
    }


    The Result
    Image and video hosting by TinyPic



    Location 3: Getting the Ubermenu at the current Striking menu location 960px width


    change the header.php at the bottom of that file like this


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



    Image and video hosting by TinyPic


    to position the menu on the bottom just above the slider you need a bit of custom css. Please put this custom css code into the custom css field of the striking general settings.



    @media screen and (min-width:768px) {

    #megaMenu {
    bottom:0px;
    position:absolute;
    }

    #header .inner {
    padding-left:0px;
    padding-right:0px;
    }

    }

    @media screen and (max-width:768px) {

    #megaMenu {
    top:0px;
    }

    #header .inner {
    overflow:visible !important;
    }

    #header {
    padding-bottom: 0px!important;
    }
    }



    to position the menu at the top of the screen above the logo you need a bit of custom css. Please put this custom css code into the custom css field of the striking general settings.


    #megaMenu {
    top:0px;
    position:absolute;
    }


    @media screen and (min-width:768px) {

    #header .inner {
    padding-left:0px;
    padding-right:0px;
    }

    }


    @media screen and (max-width:768px) {

    #header .inner {
    overflow:visible !important;
    }

    #logo {
    margin-top:0px !important;
    padding-top: 40px !important;
    }

    }




    Best regards,
    Striking Team
    Paul
  • 7 Comments sorted by
  • Always going the extra mile.
    Thanks Paul
  • Hi Andrew,

    As always... You know me.. Btw i updated the tutorial again as somehow we had a new issue we either overlooked or is caused by the latest Striking update. I was to lazy to figure out which caused it. It only affects the default Striking menu replacements (hardcoded or non hardcoded version) and only applies to striking_R as fas as I could see. The fullwidth tutorials did not change and should still work the same way.

    Best regards,
    Paul
  • Great tutorial!

    I integrate here the menu: http://www.metadelic.com/tyg/

    I wish to the same effect as when it is sticky, but on initial load: wide cross the screen and menu centered above the content and slider.

    I can't work out to have the black background wide and make the menu flow under the logo like in your demo. It cover the bottom of the logo.

    Or it is centered but without the black border or it's wide but not centered.

    Any ideas, inputs how to solve this?
    I use all last version from Striking + Ubermenu.

    Thx a lot of your input.
    Dom
  • Hi

    are you using the sticky menu addon of ubermenu?

    Best regards,
    Striking Team
    Paul
  • Yes. The main Ubermenu, the sticky addon and the flat color addon.
    I've the same effect if I desactivate the sticky addon.

    Dom
  • Hi Dom,

    Check this out. Its Ubermenu in Striking Multiflex Inserted following above instructions at location 2), Sticky header turned ON in the striking settings.

    CSS Used and only this is needed



    @media screen and (min-width:768px) {
    #megaMenu {bottom:0px;
    position:absolute;
    }
    }




    http://ubermenudemo.strikingsupport.com/

    No need for the sticky addon of übermenu itself. It works out of the box with our sticky header.

    Extra CSS for the coloring (as i was just playing around with it, but not needed by default). Be aware i choose the flat-blue preset.... the css is based on that setting. You need to alter the code below if you are using a different skin and if you menu id's of the menu items is different (which will be the case !!!). It is just a example code how things can be done.


    @media screen and (min-width:768px) {
    #megaMenu {bottom:0px;
    position:absolute;
    }
    }

    @media screen and (min-width:768px) and (max-width:900px) {
    li#menu-item-4267 {display:none !important;}
    }

    #menu-item-4263> span {
    background-color:Maroon !important;
    color:white !important;
    }

    #menu-item-4263> span:hover {
    background-color:purple !important;
    }


    #megaMenu.wpmega-preset-flat-blue ul.megaMenu ul.sub-menu li.menu-item a:hover{
    color: #ffffff !important;
    background-color: #4A79F3 !important;
    }

    #megaMenu.wpmega-preset-flat-blue ul.megaMenu ul.sub-menu li.menu-item a:hover span.wpmega-link-title{
    color: #fff !important;
    }


    attached the childtheme for the ubermenu demo as set in above link.

    Best regards,
    Striking Team
    Paul
    striking_r_ubermenudemo.zip
    155K
  • Hi!

    Sorry for the delay. I had a shift in this project. Thx a lot. Wonderful. I forget to center the inner menu :o) Everthing work perfect. Priceless support.
    The sticky header is to hudge, I just wish the menu bar. May I ask how it is possible to stick the menu without the picture to the top in Stiking, or I've to go trough the ubermenu sticky plugin?
This discussion has been closed.
All Discussions