Начальная загрузка:
После прокрутки:
Я пытаюсь установить фиксированную навигацию в верхней части окна просмотра. Поэтому, когда вы прокручиваете страницу вниз, навигация всегда видна. Моя проблема в том, что мой бренд navbar установлен слева от nav, а мои ссылки на остальную часть моей страницы - справа. Когда я добавляю фиксированную позицию к бренду navbar, он работает нормально (бренд остается видимым, когда я прокручиваю страницу вниз), однако независимо от того, что я пробовал, когда добавляю фиксированную позицию к любым другим классам, идентификаторам или элементам, включающим ссылки установленный справа, они заканчивают тем, что фиксировали налево и накладывали марку или сидели непосредственно под маркой. Я не могу понять, почему это происходит.
Я безуспешно пытался добавить фиксированную позицию в различные классы в панели навигации. Я также попытался переместить элементы вправо с помощью float: right! В большинстве статей, которые я нашел, предлагается добавить положение: фиксировано в классе .nav, но когда я это делаю, элементы сдвигаются влево. Я включил html для моей навигации, а также CSS для навигации, background-video и модальные ссылки, на которые я ссылаюсь, в nav на случай, если по какой-то причине это может быть причиной проблемы. Спасибо за любую помощь! Это высоко ценится.
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-placement="top" title="Resume" data-target="#modalResume"><span>Resume</span></a> -->
<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;
}
Если возможно, я ожидаю, что бренд ("allicndev") будет слева вверху, а ссылки ("about", "портфель", "резюме", "навыки" и "контакт") будут справа top и вся навигация, чтобы оставаться видимыми при прокрутке страницы или переходе по ссылкам на разделы.