MyBB Community Forums

Hello! I am using Enhanced Account Switcher to create a dropdown in my website's header so users can switch their profile on the fly. That said, it is giving me some issues.

When the dropdown is created, it adds extra space to the header.



If I change the header wrapper div to height and not minimum height (which ultimately messes up responsiveness for mobile), position:absolute; does not override navigation and the dropdown hides behind it instead.


Here is the HTML/CSS for the account switcher's dropdown reference:

<div id="accountswitcher_header"><a>{$lang->aj_profile}</a>
                <div id="accountswitcher_header_popup">
                    <ul class="trow_header">
                        {$as_header_dropdown}
                    </ul>
                </div>
            </div>
            <script>
                <!--
                    $("#accountswitcher_header").on("click", function(e) {
                        $("#accountswitcher_header_popup").show();
                        e.stopPropagation();
                    });
                    $("#accountswitcher_header_popup").on("click", function(e) {
                        e.stopPropagation();
                    });
                    $(document).on("click", function() {
                        $("#accountswitcher_header_popup").hide();
                    });
                -->
            </script>

.trow_header {
    background: pink;
    border: 0px solid;
    padding: 13px;
}

#accountswitcher_header {
   position: relative;
   cursor: pointer;
}

#accountswitcher_header_popup {
   padding: 0 30px 0 15px;
   position: absolute;
   top:0;
   display: none;
   opacity: 1;
}

#accountswitcher_header_popup ul {
   position: absolute;
   /*left: 0;
   padding-left: 10px;
   padding-right: 20px;*/
   min-width: 80px;
   margin-top:17px;
   line-height: 120%;
   /*border-bottom-right-radius: 10px;
   border-bottom-left-radius: 15px;
   white-space: pre-line;*/
}
.as_head_drop > img {
    height: 22px;
    width: auto;
}

.as_head_userbit {
    list-style: none;
}

.as_head_userbit > img {
    height: 22px;
    width: auto;
}

.as_header {
    border-top: 1px solid;
    margin-top: 7px!important;
    padding-top: 7px!important;
    clear: both;
	min-width: 400px;
}

.as_header > img {
    height: 22px;
    width: auto;
}

.as_header > li > img {
    height: 22px;
    width: auto;
}

If you would like, I can message you the test website and you can create an account + a linked account to find a solution if need be.

What can I do to fix this issue? I have tried a few variations, including z-index, but have not had any luck.

Thank you in advance!

SOLVED: Was a theme issue. Sorry!