Skip to content

Commit b91f1d5

Browse files
author
Vien Catigan
authored
Merge pull request #1 from VienDeveloper/main
Added navbar support for mobile
2 parents de091da + 4966cbc commit b91f1d5

File tree

2 files changed

+57
-23
lines changed

2 files changed

+57
-23
lines changed

‎redesign/index.css‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,12 @@ a {
2525
width: 100%;
2626
transition: background-color 0.5s;
2727
}
28+
.nitem{
29+
transition: all 0.5s;
30+
border-bottom-right-radius: 10px;
31+
border-bottom-left-radius: 10px;
32+
33+
}
2834
.container {
2935
max-width: 120rem;
3036
margin-inline: auto;
@@ -39,7 +45,7 @@ a {
3945
transition: height 0.25s;
4046
}
4147
.logo {
42-
font-size: 2.4rem;
48+
font-size: 2.5rem;
4349
font-weight: 900;
4450
}
4551
.nav-list {
@@ -70,6 +76,10 @@ header.active {
7076
background-color: #000;
7177
box-shadow: 0 3px 1rem rgba(0, 0, 0, 0.1);
7278
}
79+
.active {
80+
background-color: #000;
81+
box-shadow: 0 3px 1rem rgba(0, 0, 0, 0.1);
82+
}
7383
header.active .navbar {
7484
height: 6rem;
7585
}
@@ -122,4 +132,15 @@ header.active .button:hover {
122132
height: 200vh;
123133
background-color: #151515;
124134
}
125-
/* Hero end*/
135+
/* Hero end*/
136+
137+
/* Removes navbar-toggler border */
138+
.navbar-toggler:focus,
139+
.navbar-toggler:active,
140+
.navbar-toggler-icon:focus ,
141+
.navbar-toggler,
142+
.navbar-toggler-icon{
143+
border: none;
144+
outline: none;
145+
box-shadow: none;
146+
}

‎redesign/index.html‎

Lines changed: 34 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
66
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
78
<link rel="stylesheet" href="index.css">
89
<link rel="apple-touch-icon" sizes="180x180" href="https://panel.zluqe.com/favicons/apple-touch-icon.png">
910
<link rel="icon" type="image/png" href="https://panel.zluqe.com/favicons/favicon-32x32.png" sizes="32x32">
@@ -15,38 +16,50 @@
1516
</head>
1617
<body>
1718
<header class="primary-header">
18-
<nav class="navbar container">
19-
<a href="/#" class="logo">Zluqe</a>
20-
<ul class="nav-list">
21-
<li>
22-
<a href="/#" class="nav-link">Home</a>
23-
</li>
24-
<li>
25-
<a href="#pricing" class="nav-link">Pricing</a>
26-
</li>
27-
<li>
28-
<a href="#langs" class="nav-link">Languages</a>
29-
</li>
30-
<li>
31-
<a href="#reviews" class="nav-link">Testimonials</a>
32-
</li>
33-
<li>
34-
<a href="#faq" class="nav-link">FAQ</a>
35-
</li>
36-
</ul>
37-
<a href="#" class="button">Get Started</a>
19+
<nav class="navbar navbar-dark container navbar-expand-lg">
20+
<a href="/#" class="logo navbar-brand"><p>Zluqe</p> </a>
21+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
22+
<span class="navbar-toggler-icon"></span>
23+
</button>
24+
<div class="collapse nitem navbar-collapse" id="navbarNav">
25+
<ul class="nav-list navbar-nav ">
26+
<li class="nav-item">
27+
<a href="/#" class="nav-link">Home</a>
28+
</li>
29+
<li class="nav-item">
30+
<a href="#pricing" class="nav-link">Pricing</a>
31+
</li class="nav-item">
32+
<li class="nav-item">
33+
<a href="#langs" class="nav-link">Languages</a>
34+
</li>
35+
<li class="nav-item">
36+
<a href="#reviews" class="nav-link">Testimonials</a>
37+
</li>
38+
<li class="nav-item">
39+
<a href="#faq" class="nav-link">FAQ</a>
40+
</li>
41+
<li class="nav-item">
42+
</li>
43+
44+
</ul>
45+
<a href="#" class="d-flex button">Get Started</a>
46+
&nbsp;
47+
</div>
3848
</nav>
3949
</header>
40-
4150
<section class="hero"><p>Free Bot Hosting</p></section>
4251
<section class="demo-content">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur quis earum, facilis, nemo commodi ullam harum quam dolore voluptatibus laboriosam in repellendus, unde minus repudiandae obcaecati eum non libero! Harum.</section>
4352
<script>
4453
const isScrolling = () => {
4554
const headerEl = document.querySelector('.primary-header')
55+
const navItems = document.querySelector('.nitem')
4656
let windowPosition = window.scrollY > 670
4757
headerEl.classList.toggle('active', windowPosition)
58+
navItems.classList.toggle('active', windowPosition)
59+
4860
}
4961
window.addEventListener('scroll', isScrolling)
5062
</script>
63+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
5164
</body>
5265
</html>

0 commit comments

Comments
 (0)