Skip to content

Commit

Permalink
Merge pull request #594 from SwatiAgwl/consistent-nav-bar
Browse files Browse the repository at this point in the history 
made navbar consistent on all pages
  • Loading branch information
@khushi-joshi-05
khushi-joshi-05 authored May 28, 2024
2 parents 2f582ba + 700779e commit aa615ee
Show file tree
Hide file tree
Showing 9 changed files with 325 additions and 49 deletions.
53 changes: 53 additions & 0 deletions Css-files/content.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -525,3 +525,56 @@ textarea {
#applyCouponButton:hover {
background-color: #a52a2ad7;
}


/* updated nav bar */
nav{
height: 3rem;
background: #0000007c;

}
.navigbar{
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
height: 3rem;
width: 95%;
margin: 0 auto;

}
.logo{
color: rgba(255, 183, 0, 0.705);
font-size: 1.2rem;
font-weight: 700;
font-family: "Poppins", sans-serif;
}
.ul1,.ul2{
display: flex;
gap: 20px;
list-style-type: none;
align-items: center;
flex: 1; /* Distribute remaining space equally */
justify-content: center; /* Center items horizontally */
margin: 0; /* Remove default margin */
padding: 0; /* Remove default padding */
}
.ul1 li a, .ul2 li a{
color: white;
font-size: 1rem;
text-decoration: none;
text-align: center;
}
.ul1 li a:hover{
color:#f13800e4;
}
.ul2 li a:hover{
color: rgba(255, 183, 0, 0.705) ;
}
.cart{
color: white;
}




22 changes: 21 additions & 1 deletion Html-files/cart.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,34 @@
<body>
<div class="head_container">
<header>
<nav class="navbar">
<!-- <nav class="navbar">
<ul id="header-items">
<li><a href="../index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact us</a></li>
<li><a href="cart.html">Cart</a></li>
</ul>
</nav> -->
<nav>
<div class="navigbar">
<div class="logo">Foodie</div>
<ul class="ul1">
<li><a href="../index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
<div>
<ul class="ul2">
<li><a href="login.html">Log In</a></li>
<li><a href="signup.html">Sign Up</a></li>
<li>
<a class="" href="cart.html"><i class="fa-solid fa-cart-shopping"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</header>

Expand Down
25 changes: 23 additions & 2 deletions Html-files/contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,36 @@
style="background-image: url('contact_page_background_image.png'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed;">

<header>
<nav class="navbarbg">
<!-- <nav class="navbarbg">
<ul id="header-items">
<li><a href="../index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact us</a></li>
<li><a href="cart.html">Cart</a></li>
</ul>
</nav>
</nav> -->
<!-- updated nav bar -->
<nav>
<div class="navigbar">
<div class="logo">Foodie</div>
<ul class="ul1">
<li><a href="../index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
<div>
<ul class="ul2">
<li><a href="login.html">Log In</a></li>
<li><a href="signup.html">Sign Up</a></li>
<li>
<a class="" href="cart.html"><i class="fa-solid fa-cart-shopping"></i></a>
</li>
</ul>
</div>
</div>
</nav>

</header>

Expand Down
48 changes: 37 additions & 11 deletions Html-files/menu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,21 +16,40 @@
crossorigin="anonymous" referrerpolicy="no-referrer" />

<link rel="stylesheet" href="../Css-files/content.css">
<script src="../hamburger.js"></script>


</head>

<body>



<div class="head_container">
<header>
<nav class="navbar">
<ul id="header-items">
<li><a href="../index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact us</a></li>
<li><a href="cart.html">Cart</a></li>
<!-- <header> -->
<!-- updated nav bar -->
<nav>
<div class="navigbar">
<div class="logo">Foodie</div>

<ul class="ul1">
<li><a href="../index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
<div>
<ul class="ul2">
<li><a href="login.html">Log In</a></li>
<li><a href="signup.html">Sign Up</a></li>
<li>
<a class="" href="cart.html"><i class="fa-solid fa-cart-shopping"></i></a>
</li>
</ul>
</nav>
</header>
</div>
</div>
</nav>
<!-- </header> -->

<div class="mainhead">
<h1>M E N U</h1>
Expand Down Expand Up @@ -396,7 +415,14 @@ <h4>Follow Us</h4>
</div>
</footer>

<script src="menu.js"></script>
<script src="menu.js">
function redirectLogin() {
window.location.href = "login.html";
}
function redirectSignup() {
window.location.href = "signup.html";
}
</script>
</body>

</html>
22 changes: 21 additions & 1 deletion Html-files/services.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,34 @@

<div class="head_container_service">
<header>
<nav class="navbar">
<!-- <nav class="navbar">
<ul id="header-items">
<li><a href="../index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact us</a></li>
<li><a href="cart.html">Cart</a></li>
</ul>
</nav> -->
<nav>
<div class="navigbar">
<div class="logo">Foodie</div>
<ul class="ul1">
<li><a href="../index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
<div>
<ul class="ul2">
<li><a href="login.html">Log In</a></li>
<li><a href="signup.html">Sign Up</a></li>
<li>
<a class="" href="cart.html"><i class="fa-solid fa-cart-shopping"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</header>

Expand Down
Binary file added Images/cart.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions hamburger.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
// JavaScript function to toggle the hamburger menu
// document.getElementById('menu-toggle').addEventListener('click', function() {
// document.getElementById('nav-links').classList.toggle('active');
// this.classList.toggle('active');
// });
// JavaScript function to toggle the hamburger menu
document.getElementById('menu-toggle').addEventListener('click', function() {
document.getElementById('hamburger-menu').classList.toggle('active');
this.classList.toggle('active');
});





65 changes: 31 additions & 34 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,53 +28,50 @@
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
</style>

<script src="hamburger.js" defer></script>
</head>



<body>


<!--Navbar Start-->
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand fw-bold" href="index.html"><b>Foodie</b></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<nav>
<div class="navigbar">
<div class="logo">Foodie</div>
<button class="navbar-toggler" id="menu-toggle" aria-label="Toggle navigation">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item mb-2">
<a class="nav-link" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Html-files/menu.html">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Html-files/services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Html-files/contact.html">Contact Us</a>
<!-- Hamburger menu list -->
<ul class="hamburger-menu" id="hamburger-menu">
<li><a href="../index.html">Home</a></li>
<li><a href="Html-files/menu.html">Menu</a></li>
<li><a href="Html-files/services.html">Services</a></li>
<li><a href="Html-files/contact.html">Contact Us</a></li>
<li><a class="" onclick="redirectLogin()">Login</a></li>
<li><a class="" onclick="redirectSignup()">Sign Up</a></li>
<li><a class="" href="Html-files/cart.html">Cart</a></li>
</ul>
<ul class="ul1" id="nav-links">
<li><a href="../index.html">Home</a></li>
<li><a href="Html-files/menu.html">Menu</a></li>
<li><a href="Html-files/services.html">Services</a></li>
<li><a href="Html-files/contact.html">Contact Us</a></li>
</ul>
<div>
<ul class="ul2">
<li> <a class="" onclick="redirectLogin()">Login</a></li>
<li> <a class="" onclick="redirectSignup()">Sign Up</a></li>
<li>
<a class="" href="Html-files/cart.html"><i class="fa-solid fa-cart-shopping"></i></a>
</li>
</ul>
<div class="d-flex p-2 navbar-nav">
<ul class="navbar-nav d-flex flex-wrap me-auto mb-2 mb-lg-0 gap-3" style="width: 100%;">
<li class="nav-item px-3"><a class="nav-btn" onclick="redirectLogin()">Login</a></li>
<li class="nav-item px-3"><a class="nav-btn" onclick="redirectSignup()">Sign Up</a></li>
<li class="nav-item px-3">
<a class="nav-btn" href="Html-files/cart.html"><i class="fa-solid fa-cart-shopping"></i></a>
</li>
</ul>
</div>
</div>
</div>
</nav>


<!--Navbar End-->


<section class="intro_container">
<h1>Welcome to foodie!</h1>
Expand Down
Loading

0 comments on commit aa615ee

Please sign in to comment.