Be sure your league is setup properly before installing any scripts.Setup Video
The Mobile Menu script clones the default MFL Main menu and on smaller screen sizes it will remove the MFL default menu and display a compact mobile friendly menu.
This script must be installed in a homepagemessage marked at "header".
The directory contains an "uncompressed" version of this script to allow for editing and self hosting. The script REQUIRES the use of font awesome , like many of our scripts. If you already have font awesome loaded then no need to add again. See below for instructions
All scripts require cache.js and font awesome file to be placed in a header message as the 1st line. Please review the section "Custom Scripts" Here
This script is already included in our custom template. Do not install it again. Custom template users do not need to load cache.js or font awesome.
Mobile MenuPlace in header message
<!-- MFL MOBILE MENU -->
<script>
var menuPositionY = 5; // Set px distance for menu to be displayed from top of page
var menuPositionIsLeft = false; // Set to true to show menu on left side of page; false for right
var showMenuIcons = true; // Set to false to remove icons from left side of text on menu list
var usePopupLogin = false; // Set this to true only if using the Player Popup and you have var ShowMFLlogin = true; and using the icon login
</script>
<script src="https://www.mflscripts.com/mfl-apps/mobileMenu/script.js"></script>
<style>
/***************************************/
/* MFL MOBILE REPLACEMENT MENU */
/***************************************/
/*************************************************/
/* menu button pullout */
/*************************************************/
#menu-trigger {
border: 1px solid #080e25;
background: #fff;
color: #B82601
}
/*************************************************/
/* menu container */
/*************************************************/
.myfantasyleague_menuMobile {
border-color: #080e25!important;
color: #fff;
background: #fff
}
/*************************************************/
/* text color for first level items */
/*************************************************/
.myfantasyleague_menuMobile>ul>li>a,
.myfantasyleague_menuMobile>ul>li>a:active,
.myfantasyleague_menuMobile>ul>li>a:visited,
.myfantasyleague_menuMobile>ul>li>a:hover {
color: #fff
}
/*************************************************/
/* text color for first level inner link */
/*************************************************/
.myfantasyleague_menuMobile>ul>li>ul>li>a,
.myfantasyleague_menuMobile>ul>li>ul>li>a:active,
.myfantasyleague_menuMobile>ul>li>ul>li>a:visited,
.myfantasyleague_menuMobile>ul>li>ul>li>a:hover {
color:#B82601;
background: #fff
}
/*************************************************/
/* text color for second level inner links */
/*************************************************/
.myfantasyleague_menuMobile>ul>li>ul>li>ul>li>a::before{
content: '';
width: 5px;
height: 5px;
-moz-border-radius: 7.5px;
-webkit-border-radius: 7.5px;
border-radius: 7.5px;
background: #B82601;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left:10px
}
.myfantasyleague_menuMobile>ul>li>ul>li>ul>li>a {
position:relative;
}
.myfantasyleague_menuMobile>ul>li>ul>li>ul>li>a,
.myfantasyleague_menuMobile>ul>li>ul>li>ul>li>a:active,
.myfantasyleague_menuMobile>ul>li>ul>li>ul>li>a:visited,
.myfantasyleague_menuMobile>ul>li>ul>li>ul>li>a:hover {
color: #080e25;
padding-left: 20px!important;
background: #fff;
}
/*************************************************/
/* background for menu links */
/*************************************************/
.myfantasyleague_menuMobile a,.myfantasyleague_menuMobile a:active {
background: #B82601;
border-bottom: 1px solid #080e25;
}
/*************************************************/
/* background for active first level drop down menu links */
/*************************************************/
.myfantasyleague_menuMobile>ul>li.has-sub.arrow-down>a {
background: #080e25
}
/*************************************************/
/* background and text color for active second level drop items */
/*************************************************/
.myfantasyleague_menuMobile>ul>li.has-sub>ul>li.has-sub.sub-arrow-down>a {
background: #fff;
color: #080e25
}
/*************************************************/
/* mobile menu animated up and down arrows */
/*************************************************/
.myfantasyleague_menuMobile>ul>li>ul>li>a {
position:relative
}
.myfantasyleague_menuMobile span.menu_arrow {
width: 20px;
height: 20px;
position: absolute;
right: 5px;
border-radius: 5px;
background: #fff;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
display:block;
}
.myfantasyleague_menuMobile span.menu_arrow:before {
content: "";
display: block!important;
height: 2px;
left: 50%;
margin-left: -8px;
margin-top: 0;
position: absolute;
top: 50%;
transform: rotate(45deg);
transition: all .25s ease;
width: 10px;
}
.myfantasyleague_menuMobile span.menu_arrow:after {
content: "";
display: block!important;
height: 10px;
left: 50%;
margin-left: 2px;
margin-top: -4px;
position: absolute;
top: 50%;
transform: rotate(45deg);
transition: all .25s ease;
width: 2px;
}
.myfantasyleague_menuMobile span.menu_arrow:before,
.myfantasyleague_menuMobile span.menu_arrow:after {
background:#B82601
}
.myfantasyleague_menuMobile .arrow-down>a span.menu_arrow:before,
.myfantasyleague_menuMobile .sub-arrow-down>a span.menu_arrow:before,
.myfantasyleague_menuMobile .arrow-down>a span.menu_arrow:after,
.myfantasyleague_menuMobile .sub-arrow-down>a span.menu_arrow:after{
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
transition: all .25s ease;
background: #080e25;
}
/*************************************************/
/* RESPONSIVE STYLE TO SHOW MENU */
/*************************************************/
@media only screen and (max-width: 48em){
#menu-trigger,
.myfantasyleague_menuMobile {
display: block!important
}
.myfantasyleague_menu,
#icon-wrapper,
.myfantasyleague_menu .notification-icon-search {
display: none;
}
}
</style>