[Resolved] Top Menu with Search Bar

[Jose Miguel]

Hi Tom.

I was talking with you about the menu that I created.

I already purchased and configured the “Secondary Nav” add-on 🙂

But, I would like to see it of this way

Can you help me? Thanks 🙂

[Tom]

Hi Jose,

Thanks for your purchase!

Give this a shot:

add_action( 'generate_inside_secondary_navigation','generate_search_secondary_navigation' );
function generate_search_secondary_navigation()
{
    ?>
    <span class="secondary-nav-search">
        <?php get_search_form(); ?>
    </span>
    <?php
}

Adding PHP: https://generatepress.com/knowledgebase/adding-php-functions/

.secondary-nav-search {
    float: right;
}

.secondary-nav-search input.search-submit {
    display: none;
}

.secondary-nav-search input.search-field {
    padding: 7px 15px 8px;
}

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

Hope this helps 🙂

[Jose Miguel]

It works perfect tom, thanks you very much 🙂

I just have two questions.

How Can I do to move the secondary menu above of the primary menu? and Can I change the default color of the secondary menu text with any CSS?

Is it possible?

[Tom]

By default, it will always display below the primary menu, as by nature it’s the secondary menu.

It’s possible to move them, but I’ll need to know which position you have them in (Below Header, Above Header etc..).

The colors can be changed using the Colors add-on. If you can’t get that, you’ll need to use CSS.

For the CSS, you can use this: https://gist.github.com/generatepress/793804f553c25c70823c

However, you’ll need to change .main-navigation to .secondary-navigation throughout the code.

Hope this helps 🙂

[Jose Miguel]

Thank you tom!

All the code works perfectly but when I use it, the title of the main menu on mobile disappears.

I mean, the mobile menu is working but I do not see the word “Menu” where the visitors must to do click to open it.

Do you think that the CSS of the secondary nav that I am using is creating conflict with the colors of the primary menu?

[Tom]

Ah yea, there’s a class in there that looks like this:

.menu-toggle

It should be:

.secondary-navigation .menu-toggle

Hope this helps 🙂

[Jose Miguel]

Completely!

Great support, thank you so much my friend 🙂

[Tom]

You’re welcome 🙂

[Author]

Posts