I am currently working on a main page that includes a bootstrap navigation bar with a dropdown menu. I have successfully managed to display the dropdown menu and change its color using CSS. However, I encountered an issue when attempting to modify the font size and color of the title text within "navbar-brand". Despite trying various sizes in my CSS file, the font size and color remained unchanged. Can someone assist me with this? Below are the snippets of code:
body {
font-family: 'Domine', sans-serif;
text-align: center;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Domine-Bold', sans-serif;
}
.navbar-nav > li > .dropdown-menu {
background-color:#F9FFA4;
}
.navbar-brand {
color: red;
font-family: 'Domine-Bold', serif;
font-size: 150px;
font-weight: 700;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
background-color:#F9FFA4;
} <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="format-detection" content="telephone=no">
<!-- CSS Stylesheet -->
<link rel="stylesheet" href="css/styles.css">
<!-- <title>Sample</title> -->
<!-- Bootstrap 5.1.3 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f4d40405b5c5b5d4e5f6f1a011e011c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Popper -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Domine:wght@700&display=swap" rel="stylesheet">
<!-- Bootstrap Script -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8d80809b9c9b9d8e9fafdac1dec1dc">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<section class="color-section" id="title">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:#F9FFA4">
<div class="container-fluid">
<a class="navbar-brand" href="#">HomeTitle</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHome" aria-controls="navbarHome" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarHome">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
...
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownNewIn" role="button" data-bs-toggle="dropdown" aria-expanded="false">
New In
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownNewIn">
<li><a class="dropdown-item" href="#">Solar Phone Charger</a></li>
...
</section>
</body>
</html>I was aiming to increase the font size and change the font color for the "HomeTitle" in navbar-brand, unfortunately without success.