Example adding a navigation sidebar to an ArcGIS Hub page - http://geohub.brampton.ca/pages/globally-aware-locally-active-economy

nav_sidebar.html

<style>
    body {
        font-size: 16px
    }

    a:link {
        color: white
    }

    a:hover {
        color: white
    }

    a:active {
        color: white
    }

    a:visited {
        color: white
    }

    h6 {
        font-size: 20px
    }

    #title-bg {
        background-color: rgba(49, 170, 40, 0.7);
        padding: 20px;
    }

    #title {
        margin: 0 auto;
    }

    #head-txt-bg {
        background-color: rgba(0, 0, 0, 0.5);
        padding: 20px;
    }

    .txt-bg {
        background-color: rgba(49, 170, 40, 0.7);
        padding: 20px;
    }

    #home {
        background-color: rgba(212, 26, 136, 0.5);
        width: 100%;
        height: 45px;
        padding: 5px;
        text-align: center;
    }

    #home:hover {
        background-color: rgba(212, 26, 136, 0.8)
    }

    #politics {
        background-color: rgba(211, 77, 77, 0.5);
        width: 100%;
        height: 45px;
        padding: 5px;
        text-align: center;
    }

    #politics:hover {
        background-color: rgba(211, 77, 77, 0.8)
    }

    #economy {
        background-color: rgba(49, 170, 40, 0.5);
        width: 100%;
        height: 45px;
        padding: 5px;
        text-align: center;
    }

    #economy:hover {
        background-color: rgba(49, 170, 40, 0.8)
    }

    #social {
        background-color: rgba(91, 80, 202, 0.5);
        width: 100%;
        height: 45px;
        padding: 5px;
        text-align: center;
    }

    #social:hover {
        background-color: rgba(91, 80, 202, 0.8)
    }

    #technology {
        background-color: rgba(83, 151, 207, 0.5);
        width: 100%;
        height: 45px;
        padding: 5px;
        text-align: center;
    }

    #technology:hover {
        background-color: rgba(83, 151, 207, 0.8)
    }

    .icon-a:link {
        color: white
    }

    .icon-a:hover {
        text-decoration: none;
        color: white
    }

    .icon-a:active {
        color: white
    }

    .icon-a:visited {
        color: white
    }

    .img-icons {
        width: 30px;
    }

    .labour-shortage {
        background-image: url("http://mapsuat.brampton.ca/gov-advocacy/canada-hiring-difficulty.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        height: 800px;
    }

    .panel-default {
        border: none;
    }

    .panel-heading {
        border: none;
    }

    .panel,
    .panel-footer {
        background-color: rgba(255, 255, 255, 0.7) !important;
    }

    .chart-card .chart-card-header {
        background-color: rgb(49, 170, 40) !important;
    }

    .panel-default>.panel-heading {
        background-color: transparent;
    }

    .panel-title {
        color: white;
    }

    .center-div {
        text-align: center;
    }

    .center {
        display: block;
        margin: 0 auto;
    }

    li {
        padding-bottom: 10px;
    }

    #credits {
        font-size: 11px;
        list-style: none;
        padding-left: 0
    }

    .credits-a:link {
        color: #4c4c4c
    }

    .credits-a:hover {
        color: #4c4c4c
    }

    .credits-a:active {
        color: #4c4c4c
    }

    .credits-a:visited {
        color: #4c4c4c
    }

    .float-nav {
        background-color: rgba(0, 0, 0, 0.6);
        width: 30px;
        height: 30px;
        border-radius: 50%;
        text-align: center;
        line-height: 30px;
        margin: 5px;
    }

    .float-nav a:link {
        color: white;
        text-decoration: none;
    }

    .float-nav a:hover {
        color: white;
        text-decoration: none;
    }

    .float-nav a:active {
        color: white;
        text-decoration: none;
    }

    .float-nav a:visited {
        color: white;
    }

    h1::before {
        display: block;
        content: " ";
        margin-top: -80px;
        height: 80px;
        visibility: hidden;
        pointer-events: none;
    }

    h2::before {
        display: block;
        content: " ";
        margin-top: -80px;
        height: 80px;
        visibility: hidden;
        pointer-events: none;
    }
</style>
<div style="position:fixed; bottom:15px; right:15px; z-index:1">
    <div class="float-nav"><a href="#home-bookmark"><img src="http://mapsuat.brampton.ca/gov-advocacy/home-icon.png"
                width="20" style="vertical-align: text-top" /></a></div>
    <div class="float-nav"><a href="#one">1</a></div>
    <div class="float-nav"><a href="#two">2</a></div>
    <div class="float-nav"><a href="#three">3</a></div>
    <div class="float-nav"><a href="#four">4</a></div>
    <div class="float-nav"><a href="#five">5</a></div>
    <div class="float-nav"><a href="#six">6</a></div>
    <div class="float-nav"><a href="#seven">7</a></div>
    <div class="float-nav"><a href="#eight">8</a></div>
    <div class="float-nav"><a href="#nine">9</a></div>
    <div class="float-nav"><a href="#ten">10</a></div>
    <div class="float-nav"><a href="#eleven">11</a></div>
</div>