Request to Expand Search Box Width on Larger Screens

Hello,

I would like the search box to be wider when displayed. How can it be made 2–3 times wider on a computer or other larger devices such as a tablet? I have attached a screenshot for reference.

Best regards,
Nikola

Attachments:

You must be logged in to view attached files.

Hello,

Navigate to WoodMart > Header Builder > Edit current Header > Configure the search settings, and in the style tab change the increase the form width.

See Screenshot for better understanding: https://postimg.cc/G81PXKSC

Best Regards,

Hi, this changes the width and height of the search bar itself, but not the dropdown menu with suggestions below the search bar.

The task is to expand the dropdown menu of the search bar, as I have indicated in the picture.

Best regards, Nikola

Hello,

Please add below Custom CSS code to Theme Settings > Custom CSS:

@media (min-width: 1025px) {
    .wd-dropdown-results {
        left: 0 !important;   
        right: 0 !important;               
    }
}

Best Regards,

Hello,

This setting is great, but it only expands as wide as the search bar. How can I make it expand further without changing the width of the search bar?

Best regards, Nikola

Hello,

Please add below Custom CSS code to Theme Settings > Custom CSS. You can increase or decrease by 600px based on your design

@media (min-width: 1025px) {
    .wd-dropdown-results {
        width: 600px !important; /* Set your desired width */
        max-width: 100% !important;
        left: 50% !important; 
        transform: translateX(-50%) !important; /* Center align */
    }
}

Best Regards,

Hello,

thank you, but it cannot be more expanded as attached image. It is the same like previous result, except that it is centered.

Attachments:

You must be logged in to view attached files.

Hello,

Please remove the previous code and add below Custom CSS code to Theme Settings > Custom CSS.

  @media (min-width: 1025px) {
.wd-dropdown-results {
        width: 800px !important;
        max-width: none !important;
        left: 0 !important;
        transform: none !important;
    }
}

Best Regards,

Hello, there isn’t a result. You can check also.

Hello,

I have commented out the custom css on your site and it is working fine.

See Screenshot for clarification: https://postimg.cc/sMHVcMNg

Check back your site and check the issue. If you have any questions feel free to contact us.

Best Regards,

Hello, this looks great now, but my idea was to expand the search bar so that only one product remains on a single row, instead of having multiple boxes like this. Could you give me code that makes only one product stay across the full width of the search bar, with the rest arranged below it?

Regards,
Nikola

Hello,

Please add below Custom CSS code to Theme Settings > Custom CSS:

/* Make each product take full width */
.wd-dropdown-results .wd-suggestions-group.wd-type-product {
    display: block !important;
}

.wd-dropdown-results .wd-suggestions-group.wd-type-product .wd-suggestion {
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
}

/* Make product image bigger and keep layout single-row full width */
.wd-dropdown-results .wd-suggestion-thumb {
    max-width: 120px !important;
    flex: 0 0 120px !important;
}

/* Text takes remaining width */
.wd-dropdown-results .wd-suggestion-content {
    flex: 1 1 auto !important;
}

Best Regards,

Hello,

that’s exactly what I wanted! You are amazing! Next year I will send you “rakiya”, bulgarian drink with alcohol.

Have a nice day! You can close topic.

PS: please check tha topic with Woodmart transfer to another development domain.

Best regards, Nikola

Hello,

You’re Most Welcome!

Feel free to write back anytime. If you need further assistance, we are always here to help you.

If you have a minute, we’d truly appreciate your feedback — it helps us improve the product and shape future updates more effectively. We’d love your feedback on our theme: https://tally.so/r/w4l54k

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts