I am trying to place this line at the top of the page above the navigation links (as shown in the screenshot).
In the screenshot it is the line above the Home link. I want the height of the ".navbar-links-" to be 100%. Here is the code for this element:
//Main code
body,
html {
margin: 0;
padding: 0;
font-family: Arial;
font-size: 1em;
opacity: 1;
overflow-x: hidden;
min-width: 320px
}
a:active,
a:hover,
a:visited {
background-color: inherit
}
.main-header .main-navbar {
padding: 5vh 10vw;
background-color: #222629
}
.main-header .main-navbar .navbar-links {
list-style: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-family: RobotoRegular;
font-size: 14pt;
font-weight: 400;
margin: 0
}
.main-header .main-navbar .navbar-links li {
display: inline-block;
margin-right: 30px;
border-top: #00bff3 solid 5px;
margin-top: -5px
}
.main-header .main-navbar .navbar-links li a {
text-decoration: none;
color: #9699a6;
position: relative
}
.home-header .navbar-home-link>a {
color: #00bff3!important
}
.home-header .navbar-home-link>a:before {
content: '';
pozition: absolute;
top: 0;
left: 0;
right: 0;
border-top: #00bff3 solid 5px;
margin-top: -5px
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<!-- <base href="/"> -->
<title>Space hosting</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<header class="main-header home-header container-fluid ">
<nav class="main-navbar row align-items-center">
<ul class="navbar-links col align-self-center">
<li class="navbar-home-link"><a href="javascript:void(0)"> Home</a></li>
<li class="navbar-pages-link"><a href="javascript:void(0)"> Pages</a></li>
<li class="navbar-hosting-link"><a href="javascript:void(0)"> Hosting</a></li>
<li class="navbar-domains-link"><a href="javascript:void(0)"> Domains</a></li>
</ul>
</nav>
</header>
</body>
</html>I have removed some elements in this navbar, including 2 elements in "navbar-links" (specifically Blog and Contacts)
Thank you in advance.