Dual-line menu

fredvt · January 2018

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 · January 2018

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

fredvt · January 2018

Here is the URL: www.solidifytraining.com

Bryan · January 2018

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

fredvt · January 2018

Now I did, sorry for the misundestanding

Bryan · January 2018

.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

fredvt · January 2018

That works splendidly!!!.

Thanks very much

fredvt · January 2018

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 · January 2018

Use this css as well

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

fredvt · January 2018

Unfortunately that didn't help.

In sticky mode it is not what to be expected

fredvt · January 2018

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; }

Dual-line menu

Comments