- This topic has 13 replies, 2 voices, and was last updated 6 months, 3 weeks ago by
David.
-
AuthorPosts
-
June 29, 2020 at 7:10 am #1345513
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? π
June 29, 2020 at 7:22 am #1345540David
StaffCustomer SupportHi 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/June 29, 2020 at 7:35 am #1345554Stefano
I inserted 2 more widgets on header widgets.
What do I do now? πJune 29, 2020 at 8:15 am #1345760David
StaffCustomer SupportTry 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/June 29, 2020 at 8:28 am #1345773Stefano
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).June 29, 2020 at 8:34 am #1345787David
StaffCustomer SupportWhere 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/June 29, 2020 at 8:39 am #1345795Stefano
Inserted π
Sorry, I had it removed…
June 29, 2020 at 8:51 am #1345812David
StaffCustomer SupportYou 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/June 29, 2020 at 9:00 am #1345835Stefano
It works now!
Thanks for the support πJune 29, 2020 at 9:07 am #1345861David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 1, 2020 at 7:49 am #1348358Stefano
Hi David,
As a mobile I also have to remove the search filter. What should I do?July 1, 2020 at 8:08 am #1348394David
StaffCustomer SupportRemove 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/July 1, 2020 at 8:12 am #1348404Stefano
Ok!! thank you π
July 1, 2020 at 9:12 am #1348492David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.