Drop down menu text alignment

[Stanleypuss]

Hello Support,

I have an issue with the text alignment on the navigation menu drop-downs, On my Mac they look perfect all aligned to the left:

But when I view same menu on a PC, the text is aligned left and centred?

I have selected text aligned left in the Pro Builder, but has no effect?

I have also used custom css from this post thinking it would work:

Dropdown Menu Alignment

But changed css to read:

.desktop .sub-menu li a {
text-align: left !important;
}

But again it had no effect when viewing the menu on a PC?

Can you offer any advice please?

thank you

Ashley

[thai]

Hi There,

I visit this website and the dropdown menus are left align on my end:

http://www.erith.kent.sch.uk/

It seems you’re working on another website URL. Can you provide us?

Thank you.

[Stanleypuss]

Apologies@thai

Here is the url for the new menu with the mis-aligned text on the drop-down menus:

http://www.erith.kent.sch.uk/new-navigation/

many thanks

Ashley

[friech]

Hi Ashley,

The issue is only happening on IE, please set your sub links right margin to auto

Hope it helps,
Cheers!

[Stanleypuss]

Hello Frisch,

have updated side links right margin to auto, but when viewing on IE still getting menu items centred?

Is there anything else I can try to fix issue, menu looks great except for that.

many thanks

Ashley

[thai]

Hi There,

To fix this issue, please add this custom CSS under Theme Options > CSS:

.sub-menu .x-anchor-menu-item {
    align-items: flex-start;
}

Hope it helps

[Stanleypuss]

Hello Thai,

it worked, thank you, but now have issue of menu items breaking out of the drop down menu, as shown in screenshot below.

anything that can be done to fix that?

Sorry about this.

many thanks

Ashley

[thai]

Hi There,

Please update the previous CSS to this:

.sub-menu .x-anchor-menu-item {
    align-items: flex-start;
}
.sub-menu .x-anchor-menu-item .x-anchor-content {
    width: 100%;
}

Let us know how it goes!

[Stanleypuss]

Hello Thai,

updated the CSS and now have original problem of the menu items not aligning to the left, with some items centred?

sorry, any other CSS that will help?

thank you

Ashley

[basanta]

Hi There,

Thanks for the screenshot, But I can see the menus are looks fine, all are left aligned.

Let us know if you have fixed the issue?

Thanks

[Stanleypuss]

Hello Basanta,

Are you using IE (Internet Explorer) on a PC?

In Firefox (PC and Mac) and Safari (Mac), menu looks fine, but on IE on a PC menu items are both aligned left and centred?

many thanks

Ashley

[friech]

Hi Ashley,

Sorry, for the confusion. Since IE is very hard to debug within the inspector. Would you mind providing us login credentials in a “secure note”, so we can take a closer look at your navigation menu configuration?

Thanks,

[christian]

Hey Ashley,

Your site takes a very long time to load on my end. When it loaded though, you’re now using the Classic Header in your page (see secure note). Please switch to the Pro header so we could check the issue.

Thanks.

[Stanleypuss]

Hello Christian,

the url: http://www.erith.kent.sch.uk/new-navigation/ uses the new Pro Header builder, which has the menu item alignment issues.

The main live site: http://www.erith.kent.sch.uk/ does still use the Classic builder, but I can’t switch the Pro Header to the live site until it works.

Is it not possible to de-bug the IE Sub-menu text alignment issues from the http://www.erith.kent.sch.uk/new-navigation/ url?

best wishes

Ashley

[christian]

Hey Ashley,

I’ve set the Horizontal Content Flex Layout of your Sub Links to Start and it fixed the issue.

It also will also not breakout.

Hope that helps.

[Stanleypuss]

Thank You Christian,

and also highlighting the edits you did, so I understand in future how to sort alignment issues.

best wishes

Ashley

[rad]

You’re most welcome!