Wordpress mega menu widget mobile styling issues with existing template

Question

This is my website - http://pl.bodwell.edu. Its a Wordpress site running a customized template(http://sketchthemes.com/samples/invert-business-demo/) and a widget called Max Mega menu(http://www.maxmegamenu.com/).

The problem I've got is that with the template's top nav bar and the nested menu when in mobile view. The nav bar is supposed to shrink as the user scrolls down the page. The menu and nav bar work great together in desktop screen size above 1024px width. However, when the viewport is shrunk below that, and the mobile menu triggers and replaces the full width menu that's when I have a problem.

The mobile menu works great when the page is at the top and the full header is in effect. But, when you scroll down and the minimal header comes into play, the mobile menu shifts up and covers the on/off toggle so the user cannot toggle the menu on and off - unless they scroll back all the way up, and the menu appears below the toggle (which is what I want). I've been using Firebug to see what the proper CSS selector is so I can forcefully shift the menu down, but I cannot for the life of me figure it out. I am not sure if it has something to do with the templates javascript that is responsible for minimizing the top header when scrolling down the page.

So I don't know if this is a purely CSS problem, a JS problem, or a combination of both.

Here is my CSS as it pertains to the menu styling.

#header.skehead-headernav-shrink { height: 60px; }
#skenav {background:none repeat scroll 0 0 transparent;  display:block;  margin-left:auto;  margin-  
right:auto;  border:medium none;  } 
#skenav .ske-menu, ul.menu {  font-size: 13px;  margin: 0px;  display:inline-block;  width:auto;  
float:right;  }
#skenav .ske-menu ul.menu {  list-style: none;  margin: 0;  }
#skenav .ske-menu .menu li, ul.menu li {  float: left;  position: relative;  margin-left: 0px;  
list-style: none outside none;  }
#skenav a {color: #333333;display: block;font-size: 13px; text-transform:uppercase; line-height: 
85px; padding: 0 22px;text-decoration: none;
transition: color 0.1s linear 0s, background 0.1s linear 0s;    -webkit-transition: color 0.1s 
linear 0s, background 0.1s linear 0s;   -moz-transition: color 0.1s linear 0s, background 0.1s 
linear 0s;      -o-transition: color 0.1s linear 0s, background 0.1s linear 0s;  }
#skenav ul ul {  position: absolute;  top: 100%;  left: 0px;  float: left;  width: 200px;  z-index: 
99999;  }
#skenav ul .sub-menu li ,#skenav ul ul li {  display: block; width:100%;  }
#skenav ul .children li:first-child,  #skenav ul .sub-menu li:first-child {  border-top: none;  }
#skenav ul ul li{  border-top: 1px solid rgba(0,0,0,.15);  }
#skenav ul ul ul.sub-menu,#skenav ul ul ul.children{  left: 100%;  top: 0px !important; border-top: 0 none;margin-top:0;  }
#skenav ul ul a {  line-height: 1.2em;  font-size: 13px;  padding: 10px 20px;  width: auto;  height: auto;  color: #FFFFFF;  }
#header.skehead-headernav-shrink #skenav ul ul a {  line-height: 1.2em;  }
#skenav ul li:hover{  z-index:999999999999;  }
* html #skenav ul li.current_page_item a, * html #skenav ul li.current-menu-ancestor a, * html #skenav ul li.current-menu-item a, * html #skenav ul li.current-menu-parent a, * html #skenav ul li a:hover {  color: #fff;  }

If anybody out there has the inclination to take a look at my site and help me out, I would truly appreciate it.

user4639630 user4639630 · Accepted Answer · 2015-03-06T05:18:21

#header.skehead-headernav-shrink {
    height: 60px;
}
#skenav {
    background:none repeat scroll 0 0 transparent;
    display:block;
    margin-left:auto;
    margin- right:auto;
    border:medium none;
}
#skenav .ske-menu, ul.menu {
    font-size: 13px;
    margin: 0px;
    display:inline-block;
    width:auto;
    float:right;
}
#skenav .ske-menu ul.menu {
    list-style: none;
    margin: 0;
}
#skenav .ske-menu .menu li, ul.menu li {
    float: left;
    position: relative;
    margin-left: 0px;
    list-style: none outside none;
}
#skenav a {
    color: #333333;
    display: block;
    font-size: 13px;
    text-transform:uppercase;
    line-height: 85px;
    padding: 0 22px;
    text-decoration: none;
    transition: color 0.1s linear 0s, background 0.1s linear 0s;
    -webkit-transition: color 0.1s linear 0s, background 0.1s linear 0s;
    -moz-transition: color 0.1s linear 0s, background 0.1s linear 0s;
    -o-transition: color 0.1s linear 0s, background 0.1s linear 0s;
}
#skenav ul ul {
    position: absolute;
    top: 100%;
    left: 0px;
    float: left;
    width: 200px;
    z-index: 99999;
}
#skenav ul .sub-menu li, #skenav ul ul li {
    display: block;
    width:100%;
}
#skenav ul .children li:first-child, #skenav ul .sub-menu li:first-child {
    border-top: none;
}
#skenav ul ul li {
    border-top: 1px solid rgba(0, 0, 0, .15);
}
#skenav ul ul ul.sub-menu, #skenav ul ul ul.children {
    left: 100%;
    top: 0px !important;
    border-top: 0 none;
    margin-top:0;
}
#skenav ul ul a {
    line-height: 1.2em;
    font-size: 13px;
    padding: 10px 20px;
    width: auto;
    height: auto;
    color: #FFFFFF;
}
#header.skehead-headernav-shrink #skenav ul ul a {
    line-height: 1.2em;
}
#skenav ul li:hover {
    z-index:999999999999;
}
* html #skenav ul li.current_page_item a, * html #skenav ul li.current-menu-ancestor a, * html #skenav ul li.current-menu-item a, * html #skenav ul li.current-menu-parent a, * html #skenav ul li a:hover {
    color: #fff;
}

Wordpress mega menu widget mobile styling issues with existing template

1 Answers