Create logo as homepage button in nav bar

Question

I'm trying to add a logo instead of 'Home'. Tried a ton of things. Where would I implement this? Within #nav? Or separate? Also trying to get this nav bar to stick, without overlaps on the following sections or staying visible on a smaller screen. Maybe this is a bit much in one question.

My HTML:

        <!-- Header -->
            <div id="header">

                <!-- Logo -->
                    <h1 hidden><a href="index.html" id="logo">Helios <em>Solutions</em></a></h1>


                    <nav id="nav">
                        <ul>
                            <li class="current" id="titlehome"><a href="index.html">Helios Solutions</a></li>
                            <li>
                                <a href="left-sidebar.html">Ons zorgaanbod</a>
                                <ul>
                                    <li><a href="#">Dienst 1</a></li>
                                    <li><a href="#">Dienst 2</a></li>
                                    <li><a href="#">Dienst 3</a></li>
                                    <li><a href="#">Cliënten aan het woord</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="left-sidebar.html">Over Helios Solutions</a>
                                <ul>
                                    <li><a href="#">Onze missie</a></li>
                                    <li><a href="#">Onze werkwijze</a></li>
                                    <li><a href="#">Ons team</a></li>
                                    <li><a href="#">Vacatures</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="left-sidebar.html">Voor cliënten</a>
                                <ul>
                                    <li><a href="#">Uw privacy</a></li>
                                    <li><a href="#">Uw klachten</a></li>
                                    <li><a href="#">Onze cliëntenraad</a></li>
                                </ul>
                            </li>
                            <li><a href="#contact" class="smoothScroll">Contact</a></li>
                            <li><a href="tel:+31505731019">050 573 10 19</a></li>
                        </ul>
                    </nav>
        </div>
    </div>

My CSS:

/* Header */

#header {
    padding: 0 0 0 0;
    background-color: #1176C0;
    background-image: url("images/bg02.png"), url("images/bg02.png"), url("images/bg01.png");
    background-position: top left,                  top left,                   top left;
    background-size:     0% 0,                      0% 0,                       auto;
    background-repeat: no-repeat,                   no-repeat,                  repeat;
}

    #header h1 {
        padding: 0 0 0 0;
        margin: 0;
    }

        #header h1 a {
            font-size: 1.5em;
            letter-spacing: -0.025em;
            border: 0;
        }

/* Nav */

    #nav {
    cursor: default;
    background-color: #1176C0;
    background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), url("images/bg01.png");
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), url("images/bg01.png");
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), url("images/bg01.png");
    background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.3)), url("images/bg01.png");
    padding: 0;
}

    #nav:after {
        content: '';
        display: block;
        width: 100%;
        height: 0.6em;
        background-color: #fff;
    }

    #nav > ul {
        margin: 0;
        font-weight: bold;
    }

        #nav > ul > li {
            position: relative;
            display: inline-block;
            margin-left: 1em;
        }

            #nav > ul > li a {
                color: #fff;
                text-decoration: none;
                border: 0;
                display: block;
                padding: 1.5em 0.5em 1.35em 0.5em;
            }

            #nav > ul > li:first-child {
                margin-left: 0;
            }

            #nav > ul > li:hover a {
                color: #F09200;
                font-weight: 600;
            }

            #nav > ul > li.current {
            }


                #nav > ul > li.current:before {
                    -moz-transform: rotateZ(45deg);
                    -webkit-transform: rotateZ(45deg);
                    -ms-transform: rotateZ(45deg);
                    transform: rotateZ(45deg);
                    width: 0.6em;
                    height: 0.6em;
                    content: '';
                    display: block;
                    position: absolute;
                    bottom: -0.4em;
                    left: 50%;
                    margin-left: -0.375em;
                    background-color: #fff;
                }

                #nav > ul > li.current a {
                    color: #fff;
                }

            #nav > ul > li.active a {
                color: #fff;
            }

            #nav > ul > li.active.current:before {
                opacity: 0;
            }

            #nav > ul > li > ul {
                display: none;
            }

My JS:

(function($) {

skel.breakpoints({
    wide: '(max-width: 1680px)',
    normal: '(max-width: 1280px)',
    narrow: '(max-width: 980px)',
    narrower: '(max-width: 840px)',
    mobile: '(max-width: 736px)',
    mobilep: '(max-width: 480px)'
});

$(function() {

    var $window = $(window),
        $body = $('body');

    // Disable animations/transitions until the page has loaded.
        $body.addClass('is-loading');

        $window.on('load', function() {
            $body.removeClass('is-loading');
        });

    // Fix: Placeholder polyfill.
        $('form').placeholder();

    // Prioritize "important" elements on narrower.
        skel.on('+narrower -narrower', function() {
            $.prioritize(
                '.important\\28 narrower\\29',
                skel.breakpoint('narrower').active
            );
        });

    // Dropdowns.
        $('#nav > ul').dropotron({
            offsetY: -15,
            hoverDelay: 0,
            alignment: 'center'
        });

    // Off-Canvas Navigation.

        // Title Bar.
            $(
                '<div id="titleBar">' +
                    '<a href="#navPanel" class="toggle"></a>' +
                    '<span class="title">' + $('#logo').html() + '</span>' +
                '</div>'
            )
                .appendTo($body);

        // Navigation Panel.
            $(
                '<div id="navPanel">' +
                    '<nav>' +
                        $('#nav').navList() +
                    '</nav>' +
                '</div>'
            )
                .appendTo($body)
                .panel({
                    delay: 500,
                    hideOnClick: true,
                    hideOnSwipe: true,
                    resetScroll: true,
                    resetForms: true,
                    side: 'left',
                    target: $body,
                    visibleClass: 'navPanel-visible'
                });

        // Fix: Remove navPanel transitions on WP<10 (poor/buggy performance).
            if (skel.vars.os == 'wp' && skel.vars.osVersion < 10)
                $('#titleBar, #navPanel, #page-wrapper')
                    .css('transition', 'none');

});

})(jQuery);

Answer 1

paste the next line directly after your nav starting tag, or directly before the nav end tag, depending if you want the logo left or right on your navbar.

<a class="navbar-brand" href="path-to-root"><img src="path-to-logo"></a>

that should give you your logo on your navbar. Hope this helps.

(navbar-brand is a bootstrap class, but if you dont use bootstrap you can use the class to style the logo in your own css)