I'm trying to create a unique navigation bar that features a hexagon-shaped logo and 3 buttons aligned in a specific way. Check out the screenshot for reference here.
Although I've managed to align everything perfectly on a fullscreen (1920x1080) display, I'm struggling to maintain this alignment on different screen sizes due to responsiveness issues. Here's a link to my current code on JSFiddle: https://jsfiddle.net/j6wLpq1o/
I attempted to nest lists within lists as an alternative solution, but it didn't work as expected. You can view this attempt here: 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;
}
Your help is greatly appreciated!