Change search position in menu

Hello @lucie136,

You can do it with the customization with the custom CSS.
Please share a live URL from your issue.

Also, you can use “Inspect Element” tools on the browser. Please follow the steps explained in this link: https://www.greengeeks.com/tutorials/article/use-the-inspect-element-tool-in-chrome/.

https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/

CSS Tutorial: https://www.w3schools.com/css/
CSS Units: https://www.w3schools.com/cssref/css_units.asp
Responsive Sizes: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Best Regards

Hello,

Sadly, I don’t have a live URL as I use a maintenance plugin to develop my website before the launch.

I know how to use the inspector and I’ve tried different solutions in CSS but it never worked.

Here’s a screenshot of the current menu: https://ibb.co/37zcWsP. I’ve added in yellow the place where I would want the search button to be.

Thank you.
Lucie.

Hello @lucie136,

We need to check the issue live to provide the correct CSS.

However, for check, you can read those links to find the correct solution to solve it:
– https://css-tricks.com/all-about-floats/
– https://css-tricks.com/snippets/css/a-guide-to-flexbox/
– https://css-tricks.com/almanac/properties/p/position/
– https://css-tricks.com/almanac/properties/t/text-align/

Usually, it should be solved with:
float: right;
or
text-align: right;

I hope that helps
Best Regards

Hello,

It doesn’t help but then I’m not sure on what to apply it on.

I deactivated the maintenance page for you to see, here’s the link : https://games-of-breizh.fr.

Best regards.

Hello,

So is it possible?

Best regards.

Hello @lucie136,

Please put the CSS below in Customizing > Custom CSS/JS > CSS Code:

@media(min-width: 1280px) {
    nav#site-navigation div#searchform-dropdown.show,
    #site-navigation-wrap .dropdown-menu>li:last-child {
        position: absolute;
        right: -428px;
    }
}

@media(min-width: 1200px) {
    nav#site-navigation div#searchform-dropdown.show,
    #site-navigation-wrap .dropdown-menu>li:last-child {
        position: absolute;
        right: -385px;
    }
}

@media(min-width: 960px) {
    nav#site-navigation div#searchform-dropdown.show,
    #site-navigation-wrap .dropdown-menu>li:last-child {
        position: absolute;
        right: -275px;
    }
}

Note: if you have any cache plugin or server cache(CDN / WP Rocket / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes.

Best Regards

Hello,

I’ve adapted the values for “right” so the icon is at the end of the nav.

It works ok until 1280px (site width is in pourcentages under that).

Using JS to adapt the right value in a dynamic way would work I thinks.

Thank you !