[Resolved] Search icon in wrong position

Home Forums Support [Resolved] Search icon in wrong position

Home Forums Support Search icon in wrong position

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1532546
    Álvaro

    Hi!

    I’ve created a burger menu for all my website, but now I have the search button left and burger right. Is possible to change the order? You can find in my website: https://descubrirlahistoria.es

    #1532559
    Leo
    Staff
    Customer Support

    Hi there,

    Try this CSS:

    @media (max-width: 768px) {
        .main-navigation .inside-navigation {
            justify-content: flex-start;
        }
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    #1532564
    Álvaro

    Thanks! But this code doesn’t work. If I delete first file the icons go to right side of the menu. But as you have written nothing happens.

    #1532703
    Leo
    Staff
    Customer Support

    I’m not seeing the code being added.

    Can you add it in so I can see why it isn’t working?

    When I tried using the browser inspector tool, it worked as expected:
    https://www.screencast.com/t/Ua9kkoM2

    Please clear and disable your caching plugin as well while we are helping.

    #1532733
    Álvaro

    I’ve added it, but what I want is only to change the order of icons. Now I have search icon and next the burger icon. I want burger icon first. You can see now the code incorporated to my CSS.

    #1532741
    Leo
    Staff
    Customer Support

    I want burger icon first.

    Sorry I’m a bit confused. Isn’t this the default without my CSS?

    Or do you want both icons on the right?

    #1532746
    Álvaro

    Sorry, maybe my English is bad. Just what I said is that I want the burger icon first. In your screenshot search icon is on the left and burger (menu) icon on right side of the menu bar. What I want is one of this options:

    1. Both in left side, but burger (menu) icon first.
    2. Burger (menu) icon on left side and search icon on right.

    Default option is what you can see on this screenshot: https://1drv.ms/u/s!AqoGpIFDfR2_jpJ3c3ayWX5gCiFvfQ?e=7U88uC

    #1532791
    Leo
    Staff
    Customer Support
    #1532978
    Álvaro

    Hi, Leo. I’m sorry, but nothing happens. If you go into website you’ll see the code. It’s only working on mobile view, but I want it also in desktop and tablet. Remember I’m using the burger menu in all website, not only in mobile version.

    #1533681
    Leo
    Staff
    Customer Support

    Try this for desktop:

    @media (min-width: 769px) {
        .main-navigation .menu-bar-items {
            flex-direction: row-reverse;
            flex: 1;
            justify-content: space-between;
        }
    }
    #1533826
    Álvaro

    Now it works. The only problem (and sorry, I fell I’m being too heavy) is that the search text has a very short space, and when is behind the search icon it dissapears. Is there a way to solve it? Maybe, if we put the search icon on the top right side of the bar…

    Sorry again. And thanks

    #1533843
    Leo
    Staff
    Customer Support
    #1533863
    Álvaro

    Wow! Absolutely amazing. Thank you very much, Leo. You have more than earned your salary!

    #1533869
    Leo
    Staff
    Customer Support

    No problem 🙂

    #1890274
    Álvaro

    Hi again,

    I would like to refine the search tool, because some users indicate that they find it confusing. Right now, when you click on the search icon, it opens a space to type to the left of the whole thing. I think ideally the text should start right where the icon is, or in the blank space in the menu (attached screenshot).

    Screenshot menu (search icon)

    Website url: URL

    Could you help?

    Best regards.

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.