Having an issue with my dot navigation and anchor links placement. I want the anchors to be vertically centered in the middle of the section, regardless of window size. Here's what I'm aiming for :
For larger windows :
https://i.sstatic.net/pK4Ex.png
And for smaller windows :
https://i.sstatic.net/EjnZU.png Additionally, how can I implement a highlighted link on the dot navigation? Similar to this example: where the dot turns green when on that specific section.
Here's the HTML code :
<div class="nav">
<a href="#section01">01</a>
<a href="#section02">02</a>
<a href="#section03">03</a>
<a href="#section04">04</a>
</div>
<div class="content">
<div class="section" id="section01">Section 01</div>
<div class="section" id="section02">Section 02</div>
<div class="section" id="section03">Section 03</div>
<div class="section" id="section04">Section 04</div>
</div>
And the CSS code :
body {
margin:0;
}
.nav {
position:fixed;
right:0;
}
.nav a {
display:block;
margin:10px;
height:30px;
width:30px;
border-radius:100%;
background:grey;
}
.nav a:hover {
background: orange;
}
.nav a.active{
background: red;
}
.section {
height:200px;
background:pink;
margin:100px;
}