Skip to content

Commit de5e05b

Browse files
ANKeshriANKeshri
committed
fixed menu icon not appearing in contact and team page and hence making it responsive
1 parent dee93c1 commit de5e05b

3 files changed

Lines changed: 246 additions & 3 deletions

File tree

‎website2.0/contactus.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,11 +90,11 @@
9090
<button class="sponsor-btn">Sponsor <i id="heart" class="fas fa-heart"></i></button>
9191
</a>
9292
</div>
93-
<!-- <div class="hamburger" id="hamburger">
93+
<div class="hamburger" id="hamburger">
9494
<div></div>
9595
<div></div>
9696
<div></div>
97-
</div> -->
97+
</div>
9898
</nav>
9999
</header>
100100
<ul class="nav-links1" id="navlinks1">

‎website2.0/contributor.css‎

Lines changed: 217 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -368,4 +368,220 @@ a{
368368
height: 66px;
369369
position: relative;
370370
top: 20px;
371-
}
371+
}
372+
@media only screen and (max-width:987px){
373+
.nav-links{
374+
display: none !important;
375+
}
376+
377+
.hamburger{
378+
display: block !important;
379+
}
380+
/* nav{
381+
gap: 30%;
382+
} */
383+
.nav-links1 li a {
384+
text-decoration: none;
385+
color: #000;
386+
padding: 10px 15px;
387+
font-size: x-large;
388+
389+
}
390+
}
391+
.isDisplay{
392+
display: none;
393+
}
394+
.active{
395+
animation: animate forwards ease-in 0.2s;
396+
list-style: none;
397+
display: flex;
398+
gap: 20px;
399+
padding: 10px 20px;
400+
background-color: #fdd76b;
401+
flex-direction: column;
402+
align-items: center;
403+
text-decoration: none;
404+
405+
/* box-shadow: 0 4px 6px #FF7D1F; */
406+
width: 100%;
407+
}
408+
@media only screen and (max-width:329px){
409+
.hamburger{
410+
width: 100% !important;
411+
412+
}
413+
.hamburger div{
414+
position: relative;
415+
left: 80%;
416+
}
417+
nav{
418+
flex-direction: column-reverse;
419+
}
420+
.isDisplay{
421+
display: block;
422+
}
423+
.conte{
424+
display: flex;
425+
width: 100%;
426+
justify-content: space-around;
427+
}
428+
429+
.nav-actions{
430+
431+
display: none !important;
432+
}
433+
.sponsor-btn{
434+
font-size: 16px !important;
435+
width: 114px !important;
436+
height: 46px !important;
437+
}
438+
.star-button{
439+
font-size: 16px !important;
440+
width: 114px !important ;
441+
}
442+
}
443+
@media only screen and (max-width:300px) {
444+
445+
446+
nav{
447+
gap: 2% !important;
448+
}
449+
}
450+
@media only screen and (max-width:409px) {
451+
nav{
452+
gap: 5% !important;
453+
}
454+
.hamburger{
455+
width: 100% !important;
456+
457+
}
458+
.logo img{
459+
top: 46px !important;
460+
}
461+
.hamburger div{
462+
position: relative;
463+
left: 80%;
464+
}
465+
nav{
466+
flex-direction: column-reverse;
467+
}
468+
.isDisplay{
469+
display: block;
470+
}
471+
.conte{
472+
display: flex;
473+
width: 100%;
474+
justify-content: space-around;
475+
}
476+
477+
.nav-actions{
478+
479+
display: none !important;
480+
}
481+
.sponsor-btn{
482+
font-size: 16px !important;
483+
width: 114px !important;
484+
height: 46px !important;
485+
}
486+
.star-button{
487+
font-size: 16px !important;
488+
width: 114px !important ;
489+
}
490+
491+
.logo img{
492+
width: 60px !important;
493+
height: 60px !important;
494+
}
495+
/* @keyframes animate {
496+
from{
497+
height: 0px;
498+
}to{
499+
height: 300px ;
500+
}
501+
} */
502+
}
503+
504+
.nav-links1{
505+
height: 0px ;
506+
overflow: hidden;
507+
display: flex;
508+
position: relative;
509+
top: 30px;
510+
flex-direction: column;
511+
justify-content: space-around;
512+
}
513+
@keyframes animate {
514+
from{
515+
height: 0px;
516+
}to{
517+
height: 270px ;
518+
}
519+
}
520+
.hamburger{
521+
display: none;
522+
}
523+
header {
524+
width: 100%;
525+
position: relative;
526+
top: 0;
527+
background-color: transparent;
528+
padding: 10px 0;
529+
}
530+
531+
nav {
532+
display: flex;
533+
justify-content: space-between !important;
534+
flex-wrap: wrap;
535+
justify-content: center;
536+
position: relative;
537+
align-items: center;
538+
width: 90%;
539+
margin: 0 auto;
540+
}
541+
542+
.logo img {
543+
/* height: 100px;
544+
width: 100px; */
545+
position: relative;
546+
width: 89px;
547+
height: 89px;
548+
top: 10px;
549+
gap: 0px;
550+
opacity: 0px;
551+
552+
553+
}
554+
555+
.nav-links {
556+
list-style: none;
557+
display: flex;
558+
gap: 50px;
559+
margin: 25px;
560+
padding: 10px 20px;
561+
background-color: #FDD86C;
562+
border-radius: 25px;
563+
flex-wrap: wrap;
564+
justify-content: center;
565+
box-shadow: 0 4px 6px #FF7D1F;
566+
}
567+
568+
.nav-links li a {
569+
text-decoration: none;
570+
color: #000;
571+
padding: 10px 15px;
572+
font-size: x-large;
573+
574+
}
575+
.nav-actions {
576+
display: flex;
577+
align-items: center;
578+
gap: 10px;
579+
}
580+
.hamburger div {
581+
width: 25px;
582+
height: 3px;
583+
background-color: #333;
584+
margin: 4px;
585+
transition: 0.4s;
586+
}
587+

‎website2.0/contributor.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,20 @@
3838
<button class="sponsor-btn">Sponsor <i id="heart" class="fas fa-heart"></i></button>
3939
</a>
4040
</div>
41+
<div class="hamburger" id="hamburger">
42+
<div></div>
43+
<div></div>
44+
<div></div>
45+
</div>
46+
</nav>
47+
</header>
48+
<ul class="nav-links1" id="navlinks1">
49+
<li><a href="index.html">Home</a></li>
50+
<li><a href="abouts.html">About</a></li>
51+
<li><a href="contributor.html">Team</a></li>
52+
<li><a href="contactus.html">Contact</a></li>
53+
54+
</ul>
4155

4256
</nav>
4357
</header>
@@ -537,5 +551,18 @@ <h2>Join our awesome team!</h2>
537551
speed: 400,
538552
});
539553
</script>
554+
<script>
555+
document.getElementById('error').style.display='none'
556+
</script>
557+
<script>
558+
559+
// if(window.innerWidth>800){
560+
// document.getElementById("navlinks1").style.display='none'
561+
// }
562+
document.getElementById('hamburger').addEventListener('click',(e)=>{
563+
let ele=document.getElementById("navlinks1")
564+
document.querySelector('.nav-links1').classList.toggle('active');
565+
})
566+
</script>
540567
</body>
541568
</html>

0 commit comments

Comments
 (0)