Reply To: HTML Question

[Support]

Hello, the dropdown was not created to work in that area, but you can make a few customizations to make that work. First you need to put it outside the UL, example:

<div class="header-column justify-content-end">
	<div class="header-row">
		<ul class="header-social-icons social-icons social-icons-clean social-icons-icon-light">
			<li class="social-icons-facebook"><a href="https://www.facebook.com/PorterCountyGovernment" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
			<li class="social-icons-youtube"><a href="https://www.youtube.com/@portercountygovernment5550" target="_blank" title="YouTube"><i class="fab fa-youtube"></i></a></li>
			<li class="social-icons-linkedin"><a href="https://www.linkedin.com/company/porter-county-government" target="_blank" title="Linkedin"><i class="fab fa-linkedin-in"></i></a></li>
			<li><span class="header-nav-features-search-reveal-container"><span class="header-nav-feature header-nav-features-search header-nav-features-search-reveal"><a href="#" title="Search" class="header-nav-features-search-show-icon text-decoration-none"><i class="fas fa-search header-nav-top-icon header-search-custom"></i></a></span></span></li>
		</ul>
		<div class="header-nav-features header-nav-features-no-border d-none d-lg-block p-relative p-0 m-0 ms-1 border-0 right-0 bottom-1">
			<div class="header-nav-feature header-nav-features-user d-inline-flex mx-2 pe-2 signin" id="headerAccount">
				<a href="#" class="header-nav-features-toggle text-light" aria-label="">
					<i class="far fa-user"></i>
				</a>
				<div class="header-nav-features-dropdown header-nav-features-dropdown-mobile-fixed header-nav-features-dropdown-force-right" id="headerTopUserDropdown">
					<div class="signin-form">
						<h5 class="text-uppercase mb-4 font-weight-bold text-3">Sign In</h5>
						<form>
							<div class="form-group">
								<label class="form-label mb-1 text-2 opacity-8">Email address* </label>
								<input type="email" class="form-control form-control-lg">
							</div>
							<div class="form-group">
								<label class="form-label mb-1 text-2 opacity-8">Password *</label>
								<input type="password" class="form-control form-control-lg">
							</div>
							<div class="row pb-2">
								<div class="form-group form-check col-lg-6 ps-1">
									<div class="custom-control custom-checkbox">
										<input type="checkbox" class="custom-control-input" id="rememberMeCheck">
										<label class="form-label custom-control-label text-2" for="rememberMeCheck">Remember Me</label>
									</div>
								</div>
								<div class="form-group col-lg-6 text-end">
									<a class="text-uppercase text-1 font-weight-bold text-color-dark" id="headerRecover" href="#">LOST YOUR PASSWORD?</a>
								</div>
							</div>
							<div class="actions">
								<div class="row">
									<div class="col d-flex justify-content-end">
										<a class="btn btn-primary" href="#">Login</a>
									</div>
								</div>
							</div>
							<div class="extra-actions">
								<p>Don't have an account yet? <a href="#" id="headerSignUp" class="text-uppercase text-1 font-weight-bold text-color-dark">Sign Up</a></p>
							</div>
						</form>
					</div>

					<div class="signup-form">
						<h5 class="text-uppercase mb-4 font-weight-bold text-3">Sign Up</h5>
						<form>
							<div class="form-group">
								<label class="form-label mb-1 text-2 opacity-8">Email address* </label>
								<input type="email" class="form-control form-control-lg">
							</div>
							<div class="form-group">
								<label class="form-label mb-1 text-2 opacity-8">Password *</label>
								<input type="password" class="form-control form-control-lg">
							</div>
							<div class="form-group">
								<label class="form-label mb-1 text-2 opacity-8">Re-enter Password *</label>
								<input type="password" class="form-control form-control-lg">
							</div>
							<div class="actions">
								<div class="row">
									<div class="col d-flex justify-content-end">
										<a class="btn btn-primary" href="#">Register</a>
									</div>
								</div>
							</div>
							<div class="extra-actions">
								<p>Already have an account? <a href="#" id="headerSignIn" class="text-uppercase text-1 font-weight-bold text-color-dark">Log In</a></p>
							</div>
						</form>
					</div>

					<div class="recover-form">
						<h5 class="text-uppercase mb-2 pb-1 font-weight-bold text-3">Reset My Password</h5>
						<p class="text-2 mb-4">Complete the form below to receive an email with the authorization code needed to reset your password.</p>

						<form>
							<div class="form-group">
								<label class="form-label mb-1 text-2 opacity-8">Email address* </label>
								<input type="email" class="form-control form-control-lg">
							</div>
							<div class="actions">
								<div class="row">
									<div class="col d-flex justify-content-end">
										<a class="btn btn-primary" href="#">Reset</a>
									</div>
								</div>
							</div>
							<div class="extra-actions">
								<p>Already have an account? <a href="#" id="headerRecoverCancel" class="text-uppercase text-1 font-weight-bold text-color-dark">Log In</a></p>
							</div>
						</form>
					</div>

				</div>
			</div>
		</div>

	</div>
</div>

With that you can start your customization.

---