https://i.sstatic.net/057Pk.png
I have been experimenting with different approaches to design the white navigation menu that is supposed to span across the top of the image. However, I am struggling to make it scale gracefully in CSS. I am considering using the standard Bootstrap navbar with a white background and making only the section with the logo transparent. As a backend developer trying to figure this out, I might be overcomplicating things. Any suggestions or examples would be highly appreciated!
//edit: I forgot to include a link to the development site. Here it is.
So far, my main attempt has been creating an extremely wide image of the logo and the navbar. While this approach works, it becomes challenging to maintain consistency when ensuring responsive behavior.
Below is a snippet of the CSS code for the header I am currently using.
.ge-menu{
font-family:'Montserrat', sans-serif;
position:absolute;
top:40px;
background-image:url('/wp-content/uploads/2019/03/Header-mobile.png');
background-size:cover;
background-position:top;
background-repeat:no-repeat;
width:100%;
height:280px;
margin-top:-10px;
z-index:100;
}