Vertical alignment of the Compact Search Box in Fixed Nav.Menu

[warren_uPih]

Subject: Alignment Issue: Compact Search Box Misaligned in Sticky Header
Description: Hello Support Team,

I am setting up a Compact Search Box inside my navigation menu. Currently, the search icon aligns perfectly with the other menu links in the standard (static) header view.

The Issue: The problem occurs when scrolling down to trigger the Sticky Menu. In the sticky state, the search icon becomes misaligned, which throws off the alignment of the other menu elements.

Troubleshooting Attempted: I attempted to fix the alignment by adjusting the margin-top in the Ajax Search Pro > Layout Options > Search box layout > Search box Top Margin. However, this adjustment applies globally; while it fixes the sticky menu, it breaks the alignment in the main (static) menu.

Request: Could you please help me fix the search box within the Sticky Header without affecting the standard menu alignment?

Environment:

Website URL: https://drgt.com/test/

Plugin Version: 4.28.0

Theme: Betheme

[Ernest Marcinko]

Hi!

Thank you for all the details it helps a lot. It looks like it’s due to the top margin, which also applies to the box in the sticky mode. I think the easiest and most convenient soluton is to use a short custom CSS to offset the margin when the sticky state is enabled:

.is-sticky .asp_m_1 {
    margin-top: 6px !important;
}

This will set the margin to 6px on the box, when the sticky container is enabled.

[warren_uPih]

Thank you so much. It worked!

[Ernest Marcinko]

You cannot access this content.

[warren_uPih]

Thank you

[Author]

Posts