Change Text Position of Toggle Element

  • Resolved mosaiq

    (@mosaiq)


    2 years, 4 months ago

    Hello,

    I really enjoy your extension plugins for yootheme.

    Setting up a new website, I tried to use the toggle element as a side navigation.
    This requires me to set the appearing text on the left side of the toggle element.
    Is this possible?

    Thank you in advance

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author forrestkirby

    (@forrestkirby)

    Hi mosaiq,

    thanks for your positive feedback!

    To position the Content2 to the left of your icon, please try these steps:

    – set Position to relative in the HD Toggle element settings
    – add the following at Advanced > CSS in the HD Toggle element

    css
.el-element > div:first-child {
    margin: 0px;
}
.el-element > [id^="toggle-"] {
    position: absolute;
    left: -100px;
    top: 10px;
    margin: 0px !important;
}

    Adjust the values for top and left to your needs.

    —

    Screenshots

    https://www.screencast.com/t/jmlZkdNp
    https://www.screencast.com/t/f6lx50dFX

    —

    Note: Usually, I would suggest to position the Content2 as follows, but due to the animation using the transform property, this would look odd.

    css
.el-element > div:first-child {
    margin: 0px;
}
.el-element > [id^="toggle-"] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-100%,-50%);
    margin: 0px !important;
}

    Kind regards

    • This reply was modified 2 years, 4 months ago by forrestkirby.
    • This reply was modified 2 years, 4 months ago by forrestkirby.
    • This reply was modified 2 years, 4 months ago by forrestkirby.
    • This reply was modified 2 years, 4 months ago by forrestkirby.
    • This reply was modified 2 years, 4 months ago by forrestkirby.
    Thread Starter mosaiq

    (@mosaiq)

    Works like a charme, thank you very much!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Change Text Position of Toggle Element’ is closed to new replies.