Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #29493

    Hello,

    How can I alter the width of each item individually in the main navigation menu or make a menu item containing multiple words appear on more than one line?

    For example, instead of…

    “Investment Banking”

    it would be…

    “Investment

    Banking”

    Thank you,

    Andrew

    #140808

    Hi Andrew

    I would try the following, assuming you are using the bottom nav area:

    – within Appearance > Menus in your main menu, open the screen options tab at the top of the screen.

    – check the option for showing advanced menu properties CSS Classes

    – toggle open each menu item and add unique names to each menu item, eg. menu-investment-banking

    – save your menu

    Then by whichever CSS method you use, something like the following might be a good start. An issue is that the widths will be fixed, and you’ll have to set it for each instance of the forced smaller widths, by duplicating the last declaration block of the code below for each new double-lined list item:

    #header_main_alternate.container_wrap,
    #header_main_alternate.container_wrap .container,
    .menu-main-menu-container,
    ul#menu-main-menu {
    height: 40px!important;
    }

    ul#menu-main-menu>li,
    ul#menu-main-menu>li>a {
    height: 40px!important;
    line-height: 40px!important;/*change this line-height to suit the single word nav - smaller number will raise it upward */
    }

    ul#menu-main-menu>li.menu-travel-management > a {
    width: 100px!important;
    line-height: 16px!important;
    padding-top: 4px!important;
    height: 40px!important;
    }

    cheers

    Darryl

    #140809

    Hi Andrew,

    I think it may be done with CSS, can you post the link to your website please?

    Regards,

    Josue

Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Header Navigation Item Width/Multiple Lines’ is closed to new replies.