Footer not displaying as expected on larger screen sizes - html

I'm struggling with some undesired behaviour of a footer in twitter bootstrap. On small screen sizes (xs + sm) the footer is displayed as desired but on larger screen sizes all of the styling of the footer disappears.
I've been looking at it for a long time now but can't figure what causes this.
I'm using Bootstrap 4.0.0a6. There's hardly any styling going on, we're using Bootstrap's default styling for practically everything upto now.
I've created a JSFiddle to demonstrate the wrong behaviour. It's specifically concerning the dimensions and background color that are set between lines 126-133 in the fiddle.
HTML
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="/">MyBoilie</a>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="/introductie">Introductie</a>
<div class="sub-menu hidden-md-up">
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/studiecentrum/praktijk">Studiecentrum</a>
<div class="sub-menu hidden-md-up">
<ul class="nav justify-content-center">
<li class="nav-item w-50">
Praktijk
<div class="dropdown-divider"></div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="/studiecentrum/praktijk/bodem">Bodem</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/studiecentrum/praktijk/bestand">Bestand</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/studiecentrum/praktijk/seizoenen">Seizoenen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/studiecentrum/praktijk/watertype">Watertype</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/studiecentrum/praktijk/waterkwaliteit">Waterkwaliteit</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/studiecentrum/praktijk/verblijfsduur">Verblijfsduur</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/studiecentrum/praktijk/doelstelling">Doelstelling</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/studiecentrum/praktijk/budget">Budget</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/studiecentrum/praktijk/weersinvloeden">Weersinvloeden</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/studiecentrum/praktijk/boilie-care">Boilie-care</a>
</li>
</ul>
</li>
<li class="nav-item w-50">
Theorie
<div class="dropdown-divider"></div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="/studiecentrum/theorie/grondstoffen">Grondstoffen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/studiecentrum/theorie/bouwstoffen">Bouwstoffen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/studiecentrum/theorie/eigenschappen">Eigenschappen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/studiecentrum/theorie/zintuigen">Zintuigen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/studiecentrum/theorie/kwaliteit">Kwaliteit</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/studiecentrum/theorie/attractiviteit">Attractiviteit</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/studiecentrum/theorie/spijsvertering">Spijsvertering</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/studiecentrum/theorie/kunstaas">Kunstaas</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/studiecentrum/theorie/zigs">Zig's</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/werkplaats/basismix">Werkplaats</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="http://myboilie.dev/profiel">Profiel</a></li>
<li class="nav-item">Uitloggen</li>
</ul>
</div>
</div>
</nav>
<div class="row mt-4 mb-4">
<div class="col-xs-12">
</div>
</div>
<section id="header" class="ma-0 pa-0 mb-3">
<div class="header text-center">
<h1>Welkom bij MyBoilie</h1>
</div>
</section>
<section id="page">
<div class="container">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<div class="card-header"><strong><i class="fa fa-lightbulb-o blue"></i> Introductie</strong></div>
<div class="card-block">
<p>Bekijk onze trailer (2 minuten) en lees meer over de werking en mogelijkheden van onze site.</p> Introductie
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<div class="card-header"><strong><i class="fa fa-book green"></i> Studiecentrum</strong></div>
<div class="card-block">
<p>Volg onze zoektocht naar informatie op basis van relevante thema's uit de praktijk en theorie.</p> Studiecentrum
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<div class="card-header"><strong><i class="fa fa-flask red"></i> Werkplaats</strong></div>
<div class="card-block">
<p>Ga aan de slag in onze werkplaats en ontwerp, bestel en archiveer stapsgewijs je eigen boilierecepten.</p> Werkplaats
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="row mt-0 mt-sm-0">
<div class="col-sm-12 col-md-3">
<ul class="nav flex-column">
<li role="presentation" class="nav-item ">
<a class="nav-link" href="http://myboilie.dev/algemene-voorwaarden">Algemene Voorwaarden</a>
</li>
<li role="presentation" class="nav-item ">
<a class="nav-link" href="http://myboilie.dev/myboilie">Wat is MyBoilie</a>
</li>
<li role="presentation" class="nav-item ">
<a class="nav-link" href="http://myboilie.dev/myboilie/tips">Handige tips</a>
</li>
<li role="presentation" class="nav-item ">
<a class="nav-link" href="http://myboilie.dev/introductie/waarom-zelf-ontwerpen">Waarom zelf ontwerpen</a>
</li>
<li role="presentation" class="nav-ite""><a class="nav-link" href="http://facebook.com/myboilie" target="_blank">Facebook</a>
</li>
</ul>
</div>
<div class="col-sm-12 col-md-9">
<div id="feedback-form" class="container">
<form method="POST" action="http://myboilie.dev" accept-charset="UTF-8" data-request="onSendFeedback" data-request-update=""contact\/feedback-sent.htm":"#feedback-form"">
<div class="row mt-5 mt-sm-0">
<div class="col-xs-12 col-sm-4">
<div class="form-group">
<label for="name">Uw naam *</label>
<input type="text" class="form-control" value="" name="name" placeholder="Uw naam" tabindex="1" data-validation="length" data-validation-length="min2" data-validation-error-msg="Je naam is verplicht">
</div>
<div class="form-group">
<label for="body">Uw e-mail *</label>
<input type="text" class="form-control" value="" name="email" placeholder="Uw e-mail" tabindex="2" data-validation="email" data-validation-error-msg="Dit is geen geldig e-mailadres">
</div>
</div>
<div class="col-xs-12 col-sm-8">
<div class="form-group">
<label for="body">Uw bericht *</label>
<textarea class="form-control" value="" name="body" placeholder="Uw bericht" cols="30" rows="5" tabindex="3" data-validation="length" data-validation-length="min4" data-validation-error-msg="Voer een bericht in"></textarea>
</div>
<button type="submit" class="btn btn-primary" tabindex="4">Feedback</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</footer>
CSS
#-ms-viewport {
width: device-width;
}
.sub-menu {
padding: 0 15px;
background-color: #343638;
}
video {
border: 1px solid #ccc;
}
.br-theme-fontawesome-stars-o .br-widget a:after {
color: #d9edf7;
}
.br-theme-fontawesome-stars-o .br-widget a.br-selected:after {
color: #bcdff1;
}
.br-theme-fontawesome-stars-o .br-widget a.br-active:after {
color: #31708f;
}
#order-ingredients {
padding: 0;
}
#order-ingredients li {
list-style-type: none;
list-style-position: outside;
}
#order-boilie,
#order-address-payment,
#order-addons {
overflow: scroll;
}
#order-addons .tab-pane img,
#order-address-payment .card img {
width: 100%;
}
#configurator {
z-index: 1040;
}
#order-recipe-details-open {
margin-top: -7px;
}
#login-error {
display: none;
}
.active a {
color: #000;
}
.header {
height: 400px;
background: url('/storage/app/media/boilies-home.png') center center no-repeat;
background-size: cover;
}
.header h1 {
padding-top: 150px;
font-size: 4em;
color: #fff;
text-shadow: #222 2px 2px 10px;
opacity: 0.8;
}
.header h2 {
font-size: 2em;
color: #fff;
text-shadow: #222 2px 2px 10px;
opacity: 0.8;
}
.slider {
/*width: 100% !important;*/
}
.modal {
z-index: 1100;
}
.is_stuck {
margin-top: 45px;
}
#posts-list.is_stuck {
padding-top: 45px;
}
.blue {
color: #28429c;
}
.green {
color: #009900;
}
.red {
color: #700600;
}
#media (max-width: 767px) {
.navbar .container {
margin-left: 0;
margin-right: 0;
}
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 750px;
}
.footer {
position: absolute;
bottom: 0;
padding: 50px 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 750px;
background-color: #f5f5f5;
}
/*Small devices (landscape phones, 576px and up)*/
#media (min-width: 576px) {
body {
margin-bottom: 500px;
}
.footer {
height: 500px;
}
}
/*Medium devices (tablets, 768px and up)*/
#media (min-width: 768px) {
body {
margin-bottom: 500px;
}
.footer {
height: 500px;
background-color: #f5f5f5;
}
}
/*Large devices (desktops, 992px and up)*/
#media (min-width: 992px) {
body {
margin-bottom: 500px;
}
.footer {
height: 500px;
}
}
/*Extra large devices (large desktops, 1200px and up)*/
#media (min-width: 1200px) {
body {
margin-bottom: 500px;
}
.footer {
height: 500px;
}
}

I've managed to resolve this. There was a closing tag missing on a media query in a another CSS file. I'm using a combinator for all the CCS and in the result the media query for md size was in a media query in the other file.

remove the mt-0 mt-sm-0 and flex columns have an issue adapting to larger screen size when styled with css mediascreen try this for footer apates to any size of screen and positions them properly and shows properly this shoulw adapt to any size of screen
<div class="tabbable full-width-tabs">
<ul class="nav nav-tabs">
<li class="take-all-space-you-can "></li>
<li class="take-all-space-you-can "></li>
<li class="take-all-space-you-can "></li>
</ul>
</div>
<style>.full-width-tabs > ul.nav.nav-tabs {
display: table;
width: 100%;
table-layout: fixed;
}
.full-width-tabs > ul.nav.nav-tabs > li {
float: none; display: table-cell;
}
.full-width-tabs > ul.nav.nav-tabs > li > a {
text-align: center;
}
.take-all-space-you-can{
width:100%; background-color:#fff!important;
}
</style>

Related

container-fluid doesn't take full width except for navbar

.container-fluid-1 {
padding: 0;
}
.navbar {
padding: 0 5%;
}
.navbar-section{
background-color: #fff;
width: 100%;
padding: 0 1%;
margin: 0;
position: fixed;
z-index: 1;
}
.nav-item {
padding: 0 20px;
}
.nav-link {
color: black;
}
.nav-link:focus {
color: black;
}
.nav-link:hover {
color: #feb633;
}
.navbar-brand {
font-size: 3.5rem;
font-family: 'Hind Siliguri', sans-serif;
color: #feb633;
}
.navbar-brand:hover {
color: grey;
}
/* title */
.introduction {
background-color: #fbfbfb;
padding-top: 10%;
}
.subtitle {
font-size: 1.5rem;
color: grey;
}
.twotitle {
padding-top: 220px;
padding-left: 200px;
}
.btn {
background: #feb633;
color: #fff;
}
.btn:hover {
border: 2px solid #feb633;
transition: 0.2s ease-in all;
color: #feb633;
background-color: #fbfbfb;
}
I put a container-fluid class in my whole body but it doesn't provides a full width container except for navbar.
Everything looks fine on PC (1440px) but on mobile the whole body (except for navbar)moving to left side.
Here is the screenshot on laptop that's what I want.
Here is the screenshot on iPhoneX The grey background is on the left now.
Could someone please help me with it? Thanks in advance.
*container-fluid-1 is a class for CSS.
<body>
<!--navbar -->
<div class="container-fluid-1 container-fluid">
<section id="title">
<div class="navbar-section">
<nav class="navbar navbar-expand-lg">
<a class=" navbar-brand" href="#">M</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i class="fas fa-bars"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#title">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#about-me">About me</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Service</a></li>
<li class="nav-item"><a class="nav-link" href="#mini-shop">Mini Shop</a></li>
<li class="nav-item"> <a class="nav-link" href="#contact-me">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="#">Log in</a></li>
</ul>
</div>
</nav>
</div>
<!--title -->
<div class="introduction row">
<div class="twotitle col-lg-6">
<h1>I'm Marcus</h1>
<p class="subtitle">Web Design& Front End Developer</p>
<br>
Hire me
</div>
<div class="profile col-lg-6">
<img src="images/fa0b3895-7e4e-4ac9-a977-1a99fdefc4dd.png" alt="profile">
</div>
</div>
</section>
</div>
</body>
<body>
<!--navbar -->
<div class="container-fluid-1 container-fluid">
<section id="title">
<div class="navbar-section">
<nav class="navbar navbar-expand-lg">
<a class=" navbar-brand" href="#">M</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i class="fas fa-bars"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#title">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#about-me">About me</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Service</a></li>
<li class="nav-item"><a class="nav-link" href="#mini-shop">Mini Shop</a></li>
<li class="nav-item"> <a class="nav-link" href="#contact-me">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="#">Log in</a></li>
</ul>
</div>
</nav>
</div>
<!--title -->
<div class="introduction row">
<!--use mobile responsive classes here for full width use col-xs-12 col-sm-12 col-md-12 -->
<div class="twotitle col-lg-6 col-md-12 col-sm-12 col-xs-12">
<h1>I'm Marcus</h1>
<p class="subtitle">Web Design& Front End Developer</p>
<br>
Hire me
</div>
<div class="profile col-lg-6 col-md-12 col-sm-12 col-xs-12">
<img src="images/fa0b3895-7e4e-4ac9-a977-1a99fdefc4dd.png" alt="profile">
</div>
</div>
</section>
</div>
</body>
<!-- begin snippet: js hide: false console: true babel: false -->

On the html page there are large of white spaces and I am not able to cut them

*,
::before,
::after {
box-sizing: border-box;
}
/* remove default 8px margin from body */
body {
margin: 0;
overflow-x: hidden;
}
/* No need for this
#main_page {
padding-top: 80px;
}
*/
.cuisines_about {
display: flex;
flex-direction: column;
height: 450px;
background-color: green;
}
.cuisines_description {
flex: 0 0 auto;
width: 100%;
justify-content: flex-start;
}
.cuisines_description h2 {
text-align: center;
padding-top: 300px;
font-size: 80px;
}
.cuisines_images {
/* flex: 1 1 auto; */
width: 100%;
/*height: 500px;*/
display: flex;
/* flex-wrap: wrap; */
}
.cusines_images img {
object-fit: cover;
width: 100%;
height: 100%
}
.cuisines_16pic {
flex: 1 1 auto;
}
.cuisines_9pic {
flex: 2 2 auto;
}
#homepage nav{
background-color:lightskyblue;
}
#footer {
position: fixed;
padding: 10px 10px 0 10px;
bottom: 0;
width: 100%;
}
.copyright_info{
text-align:center;
}
.tabs_selector ul li{
list-style:none;
}
.form-inline{
padding-left:50px;
padding-right:20px;
}
<div class="container">
<div id="homepage">
<nav class="navbar fixed-top navbar-expand-lg">
<a class="navbar-brand"><a class="nav-link" href="#homepage">
<img src="ufood.png" alt="ufood logo" width="50" height="50">
</a>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="foodDelivery_about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#Mission">Mission</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#foodMenu">Menu</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#Chinese">Chinese</a>
<a class="dropdown-item" href="#Japanese">Japanese</a>
<a class="dropdown-item" href="#Italian">Italian</a>
<a class="dropdown-item" href="#German">German</a>
<a class="dropdown-item" href="#French">French</a>
<a class="dropdown-item" href="#Spanish">Spanish</a>
<a class="dropdown-item" href="#American">American</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#shopBranches">Branches</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Hong Kong Island</a>
<a class="dropdown-item" href="#">Kowloon</a>
<a class="dropdown-item" href="#">New Territories</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="#Contact">Contact</a></li>
</ul>
<form class="form-inline">
<input type="text" class="form-control mr-2" placeholder="Browse by cuisines">
<button class="btn btn-info" type="submit">Search</button>
</form>
</div>
</nav>
<div id="main_page">
<div class="cuisines_about">
<div class="cuisines_description">
<h2>Enjoy different cuisines <br> around the world!</h2>
</div>
<div class="cuisines_images">
<img class="cuisines_16pic" src="different_cuisines.png" alt="image of food" width="700" height="450">
<img class="cuisines_9pic" src="different_cuisines02.png" width="550" height="450" alt="Image of food">
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<p class="copyright_info">Copyright © 2021 Sham Tseng Restaurant. All Rights Reserved.</p>
</div>
Although I tried editing a few times with the margin the green box still cannot be put on the leftmost of the page without white spaces. After I edited my code the contents are still put on the middle rather than on the leftmost. The result that I want is to align the green box and two images on the same row and the images to be put on the right of the green box without any spaces.
1:

My Navbar links are showing up under my navbar

I am trying to get the Navbar links inside my navbar and they are showing up under it. I am not sure what happened but I am using a flexbox because it is a requirement for the project I am working on but it moved my nav links and I am not sure why
.mynav {
border: 5px solid black;
position: absolute;
margin-top: 550px;
background-color: #fbc616;
width: 100%;
height: 40px;
}
.navbar ul {
display: flex;
list-style: none;
font-size: 150%;
font-family: RockSalt-Regular;
}
.navbar li {
flex: 3;
}
<div class="mynav">
<nav class="navbar navbar-expand navbar-dark bg-primary">
<div class="navbar-collapse collapse">
<ul class="navbar-nav pt-1">
<li class="nav-item active">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
The magic of flex is that it scales to the size it needs, so usually hardcoding height and width are counter purpose to the usage of flex. removing the hardcoded height fixed the issue for me
.mynav {
border: 5px solid black;
position: absolute;
margin-top: 550px;
background-color: #fbc616;
width: 100%;
}
.navbar ul {
display: flex;
list-style: none;
font-size: 150%;
font-family: RockSalt-Regular;
}
.navbar li {
flex: 3;
}
<div class="mynav">
<nav class="navbar navbar-expand navbar-dark bg-primary">
<div class="navbar-collapse collapse">
<ul class="navbar-nav pt-1">
<li class="nav-item active">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
Your navbar ist simply cut off. I removed the height and now its showing correctly.
.mynav {
border: 5px solid black;
position: absolute;
margin-top: 550px;
background-color: #fbc616;
width: 100%;
}
.navbar ul {
display: flex;
list-style: none;
font-size: 150%;
font-family: RockSalt-Regular;
}
.navbar li {
flex: 3;
}
<div class="mynav">
<nav class="navbar navbar-expand navbar-dark bg-primary">
<div class="navbar-collapse collapse">
<ul class="navbar-nav pt-1">
<li class="nav-item active">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>

Bootstrap nav-bar not displaying content outside its width

#font-face {
font-family: Pipboy;
src: url('../monofonto.ttf');
}
.navbar {
border-bottom: 2px solid;
margin: 0px 10px;
color: #14fe17;
}
.nav-item.active {
position: relative;
}
.nav-item.active::before {
content: "";
position: absolute;
background: #f00;
width: 100%;
height: 20px;
}
.navbar::before,
.navbar::after {
height: 6px;
width: 3px;
content: "";
position: absolute;
display: block;
z-index: 5000;
bottom: -6px;
background: #14fe17;
}
.navbar::before {
left: 0px
}
.navbar::after {
right: 0px;
}
.navbar-nav {
width: 100%;
}
body {
font-family: Pipboy, sans-serif;
background-color: #151811;
font-size: 1.5rem;
}
body::after {
width: 100%;
height: 100%;
content: "";
position: absolute;
top: 0px;
left: 0px;
background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 2px);
z-index: 100000000;
pointer-events: none;
}
h2 {
margin-top: 20px;
margin-left: 20px;
color: #14fe17;
}
.center-image img {
margin: auto;
margin-top: 100px;
display: block;
position: relative;
max-height: 600px;
max-width: 300px;
filter: grayscale(1) sepia(100%) hue-rotate(55deg) saturate(7) brightness(1) contrast(2);
}
ul.navbar-nav>li.nav-item>a.nav-link,
ul.nav>li.nav-item>a.nav-link,
div.tab-content {
color: #14fe17 !important;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<title>
Hercules Strydom
</title>
</head>
<body>
<h2>
Hercules Strydom
</h2>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav nav-fill">
<li class="nav-item active ">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Timeline</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Travel</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-12">
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
STATUS
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">
SPECIAL
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">
PERKS
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
status
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
special
</div>
<div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">
perks
</div>
</div>
</div>
</div>
</div>
<div class="center-image">
<img src="vb.png">
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</html>
#font-face{
font-family: Pipboy;
src: url('../monofonto.ttf');
}
.navbar{
border-bottom: 2px solid;
margin: 0px 10px;
color: #14fe17;
}
.nav-item.active{
position: relative;
}
.nav-item.active::before{
content: "";
position: absolute;
background: #f00;
width: 100%;
height: 20px;
}
.navbar::before, .navbar::after{
height:6px;
width:3px;
content: "";
position: absolute;
display: block;
z-index: 5000;
bottom:-6px;
background: #14fe17;
}
.navbar::before{
left:0px
}
.navbar::after{
right:0px;
}
.navbar-nav{
width: 100%;
}
body{
font-family: Pipboy, sans-serif;
background-color: #151811;
font-size: 1.5rem ;
}
body::after{
width: 100%;
height:100%;
content: "";
position: absolute;
top:0px;
left: 0px;
background: repeating-linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 1px, transparent 1px, transparent 2px );
z-index: 100000000;
pointer-events:none;
}
h2{
margin-top: 20px;
margin-left: 20px;
color: #14fe17;
}
.center-image img{
margin: auto;
margin-top: 100px;
display: block;
position: relative;
max-height: 600px;
max-width: 300px;
filter: grayscale(1) sepia(100%) hue-rotate(55deg) saturate(7) brightness(1) contrast(2);
}
ul.navbar-nav > li.nav-item > a.nav-link ,
ul.nav > li.nav-item > a.nav-link, div.tab-content{
color: #14fe17 !important;
}
<!DOCTYPE html>
<html>
<head>
<link rel= "stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<title>
Hercules Strydom
</title>
</head>
<body>
<h2>
Hercules Strydom
</h2>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav nav-fill">
<li class="nav-item active ">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Timeline</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Travel</a>
</li>
</ul>
</div>
</nav>
<div class= "container">
<div class="row">
<div class="col-12">
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
STATUS
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">
SPECIAL
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">
PERKS
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
status
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
special
</div>
<div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">
perks
</div>
</div>
</div>
</div>
</div>
<div class= "center-image">
<img src="vb.png">
</div>
</body>
<script src= "https://code.jquery.com/jquery-3.3.1.js"></script>
<script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src= "js/main.js"></script>
</html>
I am trying to design my personal web-page with a Fallout 4 pipboy style. I am running into an error whereby I want to edit the lines on the ::before and ::after under the navbar to look more like a pipboy. The red you see on the picture is me trying to debug why the nav-item activebegins midway through the first item (Home) and extends all the way to the end of the page. Shouldn't it be just the length of the active item? I have posted my code regarding this issue below.
Any advice is appreciated!
.nav-item.active::before{
content: "";
position: absolute;
background: #f00;
width: 100%;
height: 20px;
}
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav nav-fill">
<li class="nav-item active ">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Timeline</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Travel</a>
</li>
</ul>
</div>
</nav>

Unordered-list inline vertical alignment and responsive spacing

I am trying to create a responsive navbar for mobile, but I am having trouble getting the link containers to resize properly. I also cannot seem to get the text to center itself vertically. I have tried using auto padding and margins in both cases, but they don't seem to be doing anything. I am using Bootstrap.
My questions are:
How do I center the text vertically within its container?
How do I get the width of each link's container to be the width of the text
How do I then get the spacing between each container to be the same, so that all together they fill the width of the screen?
HTML
<div class="container" id="nav-container-mobile">
<ul class="list-unstyled list-inline text-center d-flex" id="nav-list-mobile">
<li class="list-inline-item text-center nav-link-horizontal" id="nav-profile-link-mobile">
<a class="nav-link" href="#Profile">
<div class="nav-link-container-mobile">Profile</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-experience-link-mobile">
<a class="nav-link" href="#Experience">
<div class="nav-link-container-mobile">Experience</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-skills-link-mobile">
<a class="nav-link" href="#Skills">
<div class="nav-link-container-mobile">Skills</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-project-link-mobile">
<a class="nav-link" href="#project">
<div class="nav-link-container-mobile">Projects</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-contact-link-mobile">
<a class="nav-link" href="#Contact">
<div class="nav-link-container-mobile">Contact</div>
</a>
</li>
</ul>
</div>
CSS
#nav-container-mobile {
position: absolute;
width: 100%;
height: 70px;
padding: 0;
background: #292929;
z-index: 5;
}
#nav-list-mobile {
width: 100%;
height: 100%;
margin: 0;
vertical-align: middle;
}
.nav-link-horizontal {
height: 100%;
width: 15vw;
min-width: 50px;
}
.nav-link-container-mobile {
padding: auto;
height: 100%;
overflow-wrap: break-word;
}
.nav-link {
color: #aeaeae;
}
Any help or advice is appreciated.
JSFiddle
It would be simpler to use the Bootstrap 4 Nav Fill or Justify, and then just change the background color and other styles as needed.
https://www.codeply.com/go/WsWHHIfRlh
<div class="navbar navbar-expand navbar-dark" id="nav-container-mobile">
<div class="container-fluid">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
#nav-container-mobile {
width: 100%;
height: 70px;
padding: 0;
background: #292929;
z-index: 5;
}
.nav-link {
color: #aeaeae;
}