Skip to content

Commit

Permalink
Merge pull request #3762 from 4F24L/nav-fix
Browse files Browse the repository at this point in the history 
[FIX] Nav bar UI fixed
  • Loading branch information
@atmajaa
atmajaa authored Oct 19, 2024
2 parents c5a8e22 + b01a138 commit 21d073b
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 38 deletions.
7 changes: 3 additions & 4 deletions assets/css/login.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1451,7 +1451,9 @@ input[type="submit"]:hover {
padding-top: 5px;
}
.navbar-item{
margin-right: 40px;
/* margin-right: 40px; */
left: auto;

}
.navbar-list{
position: relative;
Expand Down Expand Up @@ -1485,7 +1487,4 @@ input[type="submit"]:hover {
top: -9px;
left: 50px;
}
}
.navbar-item {
margin-top: 10px; /* Increase the top margin of each item */
}
22 changes: 8 additions & 14 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -587,18 +587,9 @@ body {
object-fit: cover;
}


.action {

position: relative;
margin-right: 195px;
margin-top: 23px

}

.action {
position: relative;
margin-right: 195px;
/* margin-right: 195px; */
margin-top: 23px
}
.action .profile {
Expand Down Expand Up @@ -663,9 +654,11 @@ body {
}

.action .menu.active {
top: 80px;
top: 60px;
visibility: visible;
opacity: 1;
right: 60px;
z-index: 1000000;
}

.action .menu::before {
Expand Down Expand Up @@ -3059,16 +3052,17 @@ footer {
.container,
.header,
.navbar {
max-width: 1330px;
max-width: 1350px;
width: 100vw;
border-radius: 10px;
}

.navbar-list {
gap: 22px;
gap: 10px;
/* Increase gap between navbar items */
justify-content: space-evenly;
/* Center align navbar items */
padding-left: 2rem;
/* padding-left: 2rem; */
}

.benefits .grid-list {
Expand Down
40 changes: 20 additions & 20 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2963,9 +2963,9 @@

<li>
<div class="action" >
<div class="profile" onclick="menuToggle();">
<!-- <div class="profile" onclick="menuToggle();">
<img id="profile-avatar" src="./assets/images/avatar1.jpg" />
</div>
</div> -->
<div class="menu">
<h3>XYZ<br /><span>Book Lover</span></h3>
<ul>
Expand Down Expand Up @@ -3041,52 +3041,52 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
<div class="container mobile-container-styles">

<nav class="navbar nav_activated" data-navbar>
<ul class="navbar-list nav">
<ul style="max-width: 1300px; display: flex; justify-content: space-between; align-items: center; gap: 5px;" class="navbar-list nav">
<li class="navbar-item logo-item" style="display:flex;">
<a href="index.html" onclick="lenis.scrollTo('index.html');" class="logo">
<img src="./assets/images/final.png" class="logopic" style=" width: 15rem; margin:0px 0px 0px -10px;">
<img src="./assets/images/final.png" class="logopic" style=" width: 15rem; ">
</a>
</li>
<li class="navbar-item" style="margin-right: -30px;"></li>
<a href="#home" onclick="lenis.scrollTo('#home')" class="navbar-link" data-nav-link><i class="ri-home-fill"></i> Home</a>
<li class="navbar-item" style="left: -30px;"></li>
<a href="#home" onclick="lenis.scrollTo('#home')" style="left: -30px;" class="navbar-link" data-nav-link><i class="ri-home-fill"></i> Home</a>
</li>
<li class="navbar-item">
<a href="./assets/html/about.html" class="navbar-link" data-nav-link><i class="ri-home-fill"></i>About Us</a>
<a href="./assets/html/about.html" class="navbar-link" style="left: -30px;" data-nav-link><i class="ri-home-fill"></i>About Us</a>
</li>
<li class="navbar-item">
<a href="#benefits" onclick="lenis.scrollTo('#benefits')" class="navbar-link" data-nav-link><i class="ri-bar-chart-fill"></i> Benefits</a>
<a href="#benefits" onclick="lenis.scrollTo('#benefits')" class="navbar-link" style="left: -30px;" data-nav-link><i class="ri-bar-chart-fill"></i> Benefits</a>
</li>
<li class="navbar-item">
<a href="#genre" onclick="lenis.scrollTo('#genre')" class="navbar-link" data-nav-link><i class="ri-bar-chart-fill"></i> Genre</a>
<a href="#genre" onclick="lenis.scrollTo('#genre')" class="navbar-link" style="left: -30px;" data-nav-link><i class="ri-bar-chart-fill"></i> Genre</a>
</li>
<li class="navbar-item">
<a href="#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" data-nav-link><i class="ri-customer-service-2-fill"></i> Contact</a>
<a href="#contact" onclick="lenis.scrollTo('#contact')" class="navbar-link" style="left: -30px;" data-nav-link><i class="ri-customer-service-2-fill"></i> Contact</a>
</li>
<li class="navbar-item">
<a href="#faq" onclick="lenis.scrollTo('#faqq')" class="navbar-link" data-nav-link>
<a href="#faq" onclick="lenis.scrollTo('#faqq')" class="navbar-link" style="left: -30px;" data-nav-link>
<i class="ri-questionnaire-fill"></i> FAQ
</a>
</li>
<li class="navbar-item">
<a href="#rate-us" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a>
<a href="#rate-us" onclick="openRateUsModal(); return false;" class="navbar-link" style="left: -30px;">Rate Us</a>
</li>
<li class="navbar-item" id="login-signup-link">
<a href="./assets/html/event.html" class="navbar-link">Events</a>
<a href="./assets/html/event.html" class="navbar-link" style="left: -30px;">Events</a>
</li>
<li class="navbar-item" id="login-signup-link">
<a href="./assets/html/login.html" class="navbar-link">Login</a>
<a href="./assets/html/login.html" class="navbar-link" style="left: -30px;">Login</a>
</li>
<li class="navbar-item" id="login-signup-link">
<a href="comsp.html" class="navbar-link">Community Spotlight</a>
<a href="comsp.html" class="navbar-link" style="left: -30px;">Community Spotlight</a>
</li>
<li class="navbar-item">
<a href="audiobook.html" onclick="lenis.scrollTo('audiobooks')" class="navbar-link" data-nav-link>
<i class="ri-bar-chart-fill"></i> Audio<br> Books
<li class="navbar-item" >
<a href="audiobook.html" onclick="lenis.scrollTo('audiobooks')" class="navbar-link" style="left: -30px;" data-nav-link>
<i class="ri-bar-chart-fill"></i> Audio Books
</a>
</li>
<li>
<div class="action">
<div class="profile" onclick="menuToggle();">
<div class="action" style="right: 30px; padding-bottom: 20px;">
<div class="profile" onclick="menuToggle();">
<img id="profile-avatar" src="./assets/images/avatar1.jpg" />
</div>
</div>
Expand Down

0 comments on commit 21d073b

Please sign in to comment.