I am trying to make a custom theme layout so I followed the instructions at this link and copied the component and css code exactly


<aura:component implements="forceCommunity:themeLayout" access="global" description="Sample Custom Theme Layout">
<aura:attribute name="search" type="Aura.Component[]" required="false"/>
<aura:attribute name="profileMenu" type="Aura.Component[]" required="false"/>
<aura:attribute name="navBar" type="Aura.Component[]" required="false"/>
<aura:attribute name="newHeader" type="Aura.Component[]" required="false"/>
    <div class="searchRegion">
    <div class="profileMenuRegion">
    <div class="navigation">
    <div class="newHeader">
    <div class="mainContentArea">

but there is an issue with the Profile Menu. The issue is the dropdown for the profile header does not appear aligned with the icon. I don't think I've changed anything else that much. When I click the icon, the dropdown appears in the middle of the screen. Does anyone know what is causing this issue or have some insight on how to fix it? Thanks!

Here is a picture of what I mean: enter image description here

  • Can you post the code of your custom theme layout? – RedDevil Jun 11 '17 at 9:29
  • I edited the post to include the code – Redford Stephens Jun 11 '17 at 15:26

This behavior is most likely due to CSS rules put in place in your community, eiher at a component level, in the community branding editor or an imported stylesheet. Out of the box, the actionMenu always apear below the actionMEnuTrigger from the ProfileMenu component.

I would start by inspecting the element in the browser to find out what rule might be affecting it and resulting in this behavior.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.