7.2. Bottom NavBar

<style>
    .linenav svg {
        fill: #3d50f4 !important;
    }

    #fixedbottomnav {
        visibility: hidden;
    }

    @media screen and (max-width: 600px) {

        #fixedbottomnav {
            visibility: visible;
            position: fixed !important;
            z-index: 99;
            bottom: 0;
            left: 0;
            padding-top: 0.2rem;
            padding-bottom: 1rem;
        }
    }
</style>

<script>

    window.addEventListener("load", loadingnav, true);


    function loadingnav() {
        var linkfirstnav = document.getElementById("linkfirstnav");
        var linksecondnav = document.getElementById("linksecondnav");
        var linkthirdnav = document.getElementById("linkthirdnav");
        var linkfourthnav = document.getElementById("linkfourthnav");

        linkfirstnav.classList.add("linenav");
    }

    function showfirstnav() {
        linkfirstnav.classList.add("linenav");
        linksecondnav.classList.remove("linenav");
        linkthirdnav.classList.remove("linenav");
        linkfourthnav.classList.remove("linenav");
    }

    function showsecondnav() {
        linkfirstnav.classList.remove("linenav");
        linksecondnav.classList.add("linenav");
        linkthirdnav.classList.remove("linenav");
        linkfourthnav.classList.remove("linenav");
    }

    function showthirdnav() {
        linkfirstnav.classList.remove("linenav");
        linksecondnav.classList.remove("linenav");
        linkthirdnav.classList.add("linenav");
        linkfourthnav.classList.remove("linenav");
    }

    function showfourthnav() {
        linkfirstnav.classList.remove("linenav");
        linksecondnav.classList.remove("linenav");
        linkthirdnav.classList.remove("linenav");
        linkfourthnav.classList.add("linenav");
    }

</script>