how to move search icon to the left?

Hi there,

have you got a link to the Site with the slideout menu and search in place?
you can edit your original topic and use the Site URL field for privacy

Actually not, I am working on it on a local installation in mamp

Basically, the search icon that is located inside the primary navigation stays on the right edge after the slide out hamburger and I can’t locate the css or an option to move it to the left edge.

OK, so just with the toggle and the search in the navigation, then this CSS:

@media(min-width: 769px) {
    .main-navigation ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .main-navigation ul li.search-item {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
        margin-right: auto;
    }
}

thanks it worked.

could you help understand the logic behind? what does diplay:flex and order:-1 do?

Cool. Of course.
So the display: flex - makes the container into a flex-box - this guide is great:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

By default Flex lays out elements in a row (it can be changed to columns).
All elements within are placed in the order they are in the HTML. They get an implied order, 1st = 0, 2nd = 1, 3rd = 2 etc.

So you can go through and give each element a specific order to re-arrange them. By using a negative value that element will appear before the 1st item.

Thanks. But, I have an additional issue. I tried to apply this to this testing website

http://77.104.141.237/~new24551/intenzionalmente.com/2018/09/12/keep-it-simple/

and on mobile I get a duplicated header.

Sorry i edited the code above to fix that. If you then want to use the mobile header (Customizer > Layout > Header) then that has flex already so we can apply some code to re-order that if you want.

actually, this brought back the initial issue, search is on the right and the hamburger on the left, but only on mobile. I assume I need to add a new rule with the same content but targeting mobile devices, is it right? could you please tell the media to use?

So now this CSS to fix the mobile navigation:

@media(max-width: 768px) {
    .inside-navigation {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .mobile-bar-items {
        position: relative;
        -webkit-box-ordinal-group: 0;
            -ms-flex-order: -1;
                order: -1;
        margin-right: auto;
    }
    button.menu-toggle {
        width: auto;
    }
}

ThNks

You're welcome