Custom dots on slider, that will fill whole background except navbar

Question

I have this dot, filled or not (depending on putting inner-circle id), that i want to use on Slick Slider.

#outer-circle {
    height: 100px;
    width: 100px;
    position: relative;

    border-radius: 50%;
    padding: 100px;

    background: #fff;
    border: 15px solid red;
    color: red;
    text-align: center;

    font: 32px Arial, sans-serif;
}

#inner-circle {
    position: absolute;
   background: red;
   border-radius: 50%;
   height: 250px;
   width: 250px;

   top: 50%;
   left: 50%;
   margin: -125px 0px 0px -125px;
}

Here is JSFiddle: https://jsfiddle.net/thirtydot/dQR9T/2637/

I want to put it in the slick slider classes + make it inside slider (not above/below it)

https://github.com/kenwheeler/slick/blob/master/slick/slick-theme.css

Anyone have idea how to do that to look like on the picture?

In slider that should be text (f.e. "Profesjonalizm") and that red svg thing on the left. Of course navbar isn't part of that slider.

Any help would be much appreciated!

Answer 1

set the navbar over the slider with position absolute, and float:left on the circles.