Archived topic

Align all items in OC panel to the right

1 reply · Started by Thierry on October 3, 2022

Viewing posts 1–2 of 2

October 3, 2022 at 8:04 am #2361658

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.

October 3, 2022 at 1:32 pm #2361961

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.

This archived topic is closed to new replies.

Start building better websites today.