Why does my navigation bar text go higher when I add Bootstrap?

I copied the navigation bar from one Youtube video. I wanted to try Bootstrap and when I added it to my project, the text changed the font and the links went up in the bar. So how do I make the text look the same as it did before Bootstrap?

Before Bootstrap:

After Bootstrap:

etusivu.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vuosisata | Etusivu</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/navigation.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="js/navigation.js"></script>
</head>
<body>
    
</body>
</html>

JavaScript
​x
 
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Vuosisata | Etusivu</title>    <link rel="stylesheet" href="css/bootstrap.min.css">    <link rel="stylesheet" href="css/navigation.css">    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>    <script src="js/navigation.js"></script></head><body>    </body></html>​

navigation.html:

<nav>
    <div class="logo">
        <h4>Test</h4>
    </div>
    <ul class="nav-links">
        <li><a href="?p=etusivu">asdf</a></li>
        <li><a href="?p=meista">asdf</a></li>
        <li><a href="?p=yllapito">asdf</a></li>
        <li><a href="?p=projektit">asdf</a></li>
    </ul>
    <div class="burger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>
</nav>

JavaScript
 
<nav>    <div class="logo">        <h4>Test</h4>    </div>    <ul class="nav-links">        <li><a href="?p=etusivu">asdf</a></li>        <li><a href="?p=meista">asdf</a></li>        <li><a href="?p=yllapito">asdf</a></li>        <li><a href="?p=projektit">asdf</a></li>    </ul>    <div class="burger">        <div class="line1"></div>        <div class="line2"></div>        <div class="line3"></div>    </div></nav>​

navigation.css:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

nav {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #4a495d;
}

.logo {
    color: rgb(226, 226, 226);
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 20px;
}

.nav-links {
    display: flex;
    justify-content: space-around;
    width: 30%;
}

.nav-links li {
    list-style: none;
}

.nav-links a {
    color: rgb(226, 226, 226);
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 14px;
    vertical-align: middle;
}

.burger {
    display: none;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: rgb(226, 226, 226);
    margin: 5px;
    transition: all 0.3s ease;
}

@media screen and (max-width: 1024px) {
    .nav-links {
        width: 60%;
    }
}

@media screen and (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    
    .nav-links {
        position: fixed;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: #4a495d;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }
    
    .nav-links li {
        opacity: 1;
    }
    
    .burger {
        display: block;
        cursor: pointer;
    }
}

.nav-active {
        transform: translateX(0%);
}

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
    opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}

JavaScript
 
* {    margin: 0;    padding: 0;    box-sizing: border-box;}​nav {    position: fixed;    top: 0;    width: 100%;    display: flex;    justify-content: space-around;    align-items: center;    min-height: 8vh;    background-color: #4a495d;}​.logo {    color: rgb(226, 226, 226);    text-transform: uppercase;    letter-spacing: 5px;    font-size: 20px;}​.nav-links {    display: flex;    justify-content: space-around;    width: 30%;}​.nav-links li {    list-style: none;}​.nav-links a {    color: rgb(226, 226, 226);    letter-spacing: 3px;    font-weight: bold;    font-size: 14px;    vertical-align: middle;}​.burger {    display: none;}​.burger div {    width: 25px;    height: 3px;    background-color: rgb(226, 226, 226);    margin: 5px;    transition: all 0.3s ease;}​@media screen and (max-width: 1024px) {    .nav-links {        width: 60%;    }}​@media screen and (max-width: 768px) {    body {        overflow-x: hidden;    }        .nav-links {        position: fixed;        right: 0px;        height: 92vh;        top: 8vh;        background-color: #4a495d;        display: flex;        flex-direction: column;        align-items: center;        width: 50%;        transform: translateX(100%);        transition: transform 0.5s ease-in;    }        .nav-links li {        opacity: 1;    }        .burger {        display: block;        cursor: pointer;    }}​.nav-active {        transform: translateX(0%);}​@keyframes navLinkFade {    from {        opacity: 0;        transform: translateX(50px);    }    to {        opacity: 1;        transform: translateX(0);    }}​.toggle .line1 {    transform: rotate(-45deg) translate(-5px, 6px);}​.toggle .line2 {    opacity: 0;}​.toggle .line3 {    transform: rotate(45deg) translate(-5px, -6px);}​

index.php:

<?php

if (isset($_GET['p'])){
  $pageId = preg_replace('/[^A-Za-z0-9-_]/', '', $_GET['p']);
  if (file_exists('pages/' . $pageId . '.html')) {
    readfile('pages/' . $pageId . '.html');
  } else {
    readfile('pages/404.html');
  }
} else {
  readfile('pages/etusivu.html');
}

include 'navigation.html';

?>

JavaScript
 
<?php​if (isset($_GET['p'])){  $pageId = preg_replace('/[^A-Za-z0-9-_]/', '', $_GET['p']);  if (file_exists('pages/' . $pageId . '.html')) {    readfile('pages/' . $pageId . '.html');  } else {    readfile('pages/404.html');  }} else {  readfile('pages/etusivu.html');}​include 'navigation.html';​?>​

P.S. I’m sorry for the bad English 😀

Answer

I have tested the override works. please open in full page and see if this the result you are looking for?

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

nav {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #4a495d;
}

.logo {
    color: rgb(226, 226, 226);
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 20px;
}

.nav-links {
    display: flex !important;
    justify-content: space-around !important;
    width: 30% !important;
}

.nav-links li {
    list-style: none;
}

.nav-links a {
    color: rgb(226, 226, 226);
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 14px;
    vertical-align: middle;
}

.burger {
    display: none;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: rgb(226, 226, 226);
    margin: 5px;
    transition: all 0.3s ease;
}

@media screen and (max-width: 1024px) {
    .nav-links {
        width: 60%;
    }
}

@media screen and (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    
    .nav-links {
        position: fixed;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: #4a495d;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }
    
    .nav-links li {
        opacity: 1;
    }
    
    .burger {
        display: block;
        cursor: pointer;
    }
}

.nav-active {
        transform: translateX(0%);
}

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
    opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}

JavaScript
 
* {    margin: 0;    padding: 0;    box-sizing: border-box;}​nav {    position: fixed;    top: 0;    width: 100%;    display: flex;    justify-content: space-around;    align-items: center;    min-height: 8vh;    background-color: #4a495d;}​.logo {    color: rgb(226, 226, 226);    text-transform: uppercase;    letter-spacing: 5px;    font-size: 20px;}​.nav-links {    display: flex !important;    justify-content: space-around !important;    width: 30% !important;}​.nav-links li {    list-style: none;}​.nav-links a {    color: rgb(226, 226, 226);    letter-spacing: 3px;    font-weight: bold;    font-size: 14px;    vertical-align: middle;}​.burger {    display: none;}​.burger div {    width: 25px;    height: 3px;    background-color: rgb(226, 226, 226);    margin: 5px;    transition: all 0.3s ease;}​@media screen and (max-width: 1024px) {    .nav-links {        width: 60%;    }}​@media screen and (max-width: 768px) {    body {        overflow-x: hidden;    }        .nav-links {        position: fixed;        right: 0px;        height: 92vh;        top: 8vh;        background-color: #4a495d;        display: flex;        flex-direction: column;        align-items: center;        width: 50%;        transform: translateX(100%);        transition: transform 0.5s ease-in;    }        .nav-links li {        opacity: 1;    }        .burger {        display: block;        cursor: pointer;    }}​.nav-active {        transform: translateX(0%);}​@keyframes navLinkFade {    from {        opacity: 0;        transform: translateX(50px);    }    to {        opacity: 1;        transform: translateX(0);    }}​.toggle .line1 {    transform: rotate(-45deg) translate(-5px, 6px);}​.toggle .line2 {    opacity: 0;}​.toggle .line3 {    transform: rotate(45deg) translate(-5px, -6px);}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vuosisata | Etusivu</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/navigation.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="js/navigation.js"></script>

</head>
<body>
<nav>
    <div class="logo">
        <h4>Test</h4>
    </div>
    <ul class="nav-links">
        <li><a href="?p=etusivu">asdf</a></li>
        <li><a href="?p=meista">asdf</a></li>
        <li><a href="?p=yllapito">asdf</a></li>
        <li><a href="?p=projektit">asdf</a></li>
    </ul>
    <div class="burger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>
</nav>
<?php

if (isset($_GET['p'])){
  $pageId = preg_replace('/[^A-Za-z0-9-_]/', '', $_GET['p']);
  if (file_exists('pages/' . $pageId . '.html')) {
    readfile('pages/' . $pageId . '.html');
  } else {
    readfile('pages/404.html');
  }
} else {
  readfile('pages/etusivu.html');
}

include 'navigation.html';

?>

</body>
</html>

JavaScript
 
<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Vuosisata | Etusivu</title>    <link rel="stylesheet" href="css/bootstrap.min.css">    <link rel="stylesheet" href="css/navigation.css">    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>    <script src="js/navigation.js"></script>​</head><body><nav>    <div class="logo">        <h4>Test</h4>    </div>    <ul class="nav-links">        <li><a href="?p=etusivu">asdf</a></li>        <li><a href="?p=meista">asdf</a></li>        <li><a href="?p=yllapito">asdf</a></li>        <li><a href="?p=projektit">asdf</a></li>    </ul>    <div class="burger">        <div class="line1"></div>        <div class="line2"></div>        <div class="line3"></div>    </div></nav><?php​if (isset($_GET['p'])){  $pageId = preg_replace('/[^A-Za-z0-9-_]/', '', $_GET['p']);  if (file_exists('pages/' . $pageId . '.html')) {    readfile('pages/' . $pageId . '.html');  } else {    readfile('pages/404.html');  }} else {  readfile('pages/etusivu.html');}​include 'navigation.html';​?>​</body></html>

Advertisement

Answer