[cXF] Mega Menu Tab

[cXF] Mega Menu Tab 1.1.0

No permission to download
Overview Q&A Updates (3) History Thread for updates
Q: Where can I add the custom code for mega menu?
A: In admin control panel go to Appearance > Templates and search for cxf_mega_menu_tab_desktop_content (for larger screens) and cxf_mega_menu_tab_mobile_content (for mobile). By default they are empty.

For help and example you can add the code below to get similar look of what you can see on this site:
HTML: 
<div class="cxf-megaMenu">
    <div class="cxf-megaMenu-column">
        <h3>First Category</h3>
        <ul>
            <li><a href="#">Test link</a></li>
            <li><a href="#">Another test link</a></li>
            <li><a href="#">Just testing</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Maybe longer test link</a></li>
            <li><a href="#">Other links</a></li>
            <li><a href="#">New link</a></li>
            <li><a href="#">End link</a></li>
        </ul>
    </div>

    <div class="cxf-megaMenu-column">
        <h3>Home</h3>
        <ul>
            <li><a href="#">Hometown</a></li>
            <li><a href="#">Room</a></li>
            <li><a href="#">Garden</a></li>
        </ul>

        <h3>Far far away</h3>
        <ul>
            <li><a href="#">Sea</a></li>
            <li><a href="#">Mountains</a></li>
            <li><a href="#">Hills</a></li>
        </ul>
    </div>

    <div class="cxf-megaMenu-column">
        <h3>Some category</h3>
        <ul>
            <li><a href="#">customizeXF</a></li>
            <li><a href="#">Add-ons</a></li>
            <li><a href="#">DIY</a></li>
            <li><a href="#">Icons</a></li>
            <li><a href="#">Nodes</a></li>
            <li><a href="#">Style properties</a></li>
            <li><a href="#">Options</a></li>
            <li><a href="#">Admin</a></li>
        </ul>
    </div>

    <div class="cxf-megaMenu-column">
        <h3>Related Categories</h3>
        <ul>
            <li><a href="#">XenForo</a></li>
            <li><a href="#">Forums</a></li>
            <li><a href="#">Website</a></li>
        </ul>

        <h3>Contact</h3>
        <ul>
            <li><a href="#">Hello</a></li>
            <li><a href="#">The end</a></li>
        </ul>
    </div>
</div>
*note: CSS code for classes is already implemented in the LESS template. If you want a different look, just add your CSS code to extra.less template.
  • Support
  • Membership
    • Back
    Top