[Support request] Header in 4 columns

Home Forums Support Header in 4 columns

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #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? 🙂

    #1345540
    David
    Staff
    Customer Support

    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.

    #1345554
    Stefano

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

    #1345760
    David
    Staff
    Customer Support

    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;
        }
    }
    #1345773
    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).

    #1345787
    David
    Staff
    Customer Support

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

    #1345795
    Stefano

    Inserted 🙂

    Sorry, I had it removed…

    #1345812
    David
    Staff
    Customer Support

    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

    #1345835
    Stefano

    It works now!
    Thanks for the support 🙂

    #1345861
    David
    Staff
    Customer Support
    #1348358
    Stefano

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

    #1348394
    David
    Staff
    Customer Support

    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;
        }
    }
    #1348404
    Stefano

    Ok!! thank you 🙂

    #1348492
    David
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.