Help needed! Seeking professional advice.
I have a few issues that I can't seem to solve on my own. Firstly, regarding the second menu - should I use padding to position it correctly? Secondly, although I managed to make the navigation bar visually similar, when I added images they turned out low resolution and also stopped turning blue when active. Additionally, I believe using an arrow as an improvised shape with hidden overflow is incorrect because I want the entire design to be responsive on mobile devices. Unfortunately, it's not responsive at all. For example, resizing the button affects the size of the top left logo. I've been struggling with this supposedly simple page for 2-3 days now. Should I consider starting over?
.html{
height: auto;
}
.uk-container
{
display: flex;
margin: 0 0 0 0;
padding: 0 0 0 0;
height:auto;
}
.box-1
{
width:100%;
height:auto;
margin: 0;
padding: 0;
}
#card{
margin: 0;
padding: 0;
height: 100%;
width: auto;
display:block;
}
box-2
{
display: inline-block;
}
...
<ul {
position: relative; ... }
ul li {...}
...
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div class= "uk-container">
<div id="card" ...
...
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).on('click','ul li', function(){
...
})
</script>
<div class="contactdiv">
...
</div>
...
</button>
...
</div>
</div>
</div>
</div>
</body>
</body>
</html>Intended design: Current appearance:
I was supposed to finish this (and two more tasks) by Wednesday, which has already passed. I have been stuck on this particular issue for 4 days now.