Sridhar Katakam

Genesis and WordPress Tutorials

Left aligned Primary navigation and right aligned Search box below header in Genesis

by 6 Comments

This tutorial provides the steps to add an elliptical search form below the primary nav (in HTML markup), wrap primary nav and the search in a custom div below the site header and style it using Flexbox.

Screenshots:

We shall use Ionicon's search font icon for the magnifying glass.

At smaller widths, the search box will appear below the hamburger menu.

While the tutorial has been written for Genesis Sample, it should work with a few adjustments in any Genesis theme

Step 1

In the function hooked to wp_enqueue_scripts add

wp_enqueue_style( 'ionicons', '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css' );

Step 2

Add the following in child theme's functions.php:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Thank! I’ve been looking for this solution.

    In the ‘return esc_attr( ‘ï’¥’ );” What is the ï’¥?

    Reply

  • This is a great solution, thank you! The only thing is that when I apply it on my test site, I get a grey line to the right and to the left of the black line which is situated dont tha logo. How can I get rid of it? Can be seen on http://vladimirmukhin.ru/ Thank you!

    Reply

    • OK, got it myself. Had to remove

      border-top: 1px solid #eee;

      from the

      .nav-search {
      padding: 2px 40px 3px 50px;
      border-top: 1px solid #eee;
      background-color: #fff;
      }

      section.

      Thanks again for th great tutorial!

      Reply
    • >