Customisation is very simple, to add your own links, images and video etc. modify;
extensions/MegaMenu/includes/MegaMenu.phpLayout modifications are carried out by modifying
extensions/MegaMenu/modules/ext.MegaMenu.cssAddition features such as Font Awesome (pre installed in the latest version) can be added to MegaMenu and Mediawiki content, see here for more information.
When I first presented a new Mediawiki design (which included MegaMenu) to a client they commented on the Sidebar, after all why have the ability to include a couple of hundred links and keep the Sidebar? The client also commented on the tiny logo! View the client site here.
If you would like to customise Megamenu further so that it fits more seamlessly within Mediawiki add the following to Medawiki:Common.css. This edit removes the Sidebar, lowers the content div, along with in content navigation, so that a larger logo can be added to the top of the page.
#p-tb { display: none; }
#sidebar h3 { color: #080; }
#mw-page-base {
height: 5em;
background-color: transparent;
background-image: none;
background-image: none;
background-position: bottom left;
background-repeat: repeat-x;
}
div#content {
margin-top: 44px;
background-color: rgba(255,255,255,0.6);
color: inherit;
border: 1px solid #eee;
box-shadow: 0 0 .5em #999;
border-radius: 2px;
padding: 1.556em 2em 2em;
margin-right: 20px!important;
margin-bottom: .5em;
overflow: hidden;
word-wrap: break-word;
margin-left: 20px!important;
}
div#mw-head {
margin-top: 140px;
}
#p-logo a {
display: block;
width: 400px;
height: 150px;
background-repeat: no-repeat;
background-position: center center;
text-decoration: none;
margin-top: -34px;
margin-left: 184px;
margin-bottom:20px;
}
div.vectorTabs li.selected {
background-image: none;
background: none;
}
div#mw-panel {
background-color: rgba(255,255,255,0.6);
color: inherit;
border: 1px solid #eee;
box-shadow: 0 0 .5em #999;
border-radius: 2px;
margin-top: 35px;
width: 12%;
margin-left: 17px;
}
#mw-panel.collapsible-nav .portal h3 {
background-image:none;
padding: 4px 0 0px 0.2em;
margin-bottom: 0;
}
#p-personal {
position: absolute;
top: 7em;
right: 0.75em;
z-index: 1;
}
div.vectorTabs {
background-image:none;
}
div.vectorTabs span {
background-image:none;
}
div.vectorMenu h3 a {
background-image:none;
}
#firstHeading {
margin-top:45px;
}
#newlogo {
box-shadow: none!important;
margin-left: 100px;
margin-top: -50px;
}
#left-navigation {
margin-left: 25px!important;
margin-top: 96px;
}
#right-navigation {
float: right;
margin-top: 96px;
margin-right: 25px;
}NOTE: You may need to fine tune the above a little!
NOTE: Before trying the next take a backup copy of Vector!
Open the "Vector.php" file and find the following (around line 163);
require_once( "$IP/extensions/MegaMenu/MegaMenu.php" );
Directly above this paste;
<div id="newlogo"><a href="./index.php?title=Main_Page"><img src="./skins/common/images/wiki.png" alt="" /></a></div>
Replacing the logo for something a little larger than the default Mediawiki version.