-
Notifications
You must be signed in to change notification settings - Fork 252
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
<!-- ISSUE & PR TITLE SHOULD BE SAME--> ## Description Updated the Navbar UI as asked in the issue column Added rounded corners with white background, underline and glowing effect on the tabs in navbar of each page with adding 1-2 more features such as cart image with count option on each page ## Related Issues <!--Cite any related issue(s) this pull request addresses. If none, simply state “None”--> - Closes # ## Type of PR <!-- Mention PR Type according to the issue in brackets below and check the below box --> - [✔️ ] (Feature update, Code Refactor) ## Screenshots / videos (if applicable) <!--Attach any relevant screenshots or videos demonstrating the changes--> Image of website before the Navbar UI -  Images of website after the updated Navbar UI-   ## Checklist <!-- [X] - put a cross/X inside [] to check the box --> - [✔️ ] I have gone through the [contributing guide](https://github.com/Anjaliavv51/Retro) - [✔️ ] I have updated my branch and synced it with project `main` branch before making this PR - [ ✔️] I have performed a self-review of my code - [ ✔️] I have tested the changes thoroughly before submitting this pull request. - [ ✔️] I have provided relevant issue numbers, screenshots, and videos after making the changes. - [ ✔️] I have commented my code, particularly in hard-to-understand areas. ## Additional context: <!--Include any additional information or context that might be helpful for reviewers.-->
- Loading branch information
Showing
9 changed files
with
494 additions
and
123 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,167 @@ | ||
| body { | ||
| font-family: 'Philosopher', sans-serif; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| /* Navbar styles */ | ||
| .navbar { | ||
| background-color: rgba(255, 255, 245, 0.8); | ||
| padding: 1rem; | ||
| display: flex; | ||
| width: 100%; | ||
| justify-content: space-between; | ||
| margin: 10px 1px!important; | ||
| border-radius: 20px; | ||
| } | ||
|
|
||
| .nav-right { | ||
| margin-left: auto; | ||
| /* Pushes the login/signup to the right side */ | ||
| display: flex; | ||
| gap: 15px; | ||
| /* Space between login and signup */ | ||
| } | ||
|
|
||
| .ms-auto { | ||
| margin-left: auto; | ||
| /* Pushes to the right */ | ||
| } | ||
|
|
||
| .navbar-brand { | ||
| font-size: 1.5rem; | ||
| color: black; | ||
| font-weight: bold; | ||
| transition: transform 0.3s ease; | ||
| } | ||
|
|
||
| .navbar-brand:hover { | ||
| transform: scale(1.6); | ||
| } | ||
|
|
||
| .navbar-nav .nav-item { | ||
| margin-right: 15px; | ||
| } | ||
|
|
||
| .nav-link { | ||
| color: black; | ||
| font-size: 1rem; | ||
| font-family: var(--ff-philosopher); | ||
| text-decoration: none; | ||
| /* Remove default underline */ | ||
| position: relative; | ||
| transition: all 0.3s ease; | ||
| } | ||
|
|
||
| .nav-item.dropdown .nav-link { | ||
| text-decoration: none; | ||
| /* No underline for dropdown toggle */ | ||
| } | ||
|
|
||
| .nav-link:hover { | ||
| text-decoration: none; | ||
| /* Prevent default underline on hover */ | ||
| } | ||
|
|
||
| .nav-link::after { | ||
| content: ''; | ||
| position: absolute; | ||
| left: 0; | ||
| bottom: -5px; | ||
| width: 0%; | ||
| height: 3.5px; | ||
| /* Thicker underline */ | ||
| background: transparent; | ||
| transition: all 0.3s ease-in-out; | ||
| box-shadow: | ||
| 0 0 30px rgba(255, 159, 128, 1), | ||
| /* Initial glow effect with bright peach color */ | ||
| 0 0 60px rgba(255, 159, 128, 1); | ||
| /* Increased glow effect */ | ||
| } | ||
|
|
||
| .nav-link:hover::after { | ||
| background: rgba(243, 187, 183, 1); | ||
| width: 100%; | ||
| box-shadow: 0 0 20px rgba(243, 187, 183, 1); | ||
| } | ||
|
|
||
| .nav-btn { | ||
| background: none; | ||
| border: none; | ||
| font-size: 1rem; | ||
| cursor: pointer; | ||
| color: black; | ||
| text-decoration: none; | ||
| position: relative; | ||
| } | ||
|
|
||
| .nav-btn:hover { | ||
| color: #d2691e; | ||
| } | ||
|
|
||
| .nav-btn::after { | ||
| content: ''; | ||
| position: absolute; | ||
| left: 0; | ||
| bottom: -5px; | ||
| width: 0%; | ||
| height: 2px; | ||
| background: #ffb6c1; | ||
| /* Adjust to match background color */ | ||
| transition: all 0.3s ease-in-out; | ||
| box-shadow: 0 20px #ffb6c1; | ||
| /* Glow effect */ | ||
| } | ||
|
|
||
| .nav-link:hover::after { | ||
| background: rgba(255, 159, 128, 1); | ||
| width: 100%; | ||
| box-shadow: | ||
| 0 0 25px rgba(255, 159, 128, 1), | ||
| 0 0 50px rgba(255, 159, 128, 1); | ||
| /* Glow effect with bright peach color */ | ||
| } | ||
|
|
||
| .nav-link:hover, | ||
| .nav-btn:hover { | ||
| color: hwb(327 21% 3%) !important; | ||
| } | ||
|
|
||
| .dropdown-menu { | ||
| background-color: #ffe5e5; | ||
| border: none; | ||
| } | ||
|
|
||
| .dropdown-item { | ||
| /*color: black;*/ | ||
| font-family: var(--ff-philosopher); | ||
| } | ||
|
|
||
| .dropdown-item:hover { | ||
| background-color: #f0c0a0; | ||
| color: #d2691e; | ||
| } | ||
|
|
||
| /* Mobile Styles */ | ||
| @media (max-width: 768px) { | ||
| .navbar-brand { | ||
| margin-left: 10px; | ||
| } | ||
|
|
||
| .navbar-nav { | ||
| text-align: center; | ||
| } | ||
|
|
||
| .navbar-toggler { | ||
| border: none; | ||
| } | ||
|
|
||
| .navbar-toggler-icon { | ||
| color: black; | ||
| } | ||
|
|
||
| .nav-item { | ||
| margin-bottom: 1rem; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.