Documentation
Changelog
 
 

Olegnax Mega Menu

 

General Settings

You can enable/disable Olegnax Mega Menu in Olegnax > Mega Menu > Configuration. Also you can enable/disable arrows for parent menu items and set Header container class. Mega menu uses width and left position of this container for menu width and alignment settings when they set to "Container". For athlete theme you just leave it as .row.

Main Mega meni settings can be found when you edit category. See image below. Catalog > Categories > Ox Mega Menu

 

Appearnace Settings

Appearance settings can be found in Athlete2 > Theme Apperance > Header > Menu. You can adjust menu colors and fonts.

 

You can change color of the menu text and background but it wont work well for all styles and doesn't has hover options. So the best way is to use custom class field.

Custom Content near link allows you to add icons to the left of menu item. For example you can add fontawesome icons like this: <i class="fas fa-star"></i>

Custom Menu

With custom link options you can easily create extenal menu or add links to pages. Simply build menu with empty categories and set them custom links.

 

Simple Drop Down Settings

Some options can be set for any drop down type and some for mega menu only. Following are options for any menu type: Menu columns, Menu Columns Width, Drop Down Background, Menu Drop Down Aligment.

 

Mega Menu Drop Down

By default menu drop down is simply. You need turn on Enable Mega Menu switch to make wide style drow down and unlock additional options.

Menu Dropdown Width - You can set custom menu width or make it Full website width even if menu is in container. Column Max width will take width value from Menu Column Width and multiply it by Menu Columns.

Also you can set menu drop down width as header container width. This option depends on Header container in Olegnax > Mega Menu > Configuration so you need to make sure that it is set correctly.

Hide subcategories - you can hide categories in drop down and show content only.

Category Image - you can add image above menu item.

 

Mega Menu Drop Down Layouts

 

Mega menu has 4 custom content blocks with 4 basic layouts. Side blocks also comes with width option. You can choose from full width to one sixth. To disable block simple leave it empty (without spaces)

Custom blocks support widgets so you can add any content including product sliders or banners.

You can create numerous content combinations by changing layouts, adding content to different blocks and adjusting their width. For example, below you can see mega menu drop down with 3rd layout (left/top,categories /right /bottom). Further below you can find sample content and settings for drop downs from all the theme demos.

 

Olegnax Mega Menu Sample Data

 

Default "Women" Drop Down

Right Html Width: One third. Right Html Block content:

{{widget type="Olegnax\ProductSlider\Block\ProductsByCategory" show_title="1" title="Sale" title_align="center" title_tag="h5" title_side_line="1" products_count="5" category_ids="108" template="Olegnax_ProductSlider::carousel.phtml" cache_lifetime="1" columns_desktop="2" columns_desktop_small="2" columns_tablet="2" columns_mobile="2" loop="0" rewind="0" nav="1" nav_position="title" dots="0" autoplay="0" show_addtocart="1" show_wishlist="1" show_compare="1" show_review="0" show_quickview="0" type_name="Olegnax - Products List by Category"}}
 

Default "Men" Drop Down

Bottom Html Block content:

<div class="ox-border-top ox-space-between">
<a  href="#"  class="bg-hover h6 no-margin" style="font-size: 14px; font-weight:800">SHOP ALL MEN</a>
<h6 class="no-margin" style="    font-size: 14px;    line-height: 1.43;  font-weight:800"><span style="color:#a4c316">GET AN EXTRA 50% OFF THE SALE!</span>  ENTER PROMO CODE <span style="color:#ff5400">MEN50</span> AT CHECKOUT</h5>
</div>

Top Html Block content:

<div class="ox-border-bottom">
<h3>Men’s sportswear</h3>
<p>Sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam</p>
<a class="button" href="#"><span><span>Explore</span></a>
</div>

Right Html Width: One third. Right Html Block content:

<div class="a-center"><img src="{{media url="athlete2/Demos/default/menu/watch_banner.jpg"}}" alt="" /></div>
 

Default "Sports" Drop Down

Bottom Html Block content:

<div class="a-center std content ox-border-top">
<a class="h6" style="font-size:14px" href="#">BASEBALL</a>&nbsp;&nbsp;
<a class="h6" style="font-size:14px" href="#">GOLF</a>&nbsp;&nbsp;
<a class="h6" style="font-size:14px" href="#">SKATEBOARDING</a>&nbsp;&nbsp;
<a class="h6" style="font-size:14px" href="#">SNOWBOARDING</a>&nbsp;&nbsp;
<a class="h6" style="font-size:14px" href="#">TENNIS</a>
</div>

Top Html Block content:

<div class="container std a-center">
<div class="row">
<div class="col-6 col-lg-2 no-padding">
	<div class="relative" style="margin:20px 0;">
		<a href="#" class="no-padding"><img src="{{media url="athlete2/Demos/default/menu/menu_01.jpg"}}" alt="" />  </a>
		
	</div>
	<a class="h6" href="#"><span>Training</span></a>
</div>
<div class="col-6 col-lg-2 no-padding">
	<div class="relative" style="margin:20px 0;">
		<a href="#" class="no-padding"><img src="{{media url="athlete2/Demos/default/menu/menu_02.jpg"}}" alt="" />  </a>
		<span class="ox-vertical-separator"></span>
	</div>
	<a class="h6" href="#"><span>Snowboarding</span></a>
</div>
<div class="col-6 col-lg-2 no-padding">
	<div class="relative" style="margin:20px 0;">
		<a href="#" class="no-padding"><img src="{{media url="athlete2/Demos/default/menu/menu_03.jpg"}}" alt="" />  </a>
		<span class="ox-vertical-separator"></span>
	</div>
	<a class="h6" href="#"><span>Soccer</span></a>
</div>
<div class="col-6 col-lg-2 no-padding">
	<div class="relative" style="margin:20px 0;">
		<a href="#" class="no-padding"><img src="{{media url="athlete2/Demos/default/menu/menu_04.jpg"}}" alt="" />  </a>
		<span class="ox-vertical-separator"></span>
	</div>
	<a class="h6" href="#"><span>Apparel</span></a>
</div>
<div class="col-6 col-lg-2 no-padding">
	<div class="relative" style="margin:20px 0;">
		<a href="#" class="no-padding"><img src="{{media url="athlete2/Demos/default/menu/menu_05.jpg"}}" alt="" />  </a>
		<span class="ox-vertical-separator"></span>
	</div>
	<a class="h6" href="#"><span>Golf</span></a>
</div>

<div class="col-6 col-lg-2 no-padding">
	<div class="relative" style="margin:20px 0;">
		<a href="#" class="no-padding"><img src="{{media url="athlete2/Demos/default/menu/menu_06.jpg"}}" alt="" />  </a>
		<span class="ox-vertical-separator"></span>
	</div>
	<a class="h6" href="#"><span>Computers</span></a>
</div>
</div>
</div>
 

Default "Demos" Drop Down

Top Html Block content:

<div class="a-center std container">
<h4 class="no-margin">TONS OF FEATURES </h4>
<h4 class="no-margin">Hundreds of COLOR OPTIONS </h4>
<div class="spacer-small"></div>
<div class="row">
    <div class="col-lg-3">
        <div class="ox-banner ox-banner-content-overlay h-center v-center">
            <a class="ox-banner-link" href="https://athlete2.com/fr/">			
                <img src="{{media url="wysiwyg/demo-fr.jpg"}}" alt="" />
                <span class="ox-banner-container">
                    <span class="button primary big-wide ox-show-hover ox-moveup-hover">explore</span>
                </span>	
            </a>
        </div>
        <h6 style="margin:15px 0 10px 0;">Demo French</h6>
        <p style="font-size: 13px;line-height: 1.4;">Wider, Bigger Drop downs, Slideout search, Tabs in descrition, Actions as Icon, etc.</p>
    </div>
    <div class="col-lg-3">
        <div class="ox-banner ox-banner-content-overlay h-center v-center">
            <a class="ox-banner-link" href="https://athlete2.com/br/">			
                <img src="{{media url="wysiwyg/demo-br.jpg"}}" alt="" />
                <span class="ox-banner-container">
                    <span class="button primary big-wide ox-show-hover ox-moveup-hover">explore</span>
                </span>	
            </a>
        </div>
        <h6 style="margin:15px 0 10px 0;">Demo Brazil</h6>
        <p style="font-size: 13px;line-height: 1.4;">Massive content store with menu below header. Light colored.</p>
    </div>
    <div class="col-lg-3">
        <div class="ox-banner ox-banner-content-overlay h-center v-center">
            <a class="ox-banner-link" href="https://athlete2.com/us/">			
                <img src="{{media url="wysiwyg/demo-us.jpg"}}" alt="" />
                <span class="ox-banner-container">
                    <span class="button primary big-wide ox-show-hover ox-moveup-hover">explore</span>
                </span>	
            </a>
        </div>
        <h6 style="margin:15px 0 10px 0;">Demo USA</h6>
        <p style="font-size: 13px;line-height: 1.4;">Clean design. Small header. Slideouts. Massive Revolution slider usage.</p>
    </div>
    <div class="col-lg-3">
        <div class="ox-banner ox-banner-content-overlay h-center v-center">
            <a class="ox-banner-link" href="https://athlete2.com/greece/">			
                <img src="{{media url="wysiwyg/demo-gr.jpg"}}" alt="" />
                <span class="ox-banner-container">
                    <span class="button primary big-wide ox-show-hover ox-moveup-hover">explore</span>
                </span>	
            </a>
        </div>
        <h6 style="margin:15px 0 10px 0;">Demo Greece</h6>
        <p style="font-size: 13px;line-height: 1.4;">Ultra Modern design.  Stylish dark header and menu. Fullscreen search. Massive banners.</p>
    </div>
</div>

<a href="https://athlete2.com/landing" style="margin-top: 20px;" class="button primary">explore features</a>
</div>
 

Greece "Women" Drop Down

Left Html Block content:
<div class="row">
<div class="col-lg-6" style="padding:0 5%">
<h6 style="color:#2a40ff;letter-spacing: 4px;font-weight: 600;">men's clothes</h6>
<div class="h1 huge huge-spacing" style="color:#2a40ff;">go hard</div>
<div class="h1 huge huge-spacing">or go </div>
<div class="h1 huge huge-spacing">home</div>
<div class="spacer-regular">&nbsp;</div>
</div>
<div class="col-lg-6">
<ul class="list-margins links-bg-hover"><li><a href="#" class="h6" style="color:#2a40ff; background:none">NOW: $30 OFF $100+ OUTLET</a></li>
<li><a href="#" class="h6">NEW ARRIVALS</a></li>
<li><a href="#" class="h6">BEST SELLERS</a></li>
<li><a href="#" class="h6">GIFT GUIDE</a></li>
<li><a href="#" class="h6">PROJECT ROCK</a></li>
<li><a href="#" class="h6">ATHLETE RECOVERY</a></li>
<li><a href="#" class="h6">CUSTOMIZED GEAR</a></li>
<li><a href="#" class="h6">BUILT FOR YOU</a></li>
<li><a href="#" class="h6">OUTLET</a></li>
<li>&nbsp;</li>
<li><a href="#" class="h6">SHOP ALL MEN'S</a></li></ul>
</div>
</div>
 

Greece "Men" Drop Down

Left Html Block
<ul class="list-margins links-bg-hover"><li><a href="#" class="h6" style="color:#2a40ff; background:none">NOW: $30 OFF $100+ OUTLET</a></li>
<li><a href="#" class="h6">NEW ARRIVALS</a></li>
<li><a href="#" class="h6">BEST SELLERS</a></li>
<li><a href="#" class="h6">GIFT GUIDE</a></li>
<li><a href="#" class="h6">PROJECT ROCK</a></li>
<li><a href="#" class="h6">ATHLETE RECOVERY</a></li>
<li><a href="#" class="h6">CUSTOMIZED GEAR</a></li>
<li><a href="#" class="h6">BUILT FOR YOU</a></li>
<li><a href="#" class="h6">OUTLET</a></li>
<li>&nbsp;</li>
<li><a href="#" class="h6">SHOP ALL MEN'S</a></li></ul>
Right Html Block
<div class="row">
    <div class="col-lg-4 ox-margin ox-margin-lg-no">
        <div class="ox-banner ox-img-zoom-out-hover ox-banner-content-overlay h-center v-center">
            <a class="ox-banner-link" href="#">
               <img src="{{media url="athlete2/Demos/greece/menu/greece-menu-banner-03.jpg"}}" alt="" />
                <span class="ox-banner-container">
                    <span class="h4" style="color:white">Bikes <br>& Cycling </span> 
                </span>	
            </a>
        </div>
    </div>
    <div class="col-lg-4 ox-margin ox-margin-lg-no">
        <div class="ox-banner ox-img-zoom-out-hover ox-banner-content-overlay h-center v-center">
            <a class="ox-banner-link" href="#">
               <img src="{{media url="athlete2/Demos/greece/menu/greece-menu-banner-02.jpg"}}" alt="" />
                <span class="ox-banner-container">
                    <span class="h4" style="color:white">Gear</span> 
                </span>	
            </a>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="ox-banner ox-img-zoom-out-hover">
            <a class="ox-banner-link" href="#">
               <img src="{{media url="athlete2/Demos/greece/menu/greece-menu-banner-01.jpg"}}" alt="" />
            </a>
        </div>
    </div>
</div>
 

Greece "Sports" Drop Down

Bottom Html Block
<div class="a-center std content ox-border-top">
<a class="h6" style="font-size:14px" href="#">BASEBALL</a>&nbsp;&nbsp;
<a class="h6" style="font-size:14px" href="#">GOLF</a>&nbsp;&nbsp;
<a class="h6" style="font-size:14px" href="#">SKATEBOARDING</a>&nbsp;&nbsp;
<a class="h6" style="font-size:14px" href="#">SNOWBOARDING</a>&nbsp;&nbsp;
<a class="h6" style="font-size:14px" href="#">TENNIS</a>
</div>
Top Html Block Content:
<div class="container std a-center">
<div class="row">
<div class="col-6 col-lg-2 no-padding">
	<div class="relative" style="margin:20px 0;">
            <div class="ox-zoom-out-hover">
		<a href="#" class="no-padding"><img src="{{media url="athlete2/Demos/greece/menu/greece-menu-banner-cat-02.jpg"}}" alt="" /></a>
            </div>
	</div>
	<a class="h6" href="#"><span>Training</span></a>
</div>
<div class="col-6 col-lg-2 no-padding">
	<div class="relative" style="margin:20px 0;">
            <div class="ox-zoom-out-hover">
		<a href="#" class="no-padding"><img src="{{media url="athlete2/Demos/greece/menu/greece-menu-banner-cat-05.jpg"}}" alt="" /></a>		
            </div>
            <span class="ox-vertical-separator hide-on-mobile hide-on-tablet"></span>
	</div>
	<a class="h6" href="#"><span>Snowboarding</span></a>
</div>
<div class="col-6 col-lg-2 no-padding">
	<div class="relative" style="margin:20px 0;">
            <div class="ox-zoom-out-hover">
		<a href="#" class="no-padding"><img src="{{media url="athlete2/Demos/greece/menu/greece-menu-banner-cat-01.jpg"}}" alt="" /></a>
            </div>
            <span class="ox-vertical-separator hide-on-mobile hide-on-tablet"></span>
	</div>
	<a class="h6" href="#"><span>Soccer</span></a>
</div>
<div class="col-6 col-lg-2 no-padding">
	<div class="relative" style="margin:20px 0;">
            <div class="ox-zoom-out-hover">
		<a href="#" class="no-padding"><img src="{{media url="athlete2/Demos/greece/menu/greece-menu-banner-cat-06.jpg"}}" alt="" /></a>
            </div>
            <span class="ox-vertical-separator hide-on-mobile hide-on-tablet"></span>
	</div>
	<a class="h6" href="#"><span>Apparel</span></a>
</div>
<div class="col-6 col-lg-2 no-padding">
	<div class="relative" style="margin:20px 0;">
            <div class="ox-zoom-out-hover">
		<a href="#" class="no-padding"><img src="{{media url="athlete2/Demos/greece/menu/greece-menu-banner-cat-04.jpg"}}" alt="" /></a>
            </div>
            <span class="ox-vertical-separator hide-on-mobile hide-on-tablet"></span>
	</div>
	<a class="h6" href="#"><span>Golf</span></a>
</div>

<div class="col-6 col-lg-2 no-padding">
	<div class="relative" style="margin:20px 0;">
            <div class="ox-zoom-out-hover">
		<a href="#" class="no-padding"><img src="{{media url="athlete2/Demos/greece/menu/greece-menu-banner-cat-03.jpg"}}" alt="" /></a>
            </div>
            <span class="ox-vertical-separator hide-on-mobile hide-on-tablet"></span>
	</div>
	<a class="h6" href="#"><span>Computers</span></a>
</div>
</div>
</div>
 

Greece "Demos" Drop Down

Top Html Block content:

<div class="row" style="padding:2%;">
    <div class="col-lg-3">
        <h6 style="color:#284aff;letter-spacing: 4px;font-weight: 600;margin-bottom:7px">predefined theme</h6>
        <div class="h1 huge huge-spacing">demos</div>
        <div class="spacer-small"></div>
        <h6 style="text-transform: initial; line-height: 1.6; margin-bottom:44px; padding-right: 20%;">A few examples of what you can do with  Athelte theme. Stylish design. Tons of options. 
        The Spirit of an Athlete.</h6>
        <a href="https://athlete2.com/landing" class="button long h6 primary" style="/* margin-top:20px; *//* margin-left: -15px; */">view all</a>
    </div>
    <div class="col-lg-9">
        <div class="row a-center">
            <div class="col-lg-3">
                <div class="ox-banner ox-banner-content-overlay h-center v-center">
                    <a class="ox-banner-link" href="https://athlete2.com/default">			
                <img src="{{media url="wysiwyg/demo-en.jpg"}}" alt="" />
                        <span class="ox-banner-container">
                            <span class="button primary big-wide ox-show-hover ox-moveup-hover">explore</span>
                        </span>	
                    </a>
                </div>
                <h6 style="margin:20px 0 12px 0;">Demo English</h6>
                <p style="font-size: 13px;line-height: 1.4;color:#b4b4b4">Classic Athlete Theme. Small Drop downs, Visible search, minimum of content.</p>
            </div>
            <div class="col-lg-3">
                <div class="ox-banner ox-banner-content-overlay h-center v-center">
                    <a class="ox-banner-link" href="https://athlete2.com/fr">			
                <img src="{{media url="wysiwyg/demo-fr.jpg"}}" alt="" />
                        <span class="ox-banner-container">
                            <span class="button primary big-wide ox-show-hover ox-moveup-hover">explore</span>
                        </span>	
                    </a>
                </div>
                <h6 style="margin:20px 0 12px 0;">Demo french</h6>
                <p style="font-size: 13px;line-height: 1.4;color:#b4b4b4">Wider, Bigger Drop downs, Slideout search, Tabs in descrition, Actions as Icon, etc</p>
            </div>
            <div class="col-lg-3">
                <div class="ox-banner ox-banner-content-overlay h-center v-center">
                    <a class="ox-banner-link" href="https://athlete2.com/br">			
                <img src="{{media url="wysiwyg/demo-br.jpg"}}" alt="" />
                        <span class="ox-banner-container">
                            <span class="button primary big-wide ox-show-hover ox-moveup-hover">explore</span>
                        </span>	
                    </a>
                </div>
                <h6 style="margin:20px 0 12px 0;">Demo brazil</h6>
                <p style="font-size: 13px;line-height: 1.4;color:#b4b4b4">Massive content store with menu below header. Light colored. </p>
            </div>
            <div class="col-lg-3">
                <div class="ox-banner ox-banner-content-overlay h-center v-center">
                    <a class="ox-banner-link" href="https://athlete2.com/us">			
                <img src="{{media url="wysiwyg/demo-us.jpg"}}" alt="" />
                        <span class="ox-banner-container">
                            <span class="button primary big-wide ox-show-hover ox-moveup-hover">explore</span>
                        </span>	
                    </a>
                </div>
                <h6 style="margin:20px 0 12px 0;">Demo USA</h6>
                <p style="font-size: 13px;line-height: 1.4;color:#b4b4b4">Clean design. Small header. Slideouts. Massive Revolution slider usage.</p>
            </div>
        </div>
    </div>
</div>