I'm facing an issue with my navbar placement. I want it to be at the bottom of the viewport with the links aligned to the right side. Although I have successfully placed the navbar at the bottom, I'm unable to align the links to the right no matter what I try.
Below is my HTML code:
<body>
<nav class="nav" id="myMenu">
<a data-menuanchor="sec1" class="nav-link" href="#sec1">Section 1</a>
<a data-menuanchor="sec2" class="nav-link" href="#sec2">Section 2</a>
</nav>
<div id="fullpage">
<div class="section" id="secc1" >Section 1</div>
<div class="section" id="secc2" >
<div class="slide">Slide 1</div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
<div class="slide"> Slide 4 </div>
</div>
</div>
</body>
This is my JQuery code:
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
menu:'#myMenu',
anchors: ['sec1', 'sec2'],
sectionsColor: ['#fc6c7c', '#69a366'],
scrollingSpeed: 1000,
fixedElements: "#myMenu",
});
});
</script>
Lastly, here is the CSS code:
<style>
#myMenu{
width: 100%;
bottom:0px;
position:absolute;
}
.section{
text-align: center;
}
.nav-link{
color:white;
position: relative;
right: 0px;
}
.nav-link:hover{
color:red;
}
</style>
As a side question- can someone explain what the menu:
function and
data-menuanchor=
attribute do? It seems that neither of them makes any difference in this case.
Thank you!