[Resolved] Header with logo Wpml left and search on the right

[FunkyCss]

Hi i would like to create this one (hided link )on my site

is possible ?

[David]

Hi there,

for desktop you could use the Header Widget to add the shortcodes for your Language Selector and your Search plugins. Then we could assist with some CSS to create that style. If thats doable set it up and ill take a look.

[FunkyCss]

Hi David i just did it !

[David]

Try this CSS for desktop:

@media (min-width: 769px) {
    .inside-header {
        display: flex;
        min-height: 120px;
    }
    .header-widget {
        max-width: 100%;
        width: 100%;
        display: flex;
        align-items: center;;
    }
    .header-widget .widget.widget_search {
        order: 5;
        margin-left: auto;
    }
    .site-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 100;
    }
}

Not sure what your intentions are for mobile. Let us know.

[FunkyCss]

Hallo David and thank you so much once again for your help ,

i Think the best practice on mobile is to hide it , so i have done and i will add it on the slide out navigation bellow the menu . So i think i know how to fix it .

Once again thank you and have a nice day !

We wait for the Block plugin 😉

[David]

Awesome – glad to be of help.

[Author]

Posts