How to configure positions within header, advice please

[gray]

Its something that has always confused me. But I have a sort of customized header, with things in the wrong place.

 

Can somebody advise me what to do.

 

The logo to the left is OK, but the very basic menu with just 'Enter Shop' needs to move down to a more central position inline with the logo. Also the 'search' box is not within the header, but it needs to be again inline with the logo.

 

 

The code behind this, is as below.

 

<header id="header">
<nav class="header-nav">
<div class="header-top">
<div class="container">
<div class="row">
<div id="_desktop_logo" class="col-md-4 hidden-sm-down">
<div class="col-md-8 col-sm-12 position-static">
<div class="row">
<div id="_desktop_top_menu" class="menu col-lg-8 col-md-7 js-top-menu position-static hidden-sm-down">
<style type="text/css">
<div id="ba_ajax_search" class="col-sm-4 clearfix form-group ">
<form class="key_search" action="index.php?submit_search" method="GET">
<input name="controller" value="search" type="hidden">
<input name="orderby" value="position" type="hidden">
<input name="orderway" value="desc" type="hidden">
<input id="ba_search" class="form-control" autocomplete="off" placeholder="Instant Search" name="search_query" onkeyup="searchX(this.value)" type="text">
<input class="btn btn-default" onclick="searchX(this.value)" value="Search" style="display:none;" type="button">
<span class="close_ba_ajax_search"></span>
</form>
<div class="result_search clearfix">
</div>