https://codepen.io/uckannet/pen/mBaJXw

Temanızın functions.php dosyasına aşağıdaki kodu ekliyorsunuz sonucunda panelden yönebilebilir bir menü yaratmış oluyorsunuz

register_nav_menus( array( 'uckan-header' => __( 'Header Menu', 'uckan' ), ) );

Daha sonra header.php açın ve body etiketinden sonra ekleyin.

<header id="uckan_header">
    <div class="uckan_menu">
        <div class="uckan_header_menu">
            <?php if ( has_nav_menu( 'uckan-header' ) ) : ?>
            <?php wp_nav_menu( array(
                'theme_location' => 'uckan-header',
                'container'=> false,
                'depth' => 1,
            ) ); ?>
            <?php else: ?>
            <ul>
                <li class="current-menu-item"><a href="#">Menü oluşturulmamış.</a></li>
            </ul>
            <?php endif; ?>
            <div class="uckan_header_right">
                <ul>
                    <li class="uckan_header_search_button">Search</li>
                    <li><a href="#">face</a></li>
                    <li><a href="#">twit</a></li>
                    <li><a href="#">Medium</a></li>
                </ul>
            </div>
        </div>
        <div class="uckan_header_orta">
            <div class="uckan_logo">
            <a href="#"><h1>Uckan</h1></a>
            </div>
        </div>
</header>
<div class="sosyal_popup">
   <form>
     <input type="text" placeholder="Aradığınız kelimeyi yazın ve entera basın.">
     <button class="sosyal_popup_close">X</button>
  </form>
</div>

Wordpress kısmında tema cssinden veya benim yazdığım bir kod sebebiyle görüntü bozukluğu olabilir geri dönerseniz yardımcı olurum. Sadece codepende yazdım herhangi bir wordpress temasında denemedim. Mobilde nasıl görünür onada bakmadım.