Solution 1 :

Using just HTML you could do something like:

<nav>
        <a href="path/to/homepage"><img src="path/to/logo"></a>
        <a href="#">HOME</a>
        <a href="#">MENU</a>
        <a href="#">ORDER ONLINE</a>
        <a href="#">GIFT VOUCHER</a>
        <a href="#">CATERING</a>
        <a href="contactUs.html">CONTACT</a>
</nav>

And include ^ on all your pages. Or if you’re developing with a server, you could write the above in a file called something like ‘navigation.php’ and edit your html files to:

<div class="container">
        <header>

        </header>
        <?php include 'path/to/navigation.php'; ?>
...

php info

Problem :

I want my logo to be clickable and brings user to homepage. I would like to have the logo on all pages and clicking it should bring user back to index.html

My html

<body>
    <div class="container">
        <header>

        </header>
        <nav>
            <a href="#">HOME</a>
            <a href="#">MENU</a>
            <a href="#">ORDER ONLINE</a>
            <a href="#">GIFT VOUCHER</a>
            <a href="#">CATERING</a>
            <a href="contactUs.html">CONTACT</a>
        </nav>

My CSS

 .container {
        margin-left: auto;
        margin-right: auto;
        width: 1024px;
    }

    header {
        background-repeat: no-repeat;
        height: 118px;
        text-align: center;
        background-image: url(/images/logo-adare-restaurant.png);
        background-position: center;
    }

    nav {
        background-color: rgba(0, 0, 0, 0.338);
        text-align: center;
        padding-top: 14px;
        padding-bottom: 14px;
    }

By