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

navbar improved and looks enlightened #704

Closed
wants to merge 2 commits into from
Closed

navbar improved and looks enlightened #704

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
54bff64
navbar improved and looks enlightened
harshgupta2125 Oct 15, 2024
fe1a92d
Merge branch 'main' into main
harshgupta2125 Oct 15, 2024
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
91 changes: 85 additions & 6 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,63 @@
.card:hover {
cursor: pointer;
}

/* Existing CSS */
.main-head {
background-color: #313131; /* Background color for the navbar */
padding: 10px 20px; /* Padding for the navbar */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
display: flex;
justify-content: space-between; /* Space between logo and nav items */
align-items: center; /* Center items vertically */
}

#nav-list {
list-style: none; /* Remove default list styling */
display: flex; /* Flexbox for horizontal layout */
gap: 10px; /* Space between nav items */
}

#nav-list li a {
text-decoration: none; /* Remove underline from links */
color: #ffffff; /* Text color */
font-weight: 500; /* Font weight for links */
transition: color 0.3s; /* Smooth color transition */
}

#nav-list li a:hover {
color: #007bff; /* Change color on hover */
}

/* Responsive styles */
@media (max-width: 768px) {
#nav-list {
flex-direction: column; /* Stack items vertically */
position: absolute; /* Positioning for dropdown */
top: 60px; /* Position below the navbar */
left: 0; /* Align to the left */
background-color: #fff; /* Background color for dropdown */
width: 100%; /* Full width */
display: none; /* Hide by default */
z-index: 1000; /* Ensure it appears above other elements */
}

#nav-list.active {
display: flex; /* Show when active */
}

.hamburger {
display: block; /* Show hamburger button */
}
}

.hamburger {
display: none; /* Hide by default */
background: none; /* No background */
border: none; /* No border */
cursor: pointer; /* Pointer cursor */
font-size: 24px; /* Size of the hamburger icon */
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
Expand Down Expand Up @@ -266,12 +323,34 @@ <h2>The Perfect Travel Experience!</h2>

<script src="script.js"></script>
<header class="main-head">
<nav>
<div class="logo">
<img src="img/logo.png" id="logo-web">
<h1 id="logo"><a href="#home">BuddyTrail</a></h1>
</div>
<nav>
<div class="logo">
<img src="img/logo.png" id="logo-web">
<h1 id="logo"><a href="#home">BuddyTrail</a></h1>
</div>

<!-- Removed Hamburger button for mobile -->
<!-- <button class="hamburger" id="hamburger">☰</button> -->

<ul id="nav-list">
<!-- Close button for dropdown -->
<span class="dropdown-close-btn" id="closeBtn">×</span>
<li><a href="#home" class="navhover">Home</a></li>
<li><a href="#deals" class="navhover">Exclusive Deals</a></li>
<li><a href="#benefits" class="navhover">Benefits</a></li>
<li><a href="about.html" class="navhover">About</a></li>
<li><a href="#itineraries" class="navhover">Travel Itineraries</a></li>
<li><a href="#contact" class="navhover">Contact</a></li>
<li><a href="#reviews" class="navhover">Reviews</a></li>
<li><a href="auth.html" class="navhover">Sign In</a></li>
</ul>

<!-- Removed Toggle Button -->
<!-- <button class="mode-toggle" id="modeToggle"> -->
<!-- <span class="sun-icon glow"><img src="day-mode.png"></span> -->
<!-- </button> -->
</nav>
</header>
<!-- Hamburger button for mobile -->
<button class="hamburger" id="hamburger">☰</button>

Expand All @@ -296,7 +375,7 @@ <h1 id="logo"><a href="#home">BuddyTrail</a></h1>
<span class="moon-icon glow" style="display: none;"><img src="moon.png" alt="Dark mode"></span>
</button>
</nav>
</header>
</header>

<!-- JS to handle hamburger and close button -->
<script>
Expand Down
84 changes: 43 additions & 41 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,15 +201,13 @@ a{
left: 0;
right: 0;
z-index: 5;
padding: 15px;
padding: 5px 10px; /* Reduced padding for a slimmer navbar */
height: 90px;
background-color: rgba(0, 0, 0, 0.7);
/*background-color: transparent;*/
color: white;
background-color: #fff; /* Background color for the navbar */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
display: flex;
justify-content: flex-start; /* Keep header centered */
align-items: center;
transition: background-color 0.3s ease;
justify-content: space-between; /* Space between logo and nav items */
align-items: center; /* Center items vertically */
}
.main-head.shadow {
background-color: #000;
Expand All @@ -230,20 +228,28 @@ nav {
}

#nav-list {
display: flex;
gap: 5px;
list-style: none;
margin-left: 60px;
padding: 0;
align-items: center;
list-style: none; /* Remove default list styling */
display: flex; /* Flexbox for horizontal layout */
gap: 10px; /* Space between nav items */
flex-wrap: nowrap; /* Prevent wrapping to a new line */
}

#nav-list li {
white-space: nowrap; /* Prevent text from wrapping within list items */
}

#nav-list li a {
color: white;
text-decoration: none;
font-weight: 400;
white-space: nowrap;
font-size: 20px;
text-decoration: none; /* Remove underline from links */
color: #333; /* Text color */
font-weight: 500; /* Font weight for links */
transition: color 0.3s; /* Smooth color transition */
padding: 5px 10px; /* Added padding for better click area */
border-radius: 5px; /* Rounded corners for links */
}

#nav-list li a:hover {
color: #007bff; /* Change color on hover */
background-color: rgba(0, 123, 255, 0.1); /* Light background on hover */
}

.hamburger {
Expand Down Expand Up @@ -274,38 +280,34 @@ nav {

/* Responsive Styles for smaller screens */
@media (max-width: 768px) {
.hamburger {
display: block; /* Show hamburger on small screens */
}

#nav-list {
display: none; /* Hide menu initially */
position: absolute;
top: 100%; /* Position dropdown below header */
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.9);
flex-direction: column;
align-items: center;
padding: 10px 0;
flex-direction: column; /* Stack items vertically */
position: absolute; /* Positioning for dropdown */
top: 50px; /* Position below the navbar */
left: 0; /* Align to the left */
background-color: #fff; /* Background color for dropdown */
width: 100%; /* Full width */
display: none; /* Hide by default */
z-index: 1000; /* Ensure it appears above other elements */
}

#nav-list.active {
display: flex; /* Show menu when active */
display: flex; /* Show when active */
}

/* Close button styles */
.dropdown-close-btn {
display: block; /* Visible only in the dropdown menu */
align-self: flex-end;
margin-right: 20px;
color: white;
font-size: 2em;
padding: 5px;
cursor: pointer;
.hamburger {
display: block; /* Show hamburger button */
}
}

.hamburger {
display: none; /* Hide by default */
background: none; /* No background */
border: none; /* No border */
cursor: pointer; /* Pointer cursor */
font-size: 24px; /* Size of the hamburger icon */
}

/* Hide the close button on larger screens (revised) */
@media (min-width: 769px) {
/* Hide the close button by setting its display to none and removing it from the DOM */
Expand Down