[Resolved] Problem with the search cursor

[Juan Ramón]

Hi, friends:
I am asking for help or some hint to fix this.
The search cursor appears on the absolute left.

https://ibb.co/WHHrhtK

I’m sure it’s something I did, but I don’t remember what and I can’t find a way to restore it to its original state (the cursor appeared at the start of the contained box area).

Thanks
JR

[Fernando]

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! 🙂

[Juan Ramón]

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?

[Fernando]

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. 🙂

[Juan Ramón]

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

[Juan Ramón]

Great, it works

Solved.

https://ibb.co/QctxSGC

Grateful for the help again.

JR

[David]

Hi there,

Did you try these navigation settings?

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

[Juan Ramón]

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

[Fernando]

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! 🙂

[Juan Ramón]

Hey Fernando

Right, good point.

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

[Fernando]

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

[Author]

Posts