Skip to content

Updated Navigation Bar #54

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

Open
Durgesh4993 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Updated Navigation Bar #54

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
55 changes: 16 additions & 39 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,45 +18,22 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navigation-wrap bg-light start-header start-style">
<div class="container">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-md navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto py-4 py-md-0">
<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
<a class="nav-link" href="#testimonials">Testimonals</a>
</li>
<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
<a class="nav-link" href="#team">Team</a>
</li>
<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
<a class="nav-link" href="#faqs">FAQs</a>
</li>
<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
<a class="nav-link" href="https://github.com/TechOS-Bell/techOS-Bell">Contribute</a>
</li>
<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
<a class="nav-link" href="#joinus">Join Us</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>

<!--======== Nav bar start-->
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#aboutus">About</a>
<a href="#testimonials">Testimonals</a>
<a href="#team">Team</a>
<a href="#faqs">FAQs</a>
<a href="https://github.com/TechOS-Bell/techOS-Bell">Contribute</a>
<a class="join" href="#about">Join Us</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<!--======== Nav bar end-->

<div class="cursor"></div>
<a class="back-to-top hidden">
<i class="fa fa-chevron-up"></i>
Expand Down
11 changes: 10 additions & 1 deletion script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,4 +128,13 @@ backToTopButton.addEventListener("click", goToTop);

$('.navbar-nav>li>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
});
//NAVIGATION BAR
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
78 changes: 50 additions & 28 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,41 +30,63 @@ body {
font-size: 40px;
}

/* Style the top navigation bar */
*{
box-sizing:border-box;
margin:0;
padding:0;
list-style:none;
font-family: Helvetica;
/*New navigation bar start*/
.topnav {
background-color: #333;
overflow: hidden;
}

@media
(prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
}

/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
.join{
float: right !important;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}

.mySlides {
object-fit: cover;
margin-top: 60px;
}
/* Change color on hover */

@keyframes fadeIn {
0% {
opacity: 100;
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}

100% {
opacity: 0;
.join{
text-align: center;
}
}



}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/*New navigation bar end*/
/* About us */
.aboutus{
font-family: 'Poppins', sans-serif;
Expand Down