Two-Line Menu Items

[Shawna Frede]

Hello, I was having trouble creating a custom menu item that fit two lines:

ORDER
PRODUCT AND SERVICES

I have tried using <br />, as well as adding different span classes to my menu item with css:

e.g.

span.menu-break {
display: block;
line-height: 25%;
text-align: center;
position: relative;
}

This has resulted in awkward spacing such as:

ORDER

PRODUCTS & SERVICES

I cannot seem to find a combination that gives me the results I’m looking for. If you could help me solve this, it would be appreciated.

Thanks!

[Zex]

Hello, Shawna!

Try next steps:

1. Insert the next line as the custom navigation label, from the Dashboard->Appearance->Menus menu.
<span class="custom-menu">ORDER</span> <br>PRODUCT AND SERVICES

https://prnt.sc/ofml4k

2. Then Insert the following code into Customizing->General->Additional CSS:

span.custom-menu{
top: 35%!important;
position: absolute;
}

https://prnt.sc/ofrl3c

Change the top value if needed.

I hope this will help you.

Regards

• This reply was modified 3 years, 11 months ago by Zex.

[Author]

Posts