Dual-line menu

fredvt

I want to create meaningfull menu labels in Betheme. That results in longer labels than in total fit on a screen. Therefor I would like to split the labels into 2 lines. I found a hint on the support forum to insert a <br> in the label. That works BUT:

- There is a lot of white space between the lines. How can I adjust the space between the lines for that menu?

- How to center the label (both lines)

Bryan

Hi,
maybe with custom css, we can help you but please send us a link to this page.
We will see if it will be possible with css.
thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

fredvt

Here is the URL: www.solidifytraining.com

Bryan

Okay but you havent inserted the <br /> in the menu. What should we test?

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

fredvt

Now I did, sorry for the misundestanding

Bryan

.menu-highlight #Top_bar .menu > li > a span:not(.description) {
    line-height: 25px !important;
    text-align: center !important;
}

This will missalign the logo so you will have to adjust its size and vertical padding in theme options>global>logo

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

fredvt

That works splendidly!!!.

Thanks very much

fredvt

Unfortunately the solution introduced  problem.

The sticky menu is a bit of a mess now. In "sticky" mode, the menu flows into the text below.

Bryan

Use this css as well

#Top_bar.is-sticky .menu > li > a span {
    line-height: 16px !important;
}

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

fredvt

Unfortunately that didn't help. 

In sticky mode it is not what to be expected

fredvt

I found more or less a solution:

- I increased the height of the sticky menu. Now the text stays inside the menu bar but

  the line spacing is different from the non-sticky menu

- I increased the line height of the normal menu

This is what my css paret looks like:

.menu-highlight #Top_bar .menu > li > a span:not(.description) {

    line-height: 30px !important;

    text-align: center !important;

}

#Top_bar.is-sticky .menu > li > a span {

    line-height: 10px !important;

}

#Top_bar.is-sticky #logo img { max-height: 70px; }

#Top_bar.is-sticky { height: 90px; }