Header in 4 columns

Hi there,

if you can add 2 more widgets to your Header Widget one for the Phone Number and one for the chat. Then let me know and ill provide some CSS to make them inline for desktop and hidden for mobile.

I inserted 2 more widgets on header widgets.
What do I do now? :)

Try this CSS:

.header-widget, .inside-header {
    display: flex;
    align-items: center;
}
.header-widget {
    max-width: unset;
    order: 10;
    flex: 1;
}
.header-widget > * {
    margin-left: 20px;
    padding-bottom: 0 !important;
}
.header-widget .ysm_search_widget {
    margin-left: 50px;
    margin-right: auto;
    flex-basis: 50%;
}
@media (max-width: 768px) {
    .header-widget .widget_custom_html {
        display: none;
    }
    .inside-header {
        flex-direction: column;
    }
    .header-widget {
        width: 100%;
        margin-top: 1em;
    }
    .header-widget .ysm_search_widget {  
        flex: 1;
    }
}

I tried, but it's not working.
I don't know if it will be useful but now I have inserted some classes (.tel_number, .chat_online).

Where did you add the CSS? I cannot see it on the site ?

Inserted :)

Sorry, I had it removed...

You have this CSS before it:

input[type=text], input[type=email], input[type=url], input[type=password], input[type=search], input[type=tel], input[type=number], textarea, select {
padding: 5px 10px;

It is missing a closing }

Add that to fix the issue

It works now!
Thanks for the support :)

You're welcome

Hi David,
As a mobile I also have to remove the search filter. What should I do?

Remove this CSS:

@media (max-width: 768px) {
    .header-widget .widget_custom_html {
        display: none;
    }
    .inside-header {
        flex-direction: column;
    }
    .header-widget {
        width: 100%;
        margin-top: 1em;
    }
    .header-widget .ysm_search_widget {  
        flex: 1;
    }
}

And add:

@media (max-width: 768px) {
    .header-widget {
        display: none;
    }
}

Ok!! thank you :)

You're welcome