- This topic has 2 replies, 2 voices, and was last updated 1 month ago by
. This post has been viewed 220 times
Viewing 3 posts - 1 through 3 (of 3 total)
-
Posts
-
I’m sorry. I tried to follow your lead from my last posting and I’m failing miserably. The good news is this should be the last time I bother you (for a while!).
I would like to take your sign in template and integrate it with the sign in icon on my top navigation.
The current line where the sign in icon is located:
<li><a href=""#""><i class="far fa-user"></i></a></li>
And the template to incorporate afterward:
<div class="header-nav-features header-nav-features-no-border header-nav-features-lg-show-border order-1 order-lg-2"> <div class="header-nav-feature header-nav-features-user d-inline-flex mx-2 pe-2 signin" id="headerAccount"> <a href=""#""> <i class="far fa-user text-color-light"></i> Sign In </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 text-color-dark">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 text-color-dark">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 href=""#"">LOST YOUR PASSWORD?</a> </div> </div> <div class="actions"> <div class="row"> <div class="col d-flex justify-content-end"> <a href=""#"">Login</a> </div> </div> </div> <div class="extra-actions"> <p>Don't have an account yet? <a href=""#"">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 text-color-dark">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 text-color-dark">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 text-color-dark">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 href=""#"">Register</a> </div> </div> </div> <div class="extra-actions"> <p>Already have an account? <a href=""#"">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 text-color-dark">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 href=""#"">Reset</a> </div> </div> </div> <div class="extra-actions"> <p>Already have an account? <a href=""#"">Log In</a></p> </div> </form> </div> </div> </div> </div>
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.
Viewing 3 posts - 1 through 3 (of 3 total)
This topic is marked as "RESOLVED" and can not rceive new replies.
