Как сделать эту панель навигации отзывчивой?

Я хочу сделать панель навигации с логотипом в форме шестиугольника и 3 «кнопками», выровненными, как показано на этом снимке экрана https://prnt.sc/n8nm3q.

Мне удалось выровнять их так, как я хочу, в полноэкранном режиме (1920x1080), но поскольку мой веб-сайт должен быть отзывчивым, я не знаю, как заставить эту панель навигации сохранять свое выравнивание (пробелы между элементом в списке и центром шестиугольника для находиться в нижней строке панели навигации) https://jsfiddle.net/j6wLpq1o/

Я также пытался создать список внутри списка, но он не работает так, как я думал. 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;
}

Спасибо за уделенное время.