[Resolved] search bar

[Escobar]

Now its in the generate_inside_secondary_navigation

[Leo]

I see where the misunderstanding is coming from.

I think it would work better if the red is the primary navigation and green is the secondary navigation:
https://www.screencast.com/t/BFyMehfQr

So add the search field using the generate_inside_navigation hook start please.

[Leo]

Sorry one more question before we move on.

Will you be using the sticky navigation?

If so we will need to go another direction.

[Leo]

Another update.

Using the header is definitely the better solution for this.

So add the search form using the generate_after_header_content hook like this:
https://www.screencast.com/t/Y5LIndq0d

And make sure the navigation as a header option is disabled:
https://docs.generatepress.com/article/navigation-as-a-header/

[Escobar]

Done search form using the generate_after_header_content hook.
what do I do now?

[David]

Hi there,

So the menu items you want aside the Search bar keep them assigned to the Primary Navigation.
All other menu items can you add them to a separate menu and assign this to the Secondary Navigation.

Now set the Customizer > Layout > Primary Navigation –> Location to Float Right.
And set the Secondary Navigation to Below Header.

Once thats done we can look at the CSS to align the Logo | Search | Menu items

[Escobar]

Hi,
I would like, in anticipation of how it will look in the mobile version, for the search bar to be in the center of the secondary menu, with the logo on the left side and the shopping cart and login on the right, and the main menu would stay as is (without the logo).
But if to do this it is easier to change the main menu to the secondary one, we can try it.

[David]

Although we can move the cart and the logo to the secondary navigation it will create further work and potential issues.

For mobile we would suggest you use the Off Canvas panel, then edit your Secondary menu and set its locations to Secondary and Off Canvas Panel.

We can then simply hide the secondary nav on mobile to give you the layout you require.

[Escobar]

All done, but it looks really bad, I hope you help me to the end

[David]

OK – so lets start with this CSS:

.inside-header .main-navigation {
    flex: 1;
}
.inside-header, .inside-navigation {
    display: flex;
    align-items: center;
}

.inside-navigation .woo-search {
    margin: 0 auto;
}

@media(max-width: 768px) {
    #secondary-navigation {
        display: none;
    }
}

Then disable the Mobile Header in Customizer > Layout > Header.

Once thats done we can see what else needs to be done for Mobile.

[Escobar]

You’re great. It looks almost like what I wanted, but I think the search bar is too small, it does not occupy all the space between the logo and the cart.
It also seems that the registration-login item, which was in the main menu next to the cart, does not appear in the mobile version.

In addition, it is curious that the secondary menu appears centered on the mobile and tablet version but not on the desktop version

[Leo]

Let’s tackle one thing at the time.

Try edit this:

.inside-navigation .woo-search {
    margin: 0 auto;
}

to this:

.inside-navigation .woo-search {
    margin: 0 20px;
    display: flex;
    flex-grow: 1;
}

Then add this:

.aws-container {
    width: 100%;
}

[Escobar]

You’re great!!!
Now it looks perfect in the desktop version, but I can’t get to center the secondary menu below the search bar.

In the mobile version, I see a problem, I don’t know why the register-login item doesn’t appear in the main menu next to the cart, and the logo is too close to the search bar.

[Leo]

Any chance you can open two topics for the two separate issues now we have the search bar issue resolved?

Please remember to clear and disable your caching plugin we are trying to assist as well.

Thank you 🙂

[Escobar]

I do not mind opening another separate topic but we should solve that when we put the search bar like this, an element of the menu that is not seen in the mobile version has disappeared and the secondary menu does not stay in the center in the desktop version.

[Author]

Posts