I am currently utilizing the meanmenu plugin to create a responsive menu for mobile devices. My goal is to fix the position of the menu at the bottom of the page so that users can easily access it.
However, when I set the position of the meancontainer to fixed instead of relative, I encounter an issue where scrolling through the expanded menu becomes impossible.
The markup code I am using is as follows:
/* When the viewport size is reduced, .mean-container is added to the body */
.mean-container .mean-bar {
width: 100%;
height: 40px;
position: relative;
background: #fff;
padding: 4px 0;
border-bottom: 1px solid rgba(157, 157, 157, 0.2);
z-index: 999999;
top: 0;
}
.mean-container a.meanmenu-reveal {
width: 22px;
height: 22px;
padding: 13px 13px 11px 13px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
color: rgba(157,157,157,1);
text-decoration: none;
font-size: 16px;
text-indent: -9999em;
line-height: 22px;
font-size: 1px;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-weight: 700;
}
Plugin source: https://github.com/meanthemes/meanMenu Page source: