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>

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>

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);
}

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';

?>

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);
}

<!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