Shop Categories

X

Two-Line Menu Items

Home Forums Agama Pro Two-Line Menu Items

Topic Resolution: Resolved
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #15735
    Shawna Frede
    Participant

    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!

    #15754
    Zex
    Moderator

    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.
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.