- This topic has 11 replies, 2 voices, and was last updated 2 years, 8 months ago by Leo.
-
AuthorPosts
-
February 10, 2017 at 4:58 pm #277196Monika
Hi there,
Some of my menu items are very long and I would like to style them so that they are displayed in two lines. When I add a <br> to the navigation label, wording is displayed in 2 lines, but the line height is way too big…could you please help with this issue? Thank you.February 10, 2017 at 5:06 pm #277204LeoStaffCustomer SupportHi Monika,
This post might help: https://generatepress.com/forums/topic/css-line-break-menu/#post-202661
Let me know.
February 10, 2017 at 5:18 pm #277215MonikaYep – that did the trick! Thank you so much, Leo!
February 10, 2017 at 5:42 pm #277219LeoStaffCustomer SupportYou’re very welcome. Credit to Tom π
February 12, 2017 at 6:12 am #277713MonikaHi there, I’ve got another question in regards to the navigation set-up. Now that I have my navigation menu styled to display in two lines for desktop, how can I style it to display as just one line for mobile and iPad? As always, I appreciate your assistance. Thank you!
MonikaFebruary 12, 2017 at 6:43 am #277716LeoStaffCustomer SupportHi Monika,
Try wrapping the code Tom provided with this:
@media (min-width: 1024px) { /* CSS in here for desktop only */ }
Let me know.
February 12, 2017 at 8:28 am #277763MonikaHi Leo,
thank you for your reply. It’s not working yet. I don’t know much about coding, so this is how I updated the css style sheet (see below)… is this correct?… or do I need to add this around the <br/> code in the actual menu?….
@media (min-width: 1024px) {
.main-navigation .main-nav ul li a,
.menu-toggle, .main-navigation .mobile-bar-items a {
line-height: inherit;
padding-top: 10px;
padding-bottom: 10px;
}
/* CSS in here for desktop only */
}The only thing that changed after I added the code to the css style sheet was that the mobile menu is now closer together, there is no padding between each menu item… but each menu item is still displayed in two lines.
Monika
February 12, 2017 at 5:31 pm #277934LeoStaffCustomer SupportOn a second thought the code way actually won’t work since the
<br>
tags are inserted in the menu.I think the easiest thing to do is to create the exact same menu without the
<br>
tags and set it to your mobile menu πFebruary 12, 2017 at 6:39 pm #277948MonikaIs there a post or link to instructions on how I create a separate menu for mobile? I didn’t see an option anywhere… but maybe I just missed it? Thank you!
February 12, 2017 at 6:43 pm #277949LeoStaffCustomer SupportCheckout this page: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/
The menu you are using right now is probably set to Primary Menu. You can create the exact same menu without the break tags and set it to Slideout Menu for mobile.
Let me know if you need more info.
August 24, 2021 at 12:42 pm #1907217ChrisThis worked for me:
#primary-menu a:link { display: flex; justify-content: center; align-items: center; line-height: 1.3em; min-height: 100px; text-align: center; }
August 24, 2021 at 1:38 pm #1907249LeoStaffCustomer SupportGlad to hear π
-
AuthorPosts
- The topic ‘Top navigation menu items in two lines’ is closed to new replies.