How to Make Navigation Search Styles in GeneratePress Theme

Are you looking for a way to create the different navigation search styles for your WordPress website built with the GeneratePress theme?

So this article is best suited for you to create different navigation search styles for the GeneratePress theme using CSS code. All you have to do is apply these CSS codes to your website.

GeneratePress is one of the most popular lightweight and responsive WordPress themes. You can create any website, such as blog sites, e-commerce platforms, or forum sites, using the GeneratePress theme.

GeneratePress is the perfect theme for building a fast, responsive and SEO-friendly elegant WordPress website.

Using the GenerateBlocks plugin with the GeneratePress theme, you can give your website more flexibility and features to make your website perform better on the web.

Now without any further ado, let’s start to make various navigation search styles for the GeneratePress theme using CSS codes.

Style Your Navigation Search for GeneratePress Using CSS

Today in this article, you will find various CSS codes to customize the navigation search for GeneratePress.

#1: Copy the following CSS code. Now login to your WordPress dashboard, go to Appearance > Customize > Additional CSS and paste it.

/* Navigation search button styling by WPSettingbox */
.navigation-search.nav-search-active {
    top: 60px;
    width: 250px;
    left: auto;
    background: #e5e7eb;
    padding: 0px;
	border-radius: 4px;
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.05);
}

.navigation-search input[type="search"], 
.navigation-search input[type="search"]:active, 
.navigation-search input[type="search"]:focus {
    background: #e5e7eb;
    height: auto;
    border-radius: 4px;
    border: 2px solid #e5e7eb;
	  font-size: 15px;
	  padding-bottom: 5px;
	  padding-top: 5px;
	  padding-left: 5px;
	  padding-right: 5px;
	  color: #000000;
}

As your choice, you can change the border, padding, color, etc.

Now add the following PHP code snippet to create your navigation search placeholder.

/* Navigation search placeholder */
add_filter( 'generate_navigation_search_output', function() {
    printf(
        '<form method="get" class="search-form navigation-search" action="%1$s">
            <input type="search" placeholder="Enter your search term" class="search-field" value="%2$s" name="s" title="%3$s" />
        </form>',
        esc_url( home_url( '/' ) ),
        esc_attr( get_search_query() ),
        esc_attr_x( 'Search', 'label', 'generatepress' ) 
    ); 
} );

Use the WPCode plugin to add this PHP code snippet, or you can use the functions.php file to add your PHP code snippet using the GeneratePress child theme.

To add your custom PHP code snippets into the child theme’s functions.php, go to Appearance > Theme File Editor and choose the child theme. Now open functions.php to add custom PHP code snippets and paste the code. Finally, below click on the Update File button to save the changes.

#2: Now, let’s try another CSS code to make a new navigation search style for the GeneratePress theme.

First, go to Appearance > Customize > Layout > Primary Navigation and disable Navigation Search.

Then copy the following CSS code and paste it into the Additional CSS area.

/* Custom navigation search styling by WPSettingbox */
.custom-search {
    background-color: #1e73be;
    border-radius: 5px;
    margin: 0 5px;
    order: 10;
}
.custom-search input[type="search"],
.custom-search button {
    border: 0;
    outline: 0;
    background-color: transparent;
    color: #ffffff;
}
.custom-search input[type="search"]::placeholder {
    color: #ffffff;
	  font-size: 14px;
	  font-weight: 600;
}

Now add the following PHP code snippet to the child theme’s functions.php or by using the WPCode plugin.

/* Custom navigation search */
add_action('generate_inside_navigation','generate_add_custom_search');
function generate_add_custom_search()
{
      echo '<div class="custom-search">';
            get_search_form();
      echo '</div>';
}

#3: Try another following CSS code to customize your navigation search.

/* Navigation search button styling for desktop by WPSettingbox */
@media(min-width: 768px) {
.navigation-search.nav-search-active {
    top: 60px;
    width: 300px;
    left: auto;
    background: #f0f0f0;
    padding: 20px;
    box-shadow: rgba(0,0,0,0.14) 0px 2px 6px 0px;
}

.navigation-search input[type="search"], 
.navigation-search input[type="search"]:active, 
.navigation-search input[type="search"]:focus {
    background: #1e73be;
    height: auto;
    border-radius: 5px;
    border: 1px solid #1e73be;
    color: #ffffff;
	box-shadow: rgba(0,0,0,0.14) 0px 2px 6px 0px;
}

.navigation-search.nav-search-active:after {
    content: "Enter your keyword and search...";
    margin-top: 10px;
    display: block;
    font-size: 14px;
    text-align: center;
}

.search-item.active:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(50% - 7px);
    width: 0; 
    height: 0; 
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #fff;
    z-index: 100;
}
}

Final Words:

So today, you get these some CSS code and PHP snippets to create different navigation search styles for your WordPress website built with the GeneratePress theme.

I’m sure these codes will help you a lot in customizing the navigation search for your website.

If you face any problems or want more tips, don’t hesitate to comment below. I’d be happy to help you if I can.

You can also use the contact form to contact me.

If you liked this article, please show your love by sharing it on your favorite social media channel and also send your thoughts in the comment section.

I love your comments. It encourages me to create the best WordPress resources and marketing articles for you.

Also, feel free to ask me anything about WordPress plugins, themes, hosting, and starting your blog.

You can follow WPSettingbox on Twitter and Facebook to get fresh and updated content.