Home Web Design Bootstrap Bootstrap Responsive Menu Bar With Light/Dark Mode | Complete Navbar

Bootstrap Responsive Menu Bar With Light/Dark Mode | Complete Navbar

April 17, 2020

13256

How we can create a responsive navigation bar using Bootstrap? Solution: See this Bootstrap Responsive Menu Bar With Light/Dark Mode, Complete Navbar Ready To Use.

Previously I have shared a mega menu using bootstrap, but this is a responsive navbar with light and dark mode feature. Basically, the menu or navigation bar is for navigating or showing important links of the website to users. And most of the websites use a stylish menu bar, because the first impression of your website is the menu/navbar.

Today you will learn to create Complete Navbar with dark and light mode switch. Basically, there is a navigation bar with a logo on the left side and some links on the right side. And when you will scroll down then the height of the navbar will be decreased. Also, there are some sub-menu items in a link you can reveal those by hover on it. An add-on feature of this menubar is, there is a switch for changing dark and light mode which is very important in modern days.

So, Today I am sharing Bootstrap Responsive Menu Bar With Light/Dark Mode. This navbar is based on bootstrap 4, and also used CSS for better styling and adding animations. There are also used jQuery, as we know bootstrap can’t run without it and also some functions like dark/light switch, mobile menu, etc based on jQuery.

If you are thinking now how this responsive menu bar actually is, then see the preview given below.

Preview Of Complete Responsive Navbar

See this video preview to getting an idea of how this bootstrap menu bar looks like.

Live Demo

Now you can see this visually, also you can see it live by pressing the button given above. If you like this then get the source code of its.

Bootstrap Responsive Menu Bar With Light/Dark Mode Source Code

Before sharing source code, let’s talk about it. First I have created the whole layout using bootstrap pre-built class and ID names. For creating the navigation I have used Bootstrap’s <nav class="navbar navbar-expand-md"> class names (info). After the navbar items, I have created two more main divs, one for heading and one for dark mode switching.

Now using CSS I have done extra style to the elements, as you can see in the preview. Basically, with CSS I gave color and animation values because bootstrap has prebuilt position styles. There I have used @media query for decreasing and change the position of some items on the small screen size. And many more things I have done using CSS like the mobile menu icon, box-shadow, animation-delay, etc.

jQuery handling here the 4 main features of this program. First is to reduce the navbar’s height on scroll down, second is to remove the animation on the switch, third is managing menu items in mobile or small screen size devices, and the fourth is dark and light mode switch. The codes can’t be explained in writing, you will understand after getting the codes.

For creating this program you have to create 3 files for that. First file for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- Code By Webdevtrick ( https://webdevtrick.com ) -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Responsive Bootstrap menu With Light/Dark Mode | Webdevtrick.com</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
  <link rel="stylesheet" href="./style.css">

</head>
<body>

<body class="hero-anime">	

	<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">
					
						<a class="navbar-brand" href="https://webdevtrick.com/" target="_blank"><img src="https://webdevtrick.com/wp-content/uploads/logo-fb-1.png" alt=""></a>	
						
						<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 active">
									<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Home</a>
								</li>
								<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
									<a class="nav-link" href="#">About</a>
								</li>
								<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
									<a class="nav-link" href="#">Portfolio</a>
								</li>
								<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
									<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Services</a>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="#">Web Design</a>
										<a class="dropdown-item" href="#">Web Development</a>
										<a class="dropdown-item" href="#">SEO</a>
										<a class="dropdown-item" href="#">AI Development</a>
									</div>
								</li>
								<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
									<a class="nav-link" href="#">Blog</a>
								</li>
								<li class="nav-item pl-4 pl-md-0 ml-0 ml-md-4">
									<a class="nav-link" href="#">Contact</a>
								</li>
							</ul>
						</div>
						
					</nav>		
				</div>
			</div>
		</div>
	</div>
	<div class="section full-height">
		<div class="absolute-center">
			<div class="section">
				<div class="container">
					<div class="row">
						<div class="col-12">
				<h1>Bootstrap<br>Menu</h1>
				<p>scroll down for nav animation</p>	
						</div>	
					</div>		
				</div>		
			</div>
			<div class="section mt-5">
				<div class="container">
					<div class="row">
						<div class="col-12">
							<div id="switch">
								<div id="circle"></div>
							</div>
						</div>	
					</div>		
				</div>			
			</div>
		</div>
	</div>
	<div class="my-5 py-5">
	</div>

</body>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Responsive Bootstrap menu With Light/Dark Mode | Webdevtrick.com</title>

</head>

<body>

</button>

</li>

<a class="nav-link" href="#">About</a>

</li>

<a class="nav-link" href="#">Portfolio</a>

</li>

<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Services</a>

<a class="dropdown-item" href="#">Web Design</a>

<a class="dropdown-item" href="#">Web Development</a>

<a class="dropdown-item" href="#">AI Development</a>

</div>

</li>

</li>

<a class="nav-link" href="#">Contact</a>

</li>

</ul>

</div>

</nav>

</div>

<h1>Bootstrap<br>Menu</h1>

<p>scroll down for nav animation</p>

</div>

</div>

</div>

</body>

</body>

</html>

style.css

Now create a CSS file ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext');

body{
    font-family: 'Poppins', sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: #212112;
	background-size: 7%;
	background-color: #fff;
	overflow-x: hidden;
    transition: all 200ms linear;
}
::selection {
	color: #fff;
	background-color: #ff4242;
}
::-moz-selection {
	color: #fff;
	background-color: #ff4242;
}
.start-header {
	opacity: 1;
	transform: translateY(0);
	padding: 10px 0;
	box-shadow: 0 10px 30px 0 rgb(33,33,33,0.15);
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.start-header.scroll-on {
	box-shadow: 0 5px 10px 0 rgb(33,33,33,0.15);
	padding: 5px 0;
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.start-header.scroll-on .navbar-brand img{
	height: 28px;
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.navigation-wrap{
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1000;
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.navbar{
	padding: 0;
}
.navbar-brand img{
	height: 52px;
	width: auto;
	display: block;
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.navbar-toggler {
	float: right;
	border: none;
	padding-right: 0;
}
.navbar-toggler:active,
.navbar-toggler:focus {
	outline: none;
}
.navbar-light .navbar-toggler-icon {
	width: 24px;
	height: 17px;
	background-image: none;
	position: relative;
	border-bottom: 1px solid #000;
    transition: all 300ms linear;
}
.navbar-light .navbar-toggler-icon:after, 
.navbar-light .navbar-toggler-icon:before{
	width: 24px;
	position: absolute;
	height: 1px;
	background-color: #000;
	top: 0;
	left: 0;
	content: '';
	z-index: 2;
    transition: all 300ms linear;
}
.navbar-light .navbar-toggler-icon:after{
	top: 8px;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
	transform: rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
	transform: translateY(8px) rotate(-45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
	border-color: transparent;
}
.nav-link{
	color: #212121 !important;
	font-weight: 500;
    transition: all 200ms linear;
}
.nav-item:hover .nav-link{
	color: #ff4242 !important;
}
.nav-item.active .nav-link{
	color: #777 !important;
}
.nav-link {
	position: relative;
	padding: 5px 0 !important;
	display: inline-block;
}
.nav-item:after{
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 100%;
	height: 2px;
	content: '';
	background-color: #ff4242;
	opacity: 0;
    transition: all 200ms linear;
}
.nav-item:hover:after{
	bottom: 0;
	opacity: 1;
}
.nav-item.active:hover:after{
	opacity: 0;
}
.nav-item{
	position: relative;
    transition: all 200ms linear;
}

.bg-light {
	background-color: #fff !important;
    transition: all 200ms linear;
}
.section {
    position: relative;
	width: 100%;
	display: block;
}
.full-height {
    height: 100vh;
}
.over-hide {
    overflow: hidden;
}
.absolute-center {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
  margin-top: 40px;
	transform: translateY(-50%);
	z-index: 20;
}
h1 {
	font-size: 48px;
	line-height: 1.2;
	font-weight: 700;
	color: #212112;
	text-align: center;
}
p {
	text-align: center;
	margin: 0;
	padding-top: 10px;
	opacity: 1;
	transform: translate(0);
    transition: all 300ms linear;
    transition-delay: 1700ms;
}

body.hero-anime p{
	opacity: 0;
	transform: translateY(40px);
    transition-delay: 1700ms;
}
#switch,
#circle {
	cursor: pointer;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
} 
#switch {
	width: 60px;
	height: 8px;
	border: 2px solid #ff4242;
	border-radius: 27px;
	background: #ff4242;
	position: relative;
	display: block;
	margin: 0 auto;
	text-align: center;
	opacity: 1;
	transform: translate(0);
    transition: all 300ms linear;
    transition-delay: 1900ms;
}
body.hero-anime #switch{
	opacity: 0;
	transform: translateY(40px);
    transition-delay: 1900ms;
}
#circle {
	position: absolute;
	top: -11px;
	left: -13px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #000;
}
.switched {
	border-color: #000 !important;
	background: #ff4242 !important;
}
.switched #circle {
	left: 43px;
	box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
	background: #fff;
}
.nav-item .dropdown-menu {
    transform: translate3d(0, 10px, 0);
    visibility: hidden;
    opacity: 0;
	max-height: 0;
    display: block;
	padding: 0;
	margin: 0;
    transition: all 200ms linear;
}
.nav-item.show .dropdown-menu {
    opacity: 1;
    visibility: visible;
	max-height: 999px;
    transform: translate3d(0, 0px, 0);
}
.dropdown-menu {
	padding: 10px!important;
	margin: 0;
	font-size: 13px;
	letter-spacing: 1px;
	color: #212121;
	background-color: #fcfaff;
	border: none;
	border-radius: 3px;
	box-shadow: 0 5px 10px 0 rgb(33,33,33,0.15);
    transition: all 200ms linear;
}
.dropdown-toggle::after {
	display: none;
}

.dropdown-item {
	padding: 3px 15px;
	color: #212121;
	border-radius: 2px;
    transition: all 200ms linear;
}
.dropdown-item:hover, 
.dropdown-item:focus {
	color: #fff;
	background-color: rgb(255,66,66,0.6);
}

body.dark{
	color: #fff;
	background-color: #1f2029;
}
body.dark h1{
	color: #fff;
}
body.dark h1 span{
    transition-delay: 0ms !important;
}
body.dark p{
	color: #fff;
    transition-delay: 0ms !important;
}
body.dark .bg-light {
	background-color: #14151a !important;
}
body.dark .start-header {
	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.15);
}
body.dark .start-header.scroll-on {
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
}
body.dark .nav-link{
	color: #fff !important;
}
body.dark .nav-item.active .nav-link{
	color: #999 !important;
}
body.dark .dropdown-menu {
	color: #fff;
	background-color: #1f2029;
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25);
}
body.dark .dropdown-item {
	color: #fff;
}
body.dark .navbar-light .navbar-toggler-icon {
	border-bottom: 1px solid #fff;
}
body.dark .navbar-light .navbar-toggler-icon:after, 
body.dark .navbar-light .navbar-toggler-icon:before{
	background-color: #fff;
}
body.dark .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
	border-color: transparent;
}


@media (max-width: 767px) { 
	h1{
		font-size: 38px;
	}
	.nav-item:after{
		display: none;
	}
	.nav-item::before {
		position: absolute;
		display: block;
		top: 15px;
		left: 0;
		width: 11px;
		height: 1px;
		content: "";
		border: none;
		background-color: #000;
		vertical-align: 0;
	}
	.dropdown-toggle::after {
		position: absolute;
		display: block;
		top: 10px;
		left: -23px;
		width: 1px;
		height: 11px;
		content: "";
		border: none;
		background-color: #000;
		vertical-align: 0;
		transition: all 200ms linear;
	}
	.dropdown-toggle[aria-expanded="true"]::after{
		transform: rotate(90deg);
		opacity: 0;
	}
	.dropdown-menu {
		padding: 0 !important;
		background-color: transparent;
		box-shadow: none;
		transition: all 200ms linear;
	}
	.dropdown-toggle[aria-expanded="true"] + .dropdown-menu {
		margin-top: 10px !important;
		margin-bottom: 20px !important;
	}
	body.dark .nav-item::before {
		background-color: #fff;
	}
	body.dark .dropdown-toggle::after {
		background-color: #fff;
	}
	body.dark .dropdown-menu {
		background-color: transparent;
		box-shadow: none;
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

/* Code By Webdevtrick ( https://webdevtrick.com ) */

@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext');

body{

font-family: 'Poppins', sans-serif;

font-size: 16px;

line-height: 24px;

font-weight: 400;

color: #212112;

background-size: 7%;

background-color: #fff;

overflow-x: hidden;

transition: all 200ms linear;

}

::selection {

color: #fff;

background-color: #ff4242;

}

::-moz-selection {

color: #fff;

background-color: #ff4242;

}

.start-header {

opacity: 1;

transform: translateY(0);

padding: 10px 0;

box-shadow: 0 10px 30px 0 rgb(33,33,33,0.15);

-webkit-transition : all 0.3s ease-out;

transition : all 0.3s ease-out;

}

.start-header.scroll-on {

box-shadow: 0 5px 10px 0 rgb(33,33,33,0.15);

padding: 5px 0;

-webkit-transition : all 0.3s ease-out;

transition : all 0.3s ease-out;

}

.start-header.scroll-on .navbar-brand img{

height: 28px;

-webkit-transition : all 0.3s ease-out;

transition : all 0.3s ease-out;

}

.navigation-wrap{

position: fixed;

width: 100%;

top: 0;

left: 0;

z-index: 1000;

-webkit-transition : all 0.3s ease-out;

transition : all 0.3s ease-out;

}

.navbar{

padding: 0;

}

.navbar-brand img{

height: 52px;

width: auto;

display: block;

-webkit-transition : all 0.3s ease-out;

transition : all 0.3s ease-out;

}

.navbar-toggler {

float: right;

border: none;

padding-right: 0;

}

.navbar-toggler:active,

.navbar-toggler:focus {

outline: none;

}

.navbar-light .navbar-toggler-icon {

width: 24px;

height: 17px;

background-image: none;

position: relative;

border-bottom: 1px solid #000;

transition: all 300ms linear;

}

.navbar-light .navbar-toggler-icon:after,

.navbar-light .navbar-toggler-icon:before{

width: 24px;

position: absolute;

height: 1px;

background-color: #000;

top: 0;

left: 0;

content: '';

z-index: 2;

transition: all 300ms linear;

}

.navbar-light .navbar-toggler-icon:after{

top: 8px;

}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {

transform: rotate(45deg);

}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {

transform: translateY(8px) rotate(-45deg);

}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {

border-color: transparent;

}

.nav-link{

color: #212121 !important;

font-weight: 500;

transition: all 200ms linear;

}

.nav-item:hover .nav-link{

color: #ff4242 !important;

}

.nav-item.active .nav-link{

color: #777 !important;

}

.nav-link {

position: relative;

padding: 5px 0 !important;

display: inline-block;

}

.nav-item:after{

position: absolute;

bottom: -5px;

left: 0;

width: 100%;

height: 2px;

content: '';

background-color: #ff4242;

opacity: 0;

transition: all 200ms linear;

}

.nav-item:hover:after{

bottom: 0;

opacity: 1;

}

.nav-item.active:hover:after{

opacity: 0;

}

.nav-item{

position: relative;

transition: all 200ms linear;

}

.bg-light {

background-color: #fff !important;

transition: all 200ms linear;

}

.section {

position: relative;

width: 100%;

display: block;

}

.full-height {

height: 100vh;

}

.over-hide {

overflow: hidden;

}

.absolute-center {

position: absolute;

top: 50%;

left: 0;

width: 100%;

margin-top: 40px;

transform: translateY(-50%);

z-index: 20;

}

h1 {

font-size: 48px;

line-height: 1.2;

font-weight: 700;

color: #212112;

text-align: center;

}

p {

text-align: center;

margin: 0;

padding-top: 10px;

opacity: 1;

transform: translate(0);

transition: all 300ms linear;

transition-delay: 1700ms;

}

body.hero-anime p{

opacity: 0;

transform: translateY(40px);

transition-delay: 1700ms;

}

#switch,

#circle {

cursor: pointer;

-webkit-transition: all 300ms linear;

transition: all 300ms linear;

}

#switch {

width: 60px;

height: 8px;

border: 2px solid #ff4242;

border-radius: 27px;

background: #ff4242;

position: relative;

display: block;

margin: 0 auto;

text-align: center;

opacity: 1;

transform: translate(0);

transition: all 300ms linear;

transition-delay: 1900ms;

}

body.hero-anime #switch{

opacity: 0;

transform: translateY(40px);

transition-delay: 1900ms;

}

#circle {

position: absolute;

top: -11px;

left: -13px;

width: 26px;

height: 26px;

border-radius: 50%;

background: #000;

}

.switched {

border-color: #000 !important;

background: #ff4242 !important;

}

.switched #circle {

left: 43px;

box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);

background: #fff;

}

.nav-item .dropdown-menu {

transform: translate3d(0, 10px, 0);

visibility: hidden;

opacity: 0;

max-height: 0;

display: block;

padding: 0;

margin: 0;

transition: all 200ms linear;

}

.nav-item.show .dropdown-menu {

opacity: 1;

visibility: visible;

max-height: 999px;

transform: translate3d(0, 0px, 0);

}

.dropdown-menu {

padding: 10px!important;

margin: 0;

font-size: 13px;

letter-spacing: 1px;

color: #212121;

background-color: #fcfaff;

border: none;

border-radius: 3px;

box-shadow: 0 5px 10px 0 rgb(33,33,33,0.15);

transition: all 200ms linear;

}

.dropdown-toggle::after {

display: none;

}

.dropdown-item {

padding: 3px 15px;

color: #212121;

border-radius: 2px;

transition: all 200ms linear;

}

.dropdown-item:hover,

.dropdown-item:focus {

color: #fff;

background-color: rgb(255,66,66,0.6);

}

body.dark{

color: #fff;

background-color: #1f2029;

}

body.dark h1{

color: #fff;

}

body.dark h1 span{

transition-delay: 0ms !important;

}

body.dark p{

color: #fff;

transition-delay: 0ms !important;

}

body.dark .bg-light {

background-color: #14151a !important;

}

body.dark .start-header {

box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.15);

}

body.dark .start-header.scroll-on {

box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);

}

body.dark .nav-link{

color: #fff !important;

}

body.dark .nav-item.active .nav-link{

color: #999 !important;

}

body.dark .dropdown-menu {

color: #fff;

background-color: #1f2029;

box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25);

}

body.dark .dropdown-item {

color: #fff;

}

body.dark .navbar-light .navbar-toggler-icon {

border-bottom: 1px solid #fff;

}

body.dark .navbar-light .navbar-toggler-icon:after,

body.dark .navbar-light .navbar-toggler-icon:before{

background-color: #fff;

}

body.dark .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {

border-color: transparent;

}

@media (max-width: 767px) {

h1{

font-size: 38px;

}

.nav-item:after{

display: none;

}

.nav-item::before {

position: absolute;

display: block;

top: 15px;

left: 0;

width: 11px;

height: 1px;

content: "";

border: none;

background-color: #000;

vertical-align: 0;

}

.dropdown-toggle::after {

position: absolute;

display: block;

top: 10px;

left: -23px;

width: 1px;

height: 11px;

content: "";

border: none;

background-color: #000;

vertical-align: 0;

transition: all 200ms linear;

}

.dropdown-toggle[aria-expanded="true"]::after{

transform: rotate(90deg);

opacity: 0;

}

.dropdown-menu {

padding: 0 !important;

background-color: transparent;

box-shadow: none;

transition: all 200ms linear;

}

.dropdown-toggle[aria-expanded="true"] + .dropdown-menu {

margin-top: 10px !important;

margin-bottom: 20px !important;

}

body.dark .nav-item::before {

background-color: #fff;

}

body.dark .dropdown-toggle::after {

background-color: #fff;

}

body.dark .dropdown-menu {

background-color: transparent;

box-shadow: none;

}

function.js

The last step, Create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
(function($) { "use strict";

	$(function() {
		var header = $(".start-style");
		$(window).scroll(function() {    
			var scroll = $(window).scrollTop();
		
			if (scroll >= 10) {
				header.removeClass('start-style').addClass("scroll-on");
			} else {
				header.removeClass("scroll-on").addClass('start-style');
			}
		});
	});		
		
	//Animation
	
	$(document).ready(function() {
		$('body.hero-anime').removeClass('hero-anime');
	});

	//Menu On Hover
		
	$('body').on('mouseenter mouseleave','.nav-item',function(e){
			if ($(window).width() > 750) {
				var _d=$(e.target).closest('.nav-item');_d.addClass('show');
				setTimeout(function(){
				_d[_d.is(':hover')?'addClass':'removeClass']('show');
				},1);
			}
	});	
	
	//Switch light/dark
	
	$("#switch").on('click', function () {
		if ($("body").hasClass("dark")) {
			$("body").removeClass("dark");
			$("#switch").removeClass("switched");
		}
		else {
			$("body").addClass("dark");
			$("#switch").addClass("switched");
		}
	});  
	
  })(jQuery);

// Code By Webdevtrick ( https://webdevtrick.com )

(function($) { "use strict";

$(function() {

var header = $(".start-style");

$(window).scroll(function() {

var scroll = $(window).scrollTop();

if (scroll >= 10) {

header.removeClass('start-style').addClass("scroll-on");

} else {

header.removeClass("scroll-on").addClass('start-style');

}

});

//Animation

$(document).ready(function() {

$('body.hero-anime').removeClass('hero-anime');

});

//Menu On Hover

$('body').on('mouseenter mouseleave','.nav-item',function(e){

if ($(window).width() > 750) {

var _d=$(e.target).closest('.nav-item');_d.addClass('show');

setTimeout(function(){

_d[_d.is(':hover')?'addClass':'removeClass']('show');

},1);

}

});

//Switch light/dark

$("#switch").on('click', function () {

if ($("body").hasClass("dark")) {

$("body").removeClass("dark");

$("#switch").removeClass("switched");

}

else {

$("body").addClass("dark");

$("#switch").addClass("switched");

}

});

})(jQuery);

That’s It. Now you have successfully created Bootstrap Responsive Menu Bar With Light/Dark Mode, Complete Navbar Program. If you have any doubt or questions comment down below.

Thanks For Visiting, Keep Visiting.

5 COMMENTS

Henriques May 9, 2020 At 11:56 pm

Thank you
I found the menu very interesting, but I believe the hamburguer menu it is not working with the jquery version 3.5.1

Reply
- Patrick September 1, 2020 At 12:11 pm
  
  Hi Henriques, the burger menu is working under 3.5.1 in my case.
  
  Reply
Patrick September 1, 2020 At 12:17 pm

I tried to solve the problem with the blue frame when clicking a dropdown for normal or small resolutions without any success. Can you help me solving that?

Reply
Errol May 28, 2021 At 5:23 am

the browser does not resize on my phone…

Reply
Henri de Boer September 21, 2021 At 12:53 pm

You should add below line to your header for it to correctly resize on mobile devices.

Reply

Bootstrap Responsive Menu Bar With Light/Dark Mode | Complete Navbar

Preview Of Complete Responsive Navbar

Bootstrap Responsive Menu Bar With Light/Dark Mode Source Code

5 COMMENTS

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY