Why does my navigation bar disappear when scrolling? - html

Question

This is the website I'm currently have to work with: https://www.mpc.gov.my/home. Everything seems fine when you view using a desktop or big screen, but when you try to browse it using a mobile/smaller screen the navigation menu is giving the user a headache.
How can I fix it? I don't want the menu to disappear if I scroll down. Anyone get any ideas?
$(document).ready(function() {
"use strict";
$('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon');
$('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
$(".menu > ul").before(" ");
$(".menu > ul > li").hover(function(e) {
if ($(window).width() > 943) {
$(this).children("ul").stop(true, false).fadeToggle(150);
e.preventDefault();
}
});
$(".menu > ul > li").click(function() {
if ($(window).width() <= 943) {
$(this).children("ul").fadeToggle(150);
}
});
$(".menu-mobile").click(function(e) {
$(".menu > ul").toggleClass('show-on-mobile');
e.preventDefault();
});
});
$(window).resize(function() {
$(".menu > ul > li").children("ul").hide();
$(".menu > ul").removeClass('show-on-mobile');
});
/*===================================
Third Mega Menu
=====================================*/
.menu {
width: 100%;
}
.menu-container {
margin: 0 auto;
background: #e9e9e9;
}
.menu a.logo {
display: inline-block;
padding: 1.5em 3em;
width: 19%;
float: left;
}
.menu img {
max-width: 100%;
}
.menu-mobile {
display: none;
padding: 20px;
}
.menu-mobile:after {
content: "\f0c9";
font-family: "Font Awesome 5 Pro";
font-size: 2.5rem;
padding: 0;
float: right;
position: relative;
top: 50%;
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
}
.menu-dropdown-icon:before {
content: "\f0c9";
font-family: "Font Awesome 5 Pro";
display: none;
cursor: pointer;
float: right;
padding: 1.5em 2em;
background: #fff;
color: #333;
}
.menu>ul {
margin: 0 auto;
width: 100%;
list-style: none;
padding: 0;
position: relative;
/* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
box-sizing: border-box;
clear: right;
}
.menu>ul:before,
.menu>ul:after {
content: "";
display: table;
}
.menu>ul:after {
clear: both;
}
.menu>ul>li {
float: left;
background: #e9e9e9;
padding: 0;
width: 25%;
/* added- aidan */
margin: 0;
list-style: none!important;
}
.menu>ul>li a {
text-decoration: none;
padding: 1.5em 3em;
display: block;
}
.menu>ul>li:hover {
background: #f0f0f0;
}
.menu>ul>li>ul {
display: none;
width: 100%;
background: #f0f0f0;
padding: 20px;
position: absolute;
z-index: 99;
left: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
}
.menu>ul>li>ul:before,
.menu>ul>li>ul:after {
content: "";
display: table;
}
.menu>ul>li>ul:after {
clear: both;
}
.menu>ul>li>ul>li {
margin: 0;
padding-bottom: 0;
list-style: none;
width: 25%;
background: none;
float: left;
list-style: none!important;
/* added - aidan */
}
.menu>ul>li>ul>li a {
color: #777;
padding: .2em 0;
width: 95%;
display: block;
border-bottom: 1px solid #ccc;
}
.menu>ul>li>ul>li a:hover {
color: #03a9f4;
}
.menu>ul>li>ul>li>ul {
display: block;
padding: 0;
margin: 10px 0 0;
list-style: none;
box-sizing: border-box;
margin-left: 20px;
text-indent: -10px;
}
.menu>ul>li>ul>li>ul:before,
.menu>ul>li>ul>li>ul:after {
content: "";
display: table;
}
.menu>ul>li>ul>li>ul:after {
clear: both;
}
.menu>ul>li>ul>li>ul>li {
float: left;
width: 100%;
padding: 0px 0;
/*reduced to 0px - aidan */
list-style: none!important;
/*added -aidan */
margin: 0!important;
/*added !important - aidan*/
font-size: .8em;
}
.menu>ul>li>ul>li>ul>li a {
border: 0;
font-size: 14px;
}
.menu>ul>li>ul.normal-sub {
width: 300px;
left: auto;
padding: 10px 20px;
}
.menu>ul>li>ul.normal-sub>li {
width: 100%;
}
.menu>ul>li>ul.normal-sub>li a {
border: 0;
padding: 1em 0;
}
.head-sub {
font-weight: 700;
/* added - aidan */
color: #be1621!important;
/* added - aidan */
}
.mobile-vue {
display: none!important;
}
.desktop-vue {
display: block!important;
padding: 0px!important;
}
li.menu-dropdown-icon {
margin: 0px!important;
}
.img-desktop-vue {
max-width: 70%!important;
}
.tertiary-menu {
background-color: #e3e3e3;
/* added - aidan */
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#media only screen and (max-width: 991px) {
.mobile-vue {
display: block!important;
/*added - aidan*/
}
.desktop-vue {
display: none!important;
/*added - aidan*/
padding: unset;
}
li.menu-dropdown-icon {
margin: unset!important;
/*added - aidan*/
}
.menu-container {
width: 100%;
display: block;
}
.menu-container .menu {
display: inline-block;
}
.menu-mobile {
display: block;
float: right;
padding: 20px 20px 0;
}
.menu-dropdown-icon:before {
display: block;
}
.menu>ul {
display: none;
width: 100%;
}
.menu>ul>li {
width: 100%;
float: none;
display: block;
margin: 0!important;
/* added - aidan */
}
.menu>ul>li a {
padding: 1.5em;
width: 100%;
display: block;
color: #000000;
}
.menu>ul>li>ul {
position: relative;
padding: 0 40px;
}
.menu>ul>li>ul.normal-sub {
width: 100%;
}
.menu>ul>li>ul>li {
float: none;
width: 100%;
margin-top: 20px;
margin: 0!important;
/* added - aidan*/
}
.menu>ul>li>ul>li a {
width: 90%;
/* added - aidan */
}
.menu>ul>li>ul>li:first-child {
margin: 0;
}
.menu>ul>li>ul>li>ul {
position: relative;
}
.menu>ul>li>ul>li>ul>li {
float: none;
}
.menu .show-on-mobile {
display: block;
}
.container-mobil {
padding-left: unset!important;
padding-right: unset!important;
}
}
.fas,
.far {
padding-right: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="menu-container">
<div class="menu">
<ul class="clearfix">
<li>
<img src="/static_files/media_manager/1/Index-About-EN-1.png" class="img-desktop-vue">
ABOUT MPC
<ul>
<li>Corporate Info
<ul>
<li><i class="fas fa-building"></i> Background</li>
<li><i class="fas fa-bullseye"></i> Vision, Mission & Objectives</li>
<li><i class="fas fa-sitemap"></i> Board of Directors</li>
<li><i class="fas fa-sitemap"></i> MPC Management</li>
<li><i class="fas fa-sitemap"></i> Organisational Structure</li>
<li><i class="fas fa-file-contract"></i> Quality Policy</li>
<li><i class="fas fa-list-alt"></i> Client Charter</li>
<li><i class="fas fa-file-contract"></i> No Gift Policy</li>
<li><i class="fas fa-file-contract"></i> Anti-Corruption Plan</li>
</ul>
</li>
<li>Contact Us
<ul>
<li><i class="fas fa-address-book"></i> How To Contact Us?</li>
<li><i class="fas fa-users"></i> Staff Directory</li>
<li><i class="fas fa-tasks"></i> Frequently Asked Question</li>
<li><i class="fas fa-briefcase"></i> Career</li>
<li><i class="fas fa-chart-area"></i> Procurement</li>
</ul>
</li>
<li>Staff Access
<ul>
<li><i class="fas fa-globe"></i> Staff Portal</li>
<li><i class="fas fa-globe"></i> Procurement Information Center (PRINCE)</li>
<li><i class="fas fa-globe"></i> Finance Portal</li>
</ul>
</li>
</ul>
</li>
<li>
<img src="/static_files/media_manager/1/Index-Programme-EN-1.png" class="img-desktop-vue">
PROGRAMMES & SERVICES
<ul>
<li>Productivity Initiatives
<ul>
<li><i class="fas fa-passport"></i> Industry4WRD Readiness Assessment</li>
<li><i class="fas fa-clipboard-check"></i> Team Excellence Convention</li>
<li><i class="fas fa-briefcase"></i> Lean Management</li>
<li><i class="fas fa-cubes"></i> Enterprise Business Excellence</li>
<li><i class="fas fa-award"></i> Productivity Excellence Recognition</li>
<li><i class="fas fa-user-tie"></i> MPC Certified Productivity Specialist Programme</li>
<li><i class="fas fa-poll"></i> Productivity Best Practices Case Studies and Sharing</li>
<li><i class="fas fa-balance-scale"></i> Productivity 1010</li>
<li><i class="fas fa-quote-left"></i> Negeri Produktif</li>
<li><i class="fas fa-puzzle-piece"></i> Malaysia Productivity Blueprint</li>
<li><i class="fas fa-people-carry"></i> Productivity Nexus</li>
</ul>
</li>
<li>Productivity Online Services
<ul>
<li><i class="fas fa-globe"></i> Digital Regulatory Notification</li>
<li><i class="fas fa-globe"></i> QE Audit Application (Quality Environment)</li>
<li><i class="fas fa-globe"></i> Benchmarking Online Networking Database (BOND) Portal</li>
<li><i class="fas fa-globe"></i> ezBE Assessment Tool</li>
<li><i class="fas fa-globe"></i> Unified Public Consultation (UPC) Portal</li>
<li><i class="fas fa-globe"></i> WayUp Portal</li>
<li><i class="fas fa-globe"></i> Smart Regulation (#MyMudah)</li>
</ul>
</li>
<li>Business Virtual Advisory Services (VAS)
<ul>
<li><i class="fas fa-business-time"></i> Business Virtual Advisory Clinics (VAC)</li>
</ul>
</li>
<li>MPC Webinar Sessions With Experts
<ul>
<li><i class="fas fa-chalkboard-teacher"></i> MPC Webinar Sessions With Experts</li>
</ul>
</li>
<li>P&I Associate Membership
<ul>
<li><i class="fas fa-users"></i> P&I Associate Membership</li>
</ul>
</li>
<li>Events Calendar
<ul>
<li><i class="far fa-calendar-alt"></i> Events Calendar</li>
</ul>
</li>
</ul>
</li>
<li>
<img src="/static_files/media_manager/1/Index-Productivity-EN-1.png" class="img-desktop-vue">
PRODUCTIVITY & COMPETITIVENESS
<ul>
<li>Smart Regulation Towards A Robust Ecosystem
<ul>
<li><i class="fas fa-business-time"></i> Business Regulation Virtual Advisory Clinic</li>
<li><i class="fas fa-landmark"></i> Good Regulatory Practice (GRP)</li>
</ul>
</li>
<li>Workforce Of The Future
<ul>
<li class="menushow"><i class="fas fa-thumbs-up"></i> e-Shared Prosperity Organization (eSPO)</li>
</ul>
</li>
<li>Digitalisation And Technology
<ul>
<li><i class="fas fa-chalkboard-teacher"></i> Digitalisation And Technology</li>
</ul>
</li>
<li>Productivity Mindset
<ul>
<li><i class="fas fa-user-friends"></i> Programme and Activity</li>
<li><i class="fas fa-users-cog"></i> Sejahtera Productivity Culture Index</li>
</ul>
</li>
<li>Incentive Structure
<ul>
<li><i class="fas fa-gifts"></i> Incentive Structure</li>
</ul>
</li>
</ul>
</li>
<li>
<img src="/static_files/media_manager/1/Index-Media-EN-1.png" class="img-desktop-vue">
MEDIA & PUBLICATION
<ul>
<li>Media
<ul>
<li><i class="far fa-newspaper"></i> Press Release</li>
<li><i class="far fa-comment-alt"></i> Speeches</li>
<li><i class="fas fa-music"></i> Audio Gallery</li>
<li><i class="fas fa-video"></i> Video Gallery</li>
<li><i class="fas fa-envelope-open-text"></i> e-Newsletter</li>
</ul>
</li>
<li>Publication
<ul>
<li><i class="fas fa-network-wired"></i> Productivity Performance</li>
<li><i class="fas fa-chart-bar"></i> Competitiveness Report</li>
<li><i class="fas fa-chart-line"></i> Annual Report</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
Here is what happen when I scroll when in mobile view: https://youtu.be/UzLTU-Dzhes

Answer 1

if you inspect in your website, you can see that there is a display none in the menu :
.menu-container {
width: 100%;
display: none;
}
remove it and everything will work fine