Problem with the search cursor

Hi Juan,

One possible reason this occurs is through setting the Navigation as Header in Appearance > Customize > Layout > Header.

See this for reference: https://share.getcloudapp.com/nOu9OOYj

Can you try disabling this and see how it goes? Or did you have a custom CSS before that isn’t working now?

Hope this helps! :)

Hi, Fernando, thank you.

That was always disabled:

https://ibb.co/wspTFw4

Now I'm going to recheck all the custom CSS to see if something is causing the mismatch.

*Do you speak/write Spanish?

If that’s the case, if you wish to place the text at the center, here is a CSS you can add:

input.search-field {
    text-align: center;
}

On the other hand, if you wish to make the search input field small, you’ll need to modify its width and place it at the center as such:

form.search-form.navigation-search.nav-search-active {
    width:40%;
    left:50%;
    transform:translateX(-50%)
}

Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css

Hope this helps. :)

Thank you, Fernando

I'm going to try with that CSS and now I'll let you know if it worked because it doesn't seem to be a mistake in my CSS.

I have tried in full and content and it works although I can't recover the background colour at full width.

Full:
https://ibb.co/nsKS9Lp

Content:
https://ibb.co/1fH1mn8

Great, it works

Solved.

https://ibb.co/QctxSGC

Grateful for the help again.

JR

Hi there,

Did you try these navigation settings?

Ancho de la navegacion: Completo
Ancho interior de la navegacion: Contenido

Hi, David.
Yes,

But I wanted it to be centred and to show the background colour because some readers told me that it took them a while to notice that it appeared above the menu.

With the CSS that Fernando passed, it's perfect for me.

Regards

Hi Juan,

You’re welcome! Glad that worked out for you!

Just a tip, you can also integrate this code with @media queries so it would be responsive as well.

Kindly refer to this: https://generatepress.com/forums/topic/how-do-i-search-for-my-previous-posts/#post-263744

Here is a sample code you may use and modify in case you would need one:

@media (max-width: 768px) {
    /* CSS in here for mobile only */
        form.search-form.navigation-search.nav-search-active {
        width:100%;
        left:50%;
        transform:translateX(-50%)
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    /* CSS in here for tablet only */
    form.search-form.navigation-search.nav-search-active {
    width:100%;
    left:50%;
    transform:translateX(-50%)
    }

    .inside-navigation {
        align-items: flex-end !important;
        flex-direction:column-reverse;
    }
}
@media (min-width: 1025px) {
    /* CSS in here for desktop only */
        form.search-form.navigation-search.nav-search-active {
        width:40%;
        left:50%;
        transform:translateX(-50%)
    }
}

In this code, I added a little bit of CSS rules to restructure the nav on tablet for the code to be work and display as it should.

Hope this helps! :)

Hey Fernando

Right, good point.

I've already added it and now it's perfect. Really appreciate your help.
Regards

You’re welcome Juan! Feel free to reach out anytime if you’ll need assistance with anything else. :)