When the page first loads:
After scrolling down:
I am attempting to create a fixed navigation bar at the top of the screen, so that it remains visible as the user scrolls down the page. However, I am facing an issue where my navbar brand is positioned to the left and the links to other sections are supposed to be on the right. When I apply position: fixed to the navbar brand, it works correctly, but when I try to apply it to any other classes related to the links, they end up getting fixed to the left side and overlapping with the brand or appearing directly below it. I cannot seem to figure out why this is happening.
I have experimented with applying position: fixed to various classes within the navbar without success. I also tried using float: right!important to force the items to the right. Most of the resources I found suggest adding position: fixed to the .nav class, but doing so causes the items to shift to the left. I have included the HTML for my nav, as well as the CSS for the nav, background-video, and modal linked in the nav, in case there is a specific reason causing this problem. Any assistance would be greatly appreciated!
HTML
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<a href="#home"><h3>allicndev</h3></a>
</div><!-- /navbar-header -->
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#about" class="db-line">About</a></li>
<li class="active"><a href="#portfolio">Portfolio</a></li>
<li class="active">
<a href="#" data-toggle="modal" data-target="#myModal">Resume</a>
</li>
<li class="active"><a href="#skills">Skills</a></li>
<li class="active"><a href="#contact">Contact</a></li>
</ul><!-- /nav navbar-nav navbar-right -->
</div><!-- /container-fluid -->
</nav>
<!-- /navigation -->
<!-- modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h4 id="myModalLabel" class="modal-title">Resume</h4>
</div><!-- /modal-header -->
<div class="modal-content">
<embed id="modal-embed" src="assets/anresume.pdf">
</div><!-- /modal-content -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div><!-- /modal-footer -->
</div><!-- /modal fade -->
<!-- /modal -->
CSS
* {
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
position: relative;
}
body {
margin: 0;
font-family: 'Montserrat', Arial, sans-serif;
font-size: 17px;
}
#myVideo {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
.container-fluid {
padding-right: 30px;
/* position: fixed; */
}
nav {
height: 75px;
display: border-box;
color: white;
font-size: 12px;
text-align: center;
position: fixed;
/*z-index: 10px;*/
}
nav.navbar {
width: 100%;
}
.navbar-header {
position: fixed;
}
.nav.navbar-nav.navbar-right > li {
padding-top: 15px;
margin: 10px;
}
.nav > li > a {
display: inline;
padding-left: 0;
padding-right: 0;
padding-top: 5px;
background-color: transparent;
}
.navbar-nav>.active>a, .navbar-nav>.active>a:focus, .navbar-nav>.active>a:hover {
background-color: transparent;
}
a.db-line {
transition: white .3s linear;
}
a {
color: white;
text-decoration: none;
}
a > h3 {
color: white;
text-decoration: none;
}
a:hover {
color: #f97f04;
}
/* a:visited {
color: #EDCF10;
} */
.modal {
display: none;
height: 100%;
left: 10px;
position: fixed;
top: 0;
width: 100%;
}
.modal.open {
display: block;
}
.modal-header,
.modal-footer {
height: 75px;
}
.modal-content,
.modal-footer {
width: 100%;
}
.modal-footer {
bottom: 0px;
}
#modal-embed {
width: 100%;
height: 75vh;
}
My desired outcome is for the "allicndev" brand to be on the top left and the links ("about", "portfolio", "resume", "skills", and "contact") to be on the top right, while keeping the entire navigation bar visible even as the page is scrolled through or different sections are targeted.