[edit] hover dropdown and responsive design

et#6
tribikram 2 years ago
parent 5366733ef1
commit 6b8148167e
  1. 33
      public/frontend/css/style.css
  2. 11
      resources/views/layout/app.blade.php

@ -102,6 +102,35 @@ h2{
font-size: 3.2rem; font-size: 3.2rem;
} }
.dropdown:hover .dropdown-menu{
display: block;
transition: all .5s, .5s linear;
top: 100%;
width: calc(100% + 3rem);
animation: fadeInUp 500ms;
padding: 0;
}
.dropdown-menu a{
font-size: 1rem;
font-weight: 500;
color: #000000;
padding: 0.5em 1em;
}
.dropdown-item:focus, .dropdown-item:hover{
background-color: #326CBF;
color: #FFFFFF;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 30px, 0);
}
to {
opacity: 1;
transform: none;
}
}
/* =========================================== /* ===========================================
Responsive Codes Responsive Codes
======================================= */ ======================================= */
@ -308,6 +337,7 @@ Responsive Codes
0% {transform: translateY(0);opacity:0.6;} 0% {transform: translateY(0);opacity:0.6;}
100% {transform: translateY(40px);opacity:1;} 100% {transform: translateY(40px);opacity:1;}
} }
.carousel-control-next, .carousel-control-prev { .carousel-control-next, .carousel-control-prev {
width: 5% !important; width: 5% !important;
} }
@ -1602,7 +1632,8 @@ Responsive Codes
} }
.why-us-img, .why-us-img,
.blog-header p, .blog-header p,
.lets-chat-section p{ .lets-chat-section p,
.sydney-img{
padding: 0; padding: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
} }

@ -77,6 +77,17 @@
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/about">ABOUT US</a> <a class="nav-link" href="/about">ABOUT US</a>
</li> </li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="{{url('/study-abroad')}}" id="navbarDropdown" role="button" data-bs-hover="dropdown" aria-expanded="false">
EDUCATION
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>
<a class="dropdown-item" href="{{url('/study-abroad-detail')}}">Study in Australia</a>
<a class="dropdown-item" href="{{url('/study-abroad-detail')}}">Study in Melbourne</a>
</li>
</ul>
</li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/study-abroad"> STUDY ABROAD </a> <a class="nav-link" href="/study-abroad"> STUDY ABROAD </a>
</li> </li>

Loading…
Cancel
Save