-
Posts
-
Hi,
We are experiencing a difficulty in harnessing the menu items.As you will see on our website, some of our menu items have elements of text that are a little too long (items 2 and 3, starting from the left). We tried to rephrase it but we cannot shorten it more than this. Trying to modify the width of each menu item box does not work either as it modifies the width of all the boxes. Besides, if we do reduce the width of the boxes, the second line goes too far below…
What we would like to do is be able to customize the 2 menu item boxes without an impact on the other boxes. Is that feasible? If so, could you send us the CSS code that would enable us to do so?
Thanks very much in advance
Hi Patrick,
Can you try adding this CSS code:
#header #menu-item-3210, #header #menu-item-3503, #header #menu-item-7277 { max-width: 120px; } #header #menu-item-3210 > a, #header #menu-item-3503 > a, #header #menu-item-7277 > a { line-height: 1.2 !important; display: flex; align-items: center; }Best regards,
NikkoHi, Nikko
Thanks for your fast and precise answer, I appreciate your reactivity!I tried adding the code you provided, it solves half of the problem: it does make the boxes narrower but also creates a second or even a third line if the text is too long. The problem is, the space between the 2 lines is much too wide and the second line drops far down below, under the black horizontal line. How can we reduce the space between 2 lines of text?
Thanks for your help
Hi Patrick,
You’re welcome, the issue you’re referring should be addressed by the second code block I gave:
#header #menu-item-3210 > a, #header #menu-item-3503 > a, #header #menu-item-7277 > a { line-height: 1.2 !important; display: flex; align-items: center; }If it’s not working please check that the character between #menu-item-3210 (as well as others below it) and a is the greater than symbol and not & g t ; (without spaces).
Best regards,
Nikko
- The topic ‘Flexible menu items?’ is closed to new replies.