Skip to content

Commit 0d6e113

Browse files
abhishek-anandabhishek-anand
committed
fixing mobile menu and 404
1 parent b56e3e8 commit 0d6e113

File tree

9 files changed

+1255
-52
lines changed

9 files changed

+1255
-52
lines changed

‎404.html‎

Lines changed: 675 additions & 52 deletions
Large diffs are not rendered by default.

‎contactus.html‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -425,12 +425,55 @@
425425
font-size: 0.875rem;
426426
}
427427

428+
/* Mobile Menu */
429+
.mobile-menu-toggle {
430+
display: none;
431+
background: none;
432+
border: none;
433+
font-size: 1.5rem;
434+
color: var(--text-primary);
435+
cursor: pointer;
436+
padding: 0.5rem;
437+
border-radius: 8px;
438+
transition: all 0.3s ease;
439+
}
440+
441+
.mobile-menu-toggle:hover {
442+
background: var(--secondary-color);
443+
color: var(--accent-color);
444+
}
445+
446+
.nav-menu.active {
447+
display: flex;
448+
position: fixed;
449+
top: 0;
450+
left: 0;
451+
width: 100%;
452+
height: 100vh;
453+
background: rgba(255, 255, 255, 0.98);
454+
backdrop-filter: blur(20px);
455+
flex-direction: column;
456+
justify-content: center;
457+
align-items: center;
458+
gap: 2rem;
459+
z-index: 999;
460+
}
461+
462+
.nav-menu.active .nav-item a {
463+
font-size: 1.5rem;
464+
font-weight: 600;
465+
}
466+
428467
/* Responsive Design */
429468
@media (max-width: 768px) {
430469
.nav-menu {
431470
display: none;
432471
}
433472

473+
.mobile-menu-toggle {
474+
display: block;
475+
}
476+
434477
.contact-title {
435478
font-size: 2.5rem;
436479
}
@@ -532,6 +575,9 @@
532575
<li class="nav-item"><a href="contactus.html">Contact</a></li>
533576
</ul>
534577
<a href="https://dashboard.fallible.co/login" class="cta-button">Dashboard</a>
578+
<button class="mobile-menu-toggle">
579+
<i class="fas fa-bars"></i>
580+
</button>
535581
</div>
536582
</nav>
537583

@@ -679,6 +725,49 @@ <h3>Company</h3>
679725
navbar.classList.remove('scrolled');
680726
}
681727
});
728+
729+
// Mobile menu toggle functionality
730+
document.addEventListener('DOMContentLoaded', function() {
731+
const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
732+
const navMenu = document.querySelector('.nav-menu');
733+
const navLinks = document.querySelectorAll('.nav-item a');
734+
735+
// Toggle mobile menu
736+
mobileMenuToggle.addEventListener('click', function() {
737+
navMenu.classList.toggle('active');
738+
739+
// Toggle icon between hamburger and X
740+
const icon = this.querySelector('i');
741+
if (navMenu.classList.contains('active')) {
742+
icon.classList.remove('fa-bars');
743+
icon.classList.add('fa-times');
744+
} else {
745+
icon.classList.remove('fa-times');
746+
icon.classList.add('fa-bars');
747+
}
748+
});
749+
750+
// Close mobile menu when clicking on nav links
751+
navLinks.forEach(link => {
752+
link.addEventListener('click', function() {
753+
navMenu.classList.remove('active');
754+
const icon = mobileMenuToggle.querySelector('i');
755+
icon.classList.remove('fa-times');
756+
icon.classList.add('fa-bars');
757+
});
758+
});
759+
760+
// Close mobile menu when clicking outside
761+
document.addEventListener('click', function(event) {
762+
const isClickInsideNav = navMenu.contains(event.target) || mobileMenuToggle.contains(event.target);
763+
if (!isClickInsideNav && navMenu.classList.contains('active')) {
764+
navMenu.classList.remove('active');
765+
const icon = mobileMenuToggle.querySelector('i');
766+
icon.classList.remove('fa-times');
767+
icon.classList.add('fa-bars');
768+
}
769+
});
770+
});
682771
</script>
683772

684773
<!-- Google Analytics -->

‎fallible-managed-security.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -447,12 +447,57 @@
447447
font-size: 0.875rem;
448448
}
449449

450+
/* Mobile Menu Styles */
451+
.mobile-menu-toggle {
452+
display: none;
453+
background: none;
454+
border: none;
455+
font-size: 1.5rem;
456+
color: var(--text-primary);
457+
cursor: pointer;
458+
padding: 0.5rem;
459+
transition: color 0.3s ease;
460+
}
461+
462+
.mobile-menu-toggle:hover {
463+
color: var(--accent-color);
464+
}
465+
466+
.nav-menu.mobile-open {
467+
display: flex;
468+
flex-direction: column;
469+
position: absolute;
470+
top: 100%;
471+
left: 0;
472+
right: 0;
473+
background: var(--primary-color);
474+
border: 1px solid var(--border-color);
475+
border-radius: 8px;
476+
margin: 0 2rem;
477+
padding: 1rem;
478+
box-shadow: var(--shadow-lg);
479+
gap: 1rem;
480+
}
481+
482+
.nav-menu.mobile-open .nav-item {
483+
text-align: center;
484+
}
485+
486+
.nav-menu.mobile-open .cta-button {
487+
margin-top: 1rem;
488+
text-align: center;
489+
}
490+
450491
/* Responsive Design */
451492
@media (max-width: 768px) {
452493
.nav-menu {
453494
display: none;
454495
}
455496

497+
.mobile-menu-toggle {
498+
display: block;
499+
}
500+
456501
.hero-container {
457502
grid-template-columns: 1fr;
458503
text-align: center;
@@ -493,6 +538,9 @@
493538
<li class="nav-item"><a href="contactus.html">Contact</a></li>
494539
</ul>
495540
<a href="https://dashboard.fallible.co/login" class="cta-button">Dashboard</a>
541+
<button class="mobile-menu-toggle">
542+
<i class="fas fa-bars"></i>
543+
</button>
496544
</div>
497545
</nav>
498546

@@ -667,6 +715,25 @@ <h3>Company</h3>
667715
navbar.classList.remove('scrolled');
668716
}
669717
});
718+
719+
// Mobile menu toggle
720+
document.addEventListener('DOMContentLoaded', function() {
721+
const mobileToggle = document.querySelector('.mobile-menu-toggle');
722+
const navMenu = document.querySelector('.nav-menu');
723+
724+
if (mobileToggle && navMenu) {
725+
mobileToggle.addEventListener('click', function() {
726+
navMenu.classList.toggle('mobile-open');
727+
});
728+
729+
// Close mobile menu when clicking outside
730+
document.addEventListener('click', function(event) {
731+
if (!event.target.closest('.nav-container')) {
732+
navMenu.classList.remove('mobile-open');
733+
}
734+
});
735+
}
736+
});
670737
</script>
671738

672739
<!-- Google Analytics -->

‎faq.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -416,12 +416,51 @@
416416
font-size: 0.875rem;
417417
}
418418

419+
/* Mobile Menu */
420+
.mobile-menu-toggle {
421+
display: none;
422+
background: none;
423+
border: none;
424+
color: var(--text-primary);
425+
font-size: 1.5rem;
426+
cursor: pointer;
427+
}
428+
429+
.nav-menu.active {
430+
display: flex !important;
431+
position: fixed;
432+
top: 100%;
433+
left: 0;
434+
width: 100%;
435+
background: var(--primary-color);
436+
flex-direction: column;
437+
padding: 2rem;
438+
box-shadow: var(--shadow-lg);
439+
border-top: 1px solid var(--border-color);
440+
z-index: 999;
441+
}
442+
443+
.nav-menu.active .nav-item {
444+
margin: 0.5rem 0;
445+
}
446+
447+
.nav-menu.active .nav-item a {
448+
padding: 1rem 0;
449+
display: block;
450+
text-align: center;
451+
border-bottom: 1px solid var(--border-light);
452+
}
453+
419454
/* Responsive Design */
420455
@media (max-width: 768px) {
421456
.nav-menu {
422457
display: none;
423458
}
424459

460+
.mobile-menu-toggle {
461+
display: block;
462+
}
463+
425464
.faq-title {
426465
font-size: 2.5rem;
427466
}
@@ -558,6 +597,9 @@
558597
<li class="nav-item"><a href="contactus.html">Contact</a></li>
559598
</ul>
560599
<a href="https://dashboard.fallible.co/login" class="cta-button">Dashboard</a>
600+
<button class="mobile-menu-toggle">
601+
<i class="fas fa-bars"></i>
602+
</button>
561603
</div>
562604
</nav>
563605

@@ -742,6 +784,35 @@ <h3>Company</h3>
742784
}
743785
});
744786

787+
// Mobile menu toggle
788+
document.querySelector('.mobile-menu-toggle').addEventListener('click', function() {
789+
const navMenu = document.querySelector('.nav-menu');
790+
const icon = this.querySelector('i');
791+
792+
navMenu.classList.toggle('active');
793+
794+
// Toggle icon between hamburger and X
795+
if (navMenu.classList.contains('active')) {
796+
icon.classList.remove('fa-bars');
797+
icon.classList.add('fa-times');
798+
} else {
799+
icon.classList.remove('fa-times');
800+
icon.classList.add('fa-bars');
801+
}
802+
});
803+
804+
// Close mobile menu when clicking on a link
805+
document.querySelectorAll('.nav-menu .nav-item a').forEach(link => {
806+
link.addEventListener('click', function() {
807+
const navMenu = document.querySelector('.nav-menu');
808+
const icon = document.querySelector('.mobile-menu-toggle i');
809+
810+
navMenu.classList.remove('active');
811+
icon.classList.remove('fa-times');
812+
icon.classList.add('fa-bars');
813+
});
814+
});
815+
745816
// FAQ toggle functionality
746817
function toggleFaq(element) {
747818
const faqItem = element.parentElement;

‎index.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -189,6 +189,31 @@
189189
cursor: pointer;
190190
}
191191

192+
.nav-menu.active {
193+
display: flex !important;
194+
position: fixed;
195+
top: 100%;
196+
left: 0;
197+
width: 100%;
198+
background: var(--primary-color);
199+
flex-direction: column;
200+
padding: 2rem;
201+
box-shadow: var(--shadow-lg);
202+
border-top: 1px solid var(--border-color);
203+
z-index: 999;
204+
}
205+
206+
.nav-menu.active .nav-item {
207+
margin: 0.5rem 0;
208+
}
209+
210+
.nav-menu.active .nav-item a {
211+
padding: 1rem 0;
212+
display: block;
213+
text-align: center;
214+
border-bottom: 1px solid var(--border-light);
215+
}
216+
192217
/* Hero Section */
193218
.hero {
194219
min-height: 100vh;
@@ -1181,6 +1206,35 @@ <h3>Company</h3>
11811206
}
11821207
});
11831208

1209+
// Mobile menu toggle
1210+
document.querySelector('.mobile-menu-toggle').addEventListener('click', function() {
1211+
const navMenu = document.querySelector('.nav-menu');
1212+
const icon = this.querySelector('i');
1213+
1214+
navMenu.classList.toggle('active');
1215+
1216+
// Toggle icon between hamburger and X
1217+
if (navMenu.classList.contains('active')) {
1218+
icon.classList.remove('fa-bars');
1219+
icon.classList.add('fa-times');
1220+
} else {
1221+
icon.classList.remove('fa-times');
1222+
icon.classList.add('fa-bars');
1223+
}
1224+
});
1225+
1226+
// Close mobile menu when clicking on a link
1227+
document.querySelectorAll('.nav-menu .nav-item a').forEach(link => {
1228+
link.addEventListener('click', function() {
1229+
const navMenu = document.querySelector('.nav-menu');
1230+
const icon = document.querySelector('.mobile-menu-toggle i');
1231+
1232+
navMenu.classList.remove('active');
1233+
icon.classList.remove('fa-times');
1234+
icon.classList.add('fa-bars');
1235+
});
1236+
});
1237+
11841238
// Smooth scrolling for anchor links
11851239
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
11861240
anchor.addEventListener('click', function (e) {

0 commit comments

Comments
 (0)