Archived topic
Search icon in wrong position
17 replies · Started by Álvaro on November 15, 2020
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
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/
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.
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.
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.
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?
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
Edit this CSS here:
https://generatepress.com/forums/topic/search-icon-in-wrong-position/#post-1532559
Let me know :)
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.
Try this for desktop:
@media (min-width: 769px) {
.main-navigation .menu-bar-items {
flex-direction: row-reverse;
flex: 1;
justify-content: space-between;
}
}
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
Edited the CSS here:
https://generatepress.com/forums/topic/search-icon-in-wrong-position/#post-1533681
Wow! Absolutely amazing. Thank you very much, Leo. You have more than earned your salary!
No problem :)
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).

Website url: URL
Could you help?
Best regards.