Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 21, 2020 at 10:22 am #1254597
    sung789

    Hi,

    I use enfold with demo voyage

    I have an horizontal menu.
    How can I have the menu entries to be displayed on two lines.
    In other words, instead of having:
    Our new services | Our nice staff

    I would like to have

    Our new | Our nice
    Services | Staff

    I want to have to have this to avoid dispplaying the whole menu on two lines

    Thanks for your answers

    • This topic was modified 4 years, 2 months ago by sung789.
    October 21, 2020 at 12:58 pm #1254636
    Nikko

    Hi sung789,

    Please try to add this CSS code in Quick CSS, located in Enfold > General Styling:

    #avia-menu .menu-item {
    max-width: 140px;
}

#avia-menu .menu-item > a {
    height: auto;
    line-height: 1.3;
    padding: 13px;
}

    just adjust the max-width value.
    Also, I noticed that there are too many menu items, you can just make a dropdown or use a mega-menu since with CSS alone it would be hard to make a good looking menu with many menu items, also limit the number of text in each menu item.

    Best regards,
    Nikko

    October 21, 2020 at 1:14 pm #1254646
    sung789

    Thanks for the code.
    I have just inserted.

    There is a lot of space between the two line when the menu entry is divided

    October 21, 2020 at 4:26 pm #1254697
    Nikko

    Hi sung789,

    I have fixed the code, the greater than sign has been changed to (without spaces)

    & g t ;

    I would really suggest grouping some of the menu items into dropdowns or mega menus.

    Best regards,
    Nikko

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.