header-misc full click area link, not just icon

codymbeckerOct 4, 2024

Is there any way to make the full space around the icon clickable in the header-misc block?

            <div class="header-row">
                <div id="logo">
                    <a href="x">
                        <img src="/assets/img/branding/compressed/long black green full.png" alt="IDRecon">
                    </a>
                </div>
                <div class="primary-menu-trigger">
                    <button class="cnvs-hamburger" type="button" title="Open Mobile Menu">
                        <span class="cnvs-hamburger-box"><span class="cnvs-hamburger-inner"></span></span>
                    </button>
                </div>
                <div class="header-misc d-none d-sm-block">
                    <div id="top-search" class="header-misc-icon">
                        <a href="?mode=login" id="top-search-trigger"><i class="bi-key-fill"></i><i class="bi-x-lg"></i></a>
                    </div>
                </div>
                <nav class="primary-menu">
                    <ul class="menu-container">
                        <li class="menu-item d-sm-none">
                            <a class="menu-link" href="?mode=login"><div>Login</div></a>
                        </li>
                        <li class="menu-item">
                            <a class="menu-link" href="?mode=aboutus"><div>About Us</div></a>
                        </li>
                        <li class="menu-item">
                            <a class="menu-link" href="#contactus"><div>Contact Us</div></a>
                        </li>
                    </ul>
                </nav>
            </div>

SemiColonWebSTAFFNov 7, 2024

Hello,

You can consider adding a Padding to the Icon to increase the Clickable Space. Example:

<a href="#" id="top-search-trigger" class="p-3">

This will work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.