header sidebar menu under cta button position issue

user_7805668 0
Viewed 28

I am adding a cta button under the desktop sidebar menu icon, I have checked with different position property but I am not getting the exact result, I have given position absolute but the issue is when I am checking in different screens size given cta button move from another side, I have attached the screenshot for reference, please help

enter image description here enter image description here

.sideMenu {
    width: auto;
    cursor: pointer;
    position: relative;
    left: 88px;
    background-color: #ffc20e;
    padding: 8px 12px 4px 12px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    top: 10px;
}
.register-login{
    transform: rotate(-90deg);
    background-color: #ffc20e;
    position: absolute;
    top: 118px;
    padding: 13.5px;
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    color: #000;
    z-index: 1;
    right: -83px;
    width: max-content;
}
        <div class="sideMenu"><i class="fa fa-bars" aria-hidden="true"></i>     
        <div class="register-login"><a href="#">HEADING / SUB HEADING</a></div>

]3]3

responsive-design css-position button html
1 Answers

You can use writing-mode: vertical-rl; instead of transform; rotate();

user_73151840
Related