How do I make this navigation bar responsive?

I want to make a navigation bar that has logo in the shape of a hexagon and 3 "buttons" aligned as shown in this screenshot https://prnt.sc/n8nm3q

I managed to align them the way I want on fullscreen (1920x1080) but since my website has to be responsive I don't know how to make this navigation bar to keep its alignment (spaces between element in the list and centre of the hexagon to be on the bottom line of the navigation bar) https://jsfiddle.net/j6wLpq1o/

I also tried making a list inside a list but it's not working the way I thought it would https://jsfiddle.net/53nLqvfp/

    <div id=navigationbar>
    <ul id="logonav">
        <li><a id="logo" class="active" href="#home"><img id="logoimg" src="https://i.imgur.com/pX2h0gT.png"/></a></li>
    <ul id="nav">
        <li class="nav"><a href="#news">Attractions</a></li>
        <li class="nav"><a href="#contact">Shop</a></li>
        <li class="nav"><a href="#about">Contact us</a></li>
    </ul>
    </ul>
</div>

css

 #navigationbar ul{
    display: inline-block;
}

#logonav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    width: 100%;
    z-index: 1;
    margin-left:25vw;

}
#logonav ul{
display: inline-block;

}
#logonav ul li{
display: inline-block;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    width: 100%;
    text-align:left;
    z-index: 1;
}

li {
    float: none;
    display: inline-block;

}

li a {
    display: block;
    color: white;
    text-align: center;
    text-decoration: none;
    padding: 14px 4vw;
    border-right: 1px solid red;
}

li a:hover{
    background-color: #111;
}

#logo {
    margin-top: 2vh;
    padding-right: 15px;
    border:0px;

}

#logoimg {
    width: 8vw;
    height: auto;
}
#nav{
    margin-top: 15px;
}

Thank you for your time.

Solution

It seems you're using display: inline-block. Which you can use but it takes a lot of media queries to get to where you want your items to be sometimes responsively.

Try using flexbox instead - https://css-tricks.com/snippets/css/a-guide-to-flexbox/