Skip to content

Navbar Fix #945

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

Merged
Akashshelke07 merged 1 commit into from
Oct 12, 2025
Merged

Navbar Fix #945

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
22 changes: 12 additions & 10 deletions ContactUs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,24 @@ body {
padding: 4rem;
}

.heading{
text-align: center;
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 55px;
line-height: 1.12;
letter-spacing: -.02em;
-webkit-text-fill-color: #2f2f2f;
margin-bottom: 0;

.heading {
text-align: center;
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto,
"Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
font-size: 55px;
line-height: 1.12;
letter-spacing: -0.02em;
-webkit-text-fill-color: #2f2f2f;
margin-bottom: 0;
}
/* NAVBAR */
.navbar-nav {
/* .navbar-nav {
height: 80px;
background-color: #fff;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
display: flex; */
*/
/* justify-content: center; Center nav items */
/* align-items: center; /* Vertically align
flex-direction: row;
Expand Down
75 changes: 19 additions & 56 deletions ContactUs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,28 +54,16 @@
z-index: 1000;
}

<header>
<div class="collapse navbar-collapse" id="navMain">

<ul class="navbar-nav ms-auto">
<a class="navbar-brand d-flex align-items-center gap-1" href="/src/index.html" aria-label="Vehigo Home">
<img src="./assets/images/vehigologo.png" alt="Vehigo" />
</a>


<li class="nav-item"><a class="nav-link" href="/src/index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="featured-car.html">Explore cars</a></li>
<li class="nav-item"><a class="nav-link" href="./src/pages/about.html">About us</a></li>
<li class="nav-item"><a class="nav-link" href="blog.html">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="ContactUs.html">Contact Us</a></li>
<li class="nav-item"><a class="nav-link" href="offline.html">Offline Centers</a></li>
<li class="nav-item"><a class="nav-link" href="rentcar.html">Rent Your Car</a></li>

<li class="nav-item">
<button id="themeToggle" class="btn btn-outline-secondary theme-toggle-btn" type="button">
<i class="fa-solid fa-gear"></i><span class="label">Dark</span>
</button>
</li>
.navbar-collapse {
background-color: #212529;
position: absolute;
top: 100%;
left: -25%;
width: 150%;
padding: 0.75rem 0;
z-index: 1000;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Only apply absolute positioning on mobile */
@media (min-width: 992px) {
Expand Down Expand Up @@ -126,40 +114,15 @@
animation: gradientShift 4s ease-in-out infinite;
}

<!-- Main Content -->
<section class="main">
<h2 class="heading">Contact Us</h2>
<div class="contact-container">

<!-- Contact Info Cards -->
<div class="contact-info">
<h3>Contact Information</h3>
<div id="ContactUscards"></div>
</div>

<!-- Contact Form -->
<div class="contact-form">
<h2>Send us a Message</h2>
<div id="successMessage" class="hidden" role="alert" aria-live="polite">
<div class="success-icon">✓</div>
<h3>Message Sent!</h3>
<p>Our Car experts will get back to you within 24 hours.</p>
</div>
<form id="form" class="form" novalidate>
<div>
<label for="contact-name">Your Name</label>
<input
type="text"
id="contact-name"
name="name"
placeholder="Enter your full name"
minlength="3"
maxlength="50"
autocomplete="name"
aria-required="true"
required
/>
</div>
@keyframes gradientShift {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}

/* Fix for header links visibility */
.header .navbar-nav .nav-link {
Expand Down
86 changes: 43 additions & 43 deletions ContactUs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,46 @@
const onecards = [
{
icon: "✈️",
title: "Travel Inquiries",
info: "[email protected]",
sub: "Response within 2 hours",
bgClass: "card-blue",
iconClass: "icon-blue",
},
{
icon: "🌍",
title: "24/7 Support",
info: "1800-100-100",
sub: "Emergency assistance",
bgClass: "card-green",
iconClass: "icon-green",
},
{
icon: "📍",
title: "Visit Our Office",
info: "Xyz, New Delhi",
sub: "Mon-Sat: 9:00AM-6:00PM",
bgClass: "card-purple",
iconClass: "icon-purple",
},
];

const cardsContainer = document.getElementById("ContactUscards");
onecards.forEach((card) => {
const div = document.createElement("div");
div.className = `card ${card.bgClass}`;
div.innerHTML = `

<div class="icon ${card.iconClass}">${card.icon}</div>
<div>
<br>
<h4 class="title text-light">${card.title}</h4>
<p class="info text-light">${card.info}</p>
<p class="sub text-light">${card.sub}</p>
</div>
`;
cardsContainer.appendChild(div);
});
// const onecards = [
// {
// icon: "✈️",
// title: "Travel Inquiries",
// info: "[email protected]",
// sub: "Response within 2 hours",
// bgClass: "card-blue",
// iconClass: "icon-blue",
// },
// {
// icon: "🌍",
// title: "24/7 Support",
// info: "1800-100-100",
// sub: "Emergency assistance",
// bgClass: "card-green",
// iconClass: "icon-green",
// },
// {
// icon: "📍",
// title: "Visit Our Office",
// info: "Xyz, New Delhi",
// sub: "Mon-Sat: 9:00AM-6:00PM",
// bgClass: "card-purple",
// iconClass: "icon-purple",
// },
// ];

// const cardsContainer = document.getElementById("ContactUscards");
// onecards.forEach((card) => {
// const div = document.createElement("div");
// div.className = `card ${card.bgClass}`;
// div.innerHTML = `

// <div class="icon ${card.iconClass}">${card.icon}</div>
// <div>
// <br>
// <h4 class="title text-light">${card.title}</h4>
// <p class="info text-light">${card.info}</p>
// <p class="sub text-light">${card.sub}</p>
// </div>
// `;
// cardsContainer.appendChild(div);
// });

const form = document.getElementById("form");
const success = document.getElementById("successMessage");
Expand Down