Top alignment modal navigation links and sublinks

Hi. I added a modal navigation. I want my text left centered and top, but links and sublinks seem to be centered some how with the modal box. How can I get my text / sublinks to stay at the same place from the top and not jump and align to the center of the page. I tried facebook PRO group, but could´n find an answer. So the recommend CSS.
Uploaded an image but in the facebook group I tried to explain it with video. I have tried various flex options for both container, nav bar and modal links with no success.

Second. And this is not important right now since my menu is left aligned, but is there a way if the links where to be centered align that the sublink indicator don’t push the text to the left. Would prefer all text align center equally and not be affected by the subindicator and back link arrow
https://www.facebook.com/groups/ThemecoUsers/1151814498323398/?comment_id=1151815568323291&reply_comment_id=1151849748319873&notif_id=1562317801550111&notif_t=group_comment

Hello @carbon14,

Thanks for writing in!

The Off canvas area display the contents or the menus at the middle because of the equal padding (calc(1.5em * 1.5) taken from the close size shown in the image below)

If you want it to be left align, find the “Customize” tab

and insert this inline element css:

$el.x-off-canvas .x-off-canvas-content {
  padding-left: 10px;
}

The back text is not aligned with the rest because the arrow is actually part of the text ← Back. It is not an icon. If you want the enu item text to be align, you will need this custom css:

a.x-anchor.x-anchor-layered-back.x-active {
    margin-left: -15px;
}

Feel free to align the back text by adjusting the margin.

I am not sure you understood my problem.
1: It is not a off-canvas nav. but Modal.
2: My problem is that the submenu/sublinks align at the center of the screen making my menu jump and align to center. I just want the text to be aligned at the top/ same position from top when you click thought the navigation. Or, sublinks could dropdown instead of new page.

My meny is aligned to the left. I did that with flex. It is the top alignement that is my issue :). Check out that attached screenshot again, and you see how the text position is. Aligned to the center

Hey @carbon14,

Sorry for the confusion. I checked your modal and the menu items are left aligned. What OS and browser are you using? If you’re not sure, you can visit sites like https://supportally.com/ and give us the Operating System and Browser details.

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.