Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1368975

    Dear team,
    on our page below I have a top navi item which shall be with a line break – i added under “design/menu” a <br /> as proposed in another post

    Allgemeinmedizin /<br />Naturheilkunde

    It comes now with line break, but I want the second line also with white background. Now it overlaps the header image.

    pls see below.

    How can I modify acc.?

    thx a lot & best regards Tilman

    #1369015

    Hey Tilman,
    First ensure that you have enabled the custom class option for menu items in the Screen Options
    Then wrap the second word in your menu item with a span and the custom class line-break like this:

    Allgemeinmedizin /<span class="line-break">Naturheilkunde</span>

    and add the custom class line-break-item to the menu item:
    add_custom_class_to_menu_item_for_line_break.png
    Then add this CSS to your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #avia-menu .line-break-item a {
    	line-height: 40px;
    	transform: translateY(18%);
    }
    .line-break-item .line-break {
        display: block;
    	line-height: 0px;
    }
    

    Now the menu item will be two lines and centered:
    2022-10-16_014.png
    I was testing with the default settings for the 2017 Demo, since your settings may be a little different you can adjust the CSS to place the menu text where you wish, if you have trouble link to your page with an admin login so we can assist.

    Best regards,
    Mike

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