Hello!
I’m trying to utilize the Layered Navigation element, but I’d like to have the links center aligned rather than left. I’ve tried a few things, but can’t quite seem to get it to work.
Any ideas?
Thanks!
Hello ComDoc,
Thanks for writing in! It seems that you are using a global block where you added the Layered Navigation element. Please edit your block and make sure that the the column contents is aligned to the center. You can use the alignment in the column settings.
And if you enable the Flexbox Layout option, make sure that the contents where aligned to the center vertically and horizontally.
Hope this helps.
1 Like
@runel, thanks for the reply!
Yep, that element is inside an Off Canvas element nested within a Global Block. Is there a better way of doing it? I wanted to be able to add my branding/logo above the links and some additional content underneath; buttons, contact information, cart widget, etc.
I figured the Global Block was a good way, but if there is a better route please let me know.
In regards to your instructions above:
That’s actually something I had already tried and was the closest I could get except it appears that the width of the Layered Navigation container gets set to the width of the top level links. All subsequent links don’t seem to fit as they are a bit longer and either go multiple lines (undesired) or overflow.
Also, I tried explicitly setting the width of the Layered Navigation element, and while that seems to fix that particular issue, the items then become left aligned again.
I’ll reply with login details if you want to check it out.
Thanks!
Hey @comdoc_marketing,
Can you provide us a screenshot of what you want to achieve? Right now, I believe you’re wanting to do something like this:
If that is the case, set the Link’s Text Margins to auto.
Hope that helps.
1 Like
Thanks for the reply, @christian!
Yes, your sample image is what I’m trying to achieve.
I went ahead and set the margin to “auto” for the link text, but it made no difference. Did you mean for that in addition to the settings @ruenel mentioned above? If so, I went ahead and did those with the link text margins set to “auto” and the results are the same as I was experiencing:
The top level links do in fact get centered, but the container appears to only adapt to the width of those links. The sublinks are a bit longer and get forced onto multiple lines and, on some, the overflow is hidden.
Specifying a width for the element fixes that but forces the links back to being left aligned.
I think you got the wrong margin, Christian is referring to the Text Margin option.
I did go ahead and set that to auto left and right.
Now to your sub-menu issue, your submenus are lengthy it’s normal for those texts to wrap on a narrow screen.
So what you need to do with that is set your links Text Align to center, so the wrapping text will stay center.
If you don’t want the wrapping to happen, then you need to decrease your submenu font-size or decrease your off-canvas side padding to give more room to your menu.
Hope it helps,
Cheers!
1 Like
@friech, thanks for the help!
Apologies, I didn’t realize that there were two margin settings for that element and was obviously setting the wrong one.
@christian and @ruenel, thanks for all your help!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.