Header in 4 columns

[Stefano]

Hi!
I would like to change the header of the website in 4 columns (logo, product search, phone number, chat) from desktop. The last 2 columns (phone number and chat) should not be displayed from mobile.

Can it be done or is it impossible? 🙂

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Stefano]

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

[David]

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;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Stefano]

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).

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Stefano]

Inserted 🙂

Sorry, I had it removed…

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Stefano]

It works now!
Thanks for the support 🙂

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Stefano]

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

[David]

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;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Stefano]

Ok!! thank you 🙂

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts