Navbar not working only in Jekyll

Help
1

I’ve managed to build a website with Django but since my primary goal is just blogging and Django is more complicated than I need I’m trying to essentially copy that site over to Jekyll. I’ve hit a snag though, as my navbar won’t cover the entire width of the screen even though it does so with Django. To create the navbar I’m using Bootstrap, which is working on everything else besides the navbar. I’m a novice when it comes to web design so I’m probably missing something obvious, but I would appreciate any help in figuring out the problem.

My navbar is in the layout ‘default.html’:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,
		initial-scale=1, shrink-to-fit=no">
	<title>{{ page.title }}</title>

	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3
	/dist/css/bootstrap.min.css" rel="stylesheet" 
	integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" 
	crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
	<link rel="stylesheet" href="/assets/css/style.css">	
</head>
<body>
	<nav class="navbar navbar-expand-lg" style="background-color: #000033;">
		<div class="container-fluid">
	    	<a class="navbar-brand text-white" href="">FinnLearns</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 navbar-dark"></span>
	    	</button>
		    <div class="collapse navbar-collapse" id="navbarSupportedContent">
		    	<ul class="navbar-nav">
		    		<li class="navbar-item active">
						<a href="projects.html" class="nav-link active text-white">Projects</a>
					</li>	
					<li class="navbar-item active">
						<a href="life.html" class="nav-link active text-white">Life</a>
					</li>
				</ul>
				<ul class="navbar-nav ms-auto">
					<li class="nav-item">
						<a href="https://profile/linkedin.com">
							<img src="../assets/images/linkedinPic.png" width=50 height=50></a>
					</li>
					<li class="nav-item">
						<a href="mailto:email@gmail.com">
							<img src="../assets/images/gmailPic.png" alt="Gmail" width=50 height=50></a>
					</li>
				</ul>
		    </div>
	  	</div>
	</nav>
	<main role="main" class="container">
		<div>
			{{ content }}
		</div>
	</main>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" 
	integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

And my CSS

body {
	background-color: #280137;
	color: white;
	margin: 0px;
    }

.fade-in-cards { animation: fadeIn 2s; }

@keyframes fadeIn {
    0% { opacity: 0; }          
    100% { opacity: 1; }           
}

html { scroll-behavior: smooth; }

nav { width: 100%; }

.back-to-top {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #dc143d;
	border-radius: 0.5rem;
	padding: 0.5rem;
	text-decoration: none;
	transition: 0.2s ease-out;
}

.back-to-top span {
	color: white;
	font-rem: 2rem;
	transition: 0.2s ease-out;
}

.back-to-top:hover {
	background-color: #be1a3b;
}
.back-to-top:hover span {
	transform: translateY(-3px);
}

.navbar-toggle {
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
}

.navbar-toggle .icon-bar { background-color: white; }

.container {
    width: 100%;
    white-space: nowrap;
}

To show the problem, here is a picture of the current state of my site:

Screenshot 2025-06-30 at 10.07.55 PM
Screenshot 2025-06-30 at 10.07.55 PM2940×1680 119 KB

Thank you!

2

When I render that HTML/CSS, the nav-bar stretches the entire width of the view-port (see snapshot). Possibly additional CSS is being added when Jekyll builds the page? Or caching by the browser or jekyll serve needs restarting? You can use the browsers developer tools to inspect the nav element to see what CSS is applied.

image
image628×290 17.7 KB

3

I ended up looking closely at the navbar in the developer tools and it turns out that CSS from my home page ‘index.html’ was affecting the default layout somehow. I’m not exactly sure why it was causing problems only in Jekyll but I’ve gotten the navbar to span the screen now. Thank you for your help!

1 Like