[Resolved] Positioning the menu on Off Canvas Panel

Home Forums Support [Resolved] Positioning the menu on Off Canvas Panel

Home Forums Support Positioning the menu on Off Canvas Panel

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1536948
    Huseyin

    Hi Team

    Need help on Positioning the menu on Off-Canvas Panel in the center, I think after the major update this happened, didn’t notice it until today.

    #1536973
    Elvin
    Staff
    Customer Support

    Hi,

    The off-canvas panel menu seems to be horizontally aligned center already on my end as shown here:
    https://share.getcloudapp.com/YEuQgl96

    To clarify: Perhaps you meant vertical center? Let us know. ๐Ÿ™‚

    A wise man once said:
    "Have you cleared your cache?"

    #1538328
    Huseyin

    yeah sorry I mean vertical center

    #1538332
    Elvin
    Staff
    Customer Support

    Add this CSS:

    nav#generate-slideout-menu {
        display: flex;
        align-items: center;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1538338
    Huseyin

    Thanks, Elvin,

    The CSS code has done the job.

    #1538347
    Elvin
    Staff
    Customer Support

    Nice one. No problem. ๐Ÿ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #2151656
    Ricardo

    Hi,

    I tried this css and it makes all the content vertically centered, including the x icon. How can I center the menu items without the x icon?

    Thanks!

    #2151729
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to your site where we can see the issue ?

    #2151739
    Ricardo

    Hi David,

    You can check here:

    https://wordpress-262052-2437317.cloudwaysapps.com

    Maybe I didn’t explain properly. The issue is that if you consider that the x icon is the first element it won’t look centered. The area to be centered should be the area of the menu items, excluding the x icon.

    Regards,
    Ricardo

    #2151762
    David
    Staff
    Customer Support

    Try adding this CSS:

    @media (max-width: 768px) {
        #generate-slideout-menu.do-overlay .slideout-exit {
            position: fixed;
        }
    }
    #2151785
    Ricardo

    Thanks a lot David.

    It looks wonderful.

    Regards,
    Ricardo

    #2151788
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.