[Support request] Align all items in OC panel to the right

[Thierry]

Hi,

please look at https://gen.leadway.be/
In the Off Canvas Panel, how can i align

everything

(the exit toggle “X”, the logo, the navigation items and the social icons) to the right?
I’d like the logo, the navigation items and the social icons to be 70px distance from the browser border.
(Logo and social icons were added with hooks)

I’d like the exit toggle “X” to be closer to the border of the browser. I actually want it positioned exactly where main mobile menu toggle is located in the header. So it will come exactly on top of it. (Just like they did here: https://parachutedesign.ca/)
That “X” is just the standard Off Canvas Panel exit icon.

Ideally, i need to make sure that padding from the right browser border is consistent depending on screensizes. (desktop, tablet, mobile..)

Would appreciate your help. Thank you.

[Ying]

Hi there,

Try this CSS:

#generate-slideout-menu.main-navigation .inside-navigation {
    justify-content: flex-end;
    padding-right: 70px;
}

#generate-slideout-menu.main-navigation .inside-navigation ul li a {
    text-align: right;
}

#generate-slideout-menu button.slideout-exit.has-svg-icon {
    text-align: right;
    margin-right: -50px;
}

And remove the margin you added to the logo and LinkedIn button.

[Author]

Posts