Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixes: Navbar Hamburger not responsive #551 #769

Closed
wants to merge 1 commit into from
Closed

Fixes: Navbar Hamburger not responsive #551 #769

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 104 additions & 41 deletions assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -460,6 +460,84 @@ body {
mix-blend-mode: normal;
}

.navbar-list{
display: flex;
justify-content: center; /* Center align the navbar items */
align-items: center; /* Vertically center the navbar items */
margin: 0; /* Remove default margin */
padding: 0; /* Remove default padding */
}

.navbar-item {
margin: 0 10px; /* Adjust the horizontal margin to increase spacing */
padding: 0; /* Remove default padding */
}

.navbar-link {
position: relative;
color: var(--charcoal);
padding: 8px 12px; /* Adjust padding as needed */
line-height: 2;
transition: var(--transition-1);
}

.navbar-link:is(:hover, :focus) {
color: var(--old-rose);
}

.dropdown-menu {
/* display: none;
position: absolute;
top: calc(100% + 5px);
left: 0;
background-color: var(--white);
padding: 10px;
border-radius: 5px; */
display: none;
position: absolute;
background-color: #fff;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
z-index: 1;
transition: all 0.3s ease;
top: 100%;
}

.dropdown-item {
margin-top: 5px;
}

.dropdown-menu-list {
list-style: none;
margin: 0;
padding: 0;
}

.dropdown-menu-item {
padding: 12px 16px;
}

.dropdown-menu-item a {
text-decoration: none;
color: #000;
}

.dropdown-item:first-child {
margin-top: 0;
}

.dropdown-menu.active {
display: block;
}

.navbar-item.dropdown {
position: relative; /* Ensure the dropdown menu is positioned relative to the navbar item */
}

.navbar-item.dropdown:hover .dropdown-menu {
display: block;
} */


.nav-toggle-btn {
font-size: 40px;
color: var(--charcoal);
Expand Down Expand Up @@ -503,39 +581,23 @@ body {
overflow-y: scroll;
}


/* .navbar-item:nth-child(9) .navbar-link {
margin-right: 35px;
} */
/* .navbar-item:nth-child(9) .navbar-link {
margin-right: 5px;
}*/

/* @media (min-width:641px) {
.navbar-list{
flex-direction: column;
}
.navbar.active{
max-height: 330px;
}
} */
.navbar-list{
.navbar-list {
display: flex;
justify-content: center; /* Center align the navbar items */
align-items: center; /* Vertically center the navbar items */
margin: 0; /* Remove default margin */
padding: 0; /* Remove default padding */
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}

.navbar-item {
margin: 0 10px; /* Adjust the horizontal margin to increase spacing */
padding: 0; /* Remove default padding */
margin: 0 10px;
padding: 0;
}

.navbar-link {
position: relative;
color: var(--charcoal);
padding: 8px 12px; /* Adjust padding as needed */
padding: 8px 12px;
line-height: 2;
transition: var(--transition-1);
}
Expand All @@ -547,37 +609,38 @@ body {
.dropdown-menu {
display: none;
position: absolute;
top: calc(100% + 5px);
left: 0;
background-color: var(--white);
padding: 10px;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
z-index: 1;
transition: all 0.3s ease;
top: 100%;
}

.dropdown-item {
margin-top: 5px;
.dropdown-menu-list {
list-style: none;
margin: 0;
padding: 0;
}

.dropdown-item:first-child {
margin-top: 0;
.dropdown-menu-item {
padding: 12px 16px;
}

.dropdown-menu-item a {
text-decoration: none;
color: #000;
}

.dropdown-menu.active {
display: block;
}

.navbar-item.dropdown {
position: relative; /* Ensure the dropdown menu is positioned relative to the navbar item */
}

.navbar-item.dropdown:hover .dropdown-menu {
display: block;
position: relative;
}

/* Adjust the position of the dropdown menu */
.dropdown-menu {
top: 100%; /* Position below the navbar item */
}



/*-----------------------------------*\
Expand Down
16 changes: 16 additions & 0 deletions assets/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,3 +220,19 @@ function validateAndConnect() {
document.getElementById('yourPrice').value='';
}
}


function toggleMoreDropdown(event) {
event.preventDefault();
const moreDropdown = document.getElementById('more-dropdown');
const dropdownMenu = document.getElementById('dropdown-menu');
const moreLink = document.getElementById('more-link');

if (dropdownMenu.style.display === "block") {
dropdownMenu.style.display = "none";
moreLink.style.display = "block";
} else {
dropdownMenu.style.display = "block";
moreLink.style.display = "none";
}
}
63 changes: 20 additions & 43 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,49 +82,35 @@
<div id="loader"></div>
</div>

<header class="header header-anim" data-header>

<header class="header header-anim" data-header>
<div class="container">

<nav class="navbar" data-navbar>
<a href="#home" onclick="lenis.scrollTo('#home');" class="logo" style="display:flex;">
<img src="./assets/images/LogoPicLight.png" alt="" class="logopic" style=" width:0.1px;opacity: 0;" />
<img src="./assets/images/LogoPicLight.png" alt="" class="logopic" style="width:0.1px;opacity: 0;" />
</a>

<ul class="navbar-list">
<img src="assets/images/logo_whitebg.png" class="logopic" style=" width: 150px;">

<img src="assets/images/logo_whitebg.png" class="logopic" style="width: 150px;">
<li class="navbar-item">
<a href="#home" onclick="lenis.scrollTo('#home')" class="navbar-link" data-nav-link><i
class="ri-home-fill"></i> Home</a>
<a href="#home" onclick="lenis.scrollTo('#home')" class="navbar-link" data-nav-link><i class="ri-home-fill"></i> Home</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" 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" 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" data-nav-link><i class="ri-customer-service-2-fill"></i> Contact</a>
</li>

<li class="navbar-item">
<a href="#" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a>
</li>

<li class="navbar-item" id="login-signup-link">
<a href="./assets/html/login.html" class="navbar-link">Login/Signup</a>
</li>

<li class="navbar-item dropdown">
<a href="#" class="navbar-link">More <i class="ri-arrow-down-s-line"></i></a>
<div class="dropdown-menu">
<li class="navbar-item dropdown" id="more-dropdown">
<a href="#" class="navbar-link" id="more-link" onclick="toggleMoreDropdown(event)">More <i class="ri-arrow-down-s-line"></i></a>
<div class="dropdown-menu" id="dropdown-menu">
<ul class="dropdown-menu-list">
<li class="dropdown-menu-item">
<a href="#chapters" onclick="lenis.scrollTo('#chapters')" class="navbar-link" data-nav-link><i class="ri-medal-fill"></i> Literary Realms</a>
Expand All @@ -137,34 +123,25 @@
</li>
</ul>
</div>

<li>

<div class="switch-container">
<input type="checkbox" id="switch" class="switch-checkbox">
<label for="switch" class="switch-label">
<div class="switch-button">
<span class="material-icons sun-icon">wb_sunny</span>
<span class="material-icons moon-icon">brightness_2</span>
</div>
</label>
</div>

</li>
<div class="switch-container">
<input type="checkbox" id="switch" class="switch-checkbox">
<label for="switch" class="switch-label">
<div class="switch-button">
<span class="material-icons sun-icon">wb_sunny</span>
<span class="material-icons moon-icon">brightness_2</span>
</div>
</label>
</div>
</ul>
</nav>

<button class="nav-toggle-btn" aria-label="toggle menu" data-nav-toggler>
<ion-icon name="menu-outline" aria-hidden="true" class="open"></ion-icon>

<ion-icon name="close-outline" aria-hidden="true" class="close"></ion-icon>
</button>

</div>
</header>






<main>
Expand Down
Loading