Stacking menu items vertically not working

Question

I am trying to create a dot navigation (similar to what is seen on the full page sliders here on w3 schools) however I cannot seem to stack the dots vertically and centered to the right of the page

I have tried a lot of the answers available here (linked below) but none seem to be working.

(Using margin:auto to vertically-align a div, Vertically center ul in div, How do i center li element in ul vertically? css, How to force a list to be vertical using html css)

Display block in the li tags worked but then the elements were displaying as their own section and not on top of the background images as the user scrolls. Perhaps something is conflicting that I can't quite seem to pinpoint.

Thanks

HTML and CSS

.container {
   width: 100%;
   height: 100%;
   overflow-y: scroll;
}

nav {
   position: absolute;
   top: 6px;
   right: 12px;

}

nav ul {
    /* position: relative; */
   display: flex;
   align-items: center;
   margin: 0;
    padding: 0;
    list-style: none;
    cursor: default;


}

nav li {
    position: relative;
    display: inline;
    margin: 0 16px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

nav li a {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: none;
   position: relative;
    border-radius: 50%;
    background-color: rgba(155,155,155,0.3);
    text-indent: -999em;
    cursor: pointer;
    position: absolute;
}

<div class="container">
<nav>
    <ul>
       <li><a href="#home">Home</a></li>
       <li><a href="#portfolio">Portfolio</a></li>
       <li><a href="#about us">About us</a></li>
       <li><a href="#contact">Contact</a></li>
     </ul>
</nav>

<section>
</section>

</div>

The HTML you have posted is invalid. Make sure to close all quotes and tags correctly! :) — Eliott Robson, Jan 29 '21 at 11:21
You have also to change the background-color of the dots that now is white — Nick Pantelidis, Jan 29 '21 at 11:26
rgba(255,255,255,0.3) is the white color with opacity 0.3. Please change it with a visible color or change the background color of the container in order for the dots to be visible — Nick Pantelidis, Jan 29 '21 at 11:34

score 0 · Answer 1 · answered Jan 29 '21 at 11:22

You have errors in your html code <div class="container> must be <div class="container"> and this <li><a href="#about us" class="space-item">About us/a></li> must be <li><a href="#about us" class="space-item">About us</a></li>

Check this snippet

.container {
   width: 100%;
   height: 100%;
   overflow-y: scroll;
}

nav {
   position: absolute;
   top: 6px;
   right: 12px;

}

nav ul {
    /* position: relative; */
   display: flex;
   align-items: center;
   margin: 0;
    padding: 0;
    list-style: none;
    cursor: default;


}

nav li {
    position: relative;
    display: inline;
    margin: 0 16px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

nav li a {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: none;
   position: relative;
    border-radius: 50%;
    background-color: lightgrey;
    text-indent: -999em;
    cursor: pointer;
    position: absolute;
}

<div class="container">
<nav>
    <ul>
       <li><a href="#home" class="space-item">Home</a></li>
       <li><a href="#portfolio" class="space-item">Portfolio</a></li>
       <li><a href="#about us" class="space-item">About us</a></li>
       <li><a href="#contact" class="space-item">Contact</a></li>
     </ul>
</nav>

<section>
</section>

</div>

Stacking menu items vertically not working

1 Answers1