Submenu wrap text issue

  • Resolved Kenyon

    (@coachksutt)


    1 month, 1 week ago

    My submenu across my pages is displaying differently. The “organizational services” item keeps wrapping funny… usually in the middle of the word organizational instead of at the space. I’ve noticed the issue occurring on the front page and the “individual services” pages. I’m not sure how to correct this. I’m new to this and don’t know CSS.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • The problem is: the longest word is wider than the submenu.

    Try this, it will remove the wrapping of submenu items at all:

    .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    min-width: max-content !important;
    }

    Add the CSS code to the Customizer > Custom CSS.

    To wrap between the words, set the submenu width to a value that fits the word length, i.e. change the max-content in the above code with 220px :
    min-width: 220px !important;

    This is a very strange side effect of a group block. The simplest solution I have just found is foglendering individual CSS code:

    .wp-block-navigation-submenu {
     box-sizing: unset;
    }
    Thread Starter Kenyon

    (@coachksutt)

    Thanks @cyrfer and @threadi! I’m updating to see which I like better. I appreciate the input and help.

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