-
I opened a topic and closed, not realizing that the two line menu would also affect the mobile menu.
I figured I would ask 4 questions to keep it concise
1)How can I make the desktop menu two lines, but the mobile menu 1 line?
see screenshots Desktop and Mobile
2)How can I center the words in each menu item? So that the upper and lower words are both centered (on desktop only)
3)How can I make the hover color take up the entirety of the menu on desktop? On some menu items, the hover color only covers a portion – there are gaps on top and bottom. See screenshot Here
4)how can I remove the drop-down arrows? I tried under generatepress menu, but it doesn’t work.
Thank you for your great help, as always!
-
Hi there,
For #1 and #2, can you remove the <br> tag you added to the menu so we can take another look at a different approach?
For #3 and #4, try adding this CSS:
.sf-menu li:first-child a, .sf-menu li:last-child a { padding-top: 24px; padding-bottom: 24px; } .sf-menu li .dropdown-menu-toggle span { display: none; } -
Thank you, added the .css for #3/#4 and it worked, thank you.
I’ve also removed the <br> tags from all menu items.
Thank you! -
Sorry for some reason i could not edit the last entry.
Added the .css and it seemed to work, but then removed the <br> tags now there is a brown gap at top and bottom of all menu hover items.
-
Try changing Alvind’s first CSS from this:
.sf-menu li:first-child a, .sf-menu li:last-child a { padding-top: 24px; padding-bottom: 24px; }to this:
.main-nav .sf-menu >li >a { padding-top: 24px; padding-bottom: 24px; }As for #1 and #2, I think you can create 2 menus at appearance > menus, assign 1 menu that includes the <br> tag to primary navigation, and assign the other menu without <br> tag to the off canvas menu.
-
I created the off canvas menu so that’s fine.
and added the .css you provided. The current tab/color is now short, as are other items in the menu. as in the hover color doesn’t go all the way to top/bottom.
also the words are not centered in each menu item the are aligned right instead of centered.
Thank you.
-
sorry, meant to say menu items are aligned left, not right.
-
A lot has changed, so let’s start fresh.
First, remove this CSS:
.main-nav .sf-menu >li >a { padding-top: 24px; padding-bottom: 24px; } .sf-menu li .dropdown-menu-toggle span { display: none; }Then add this instead:
.sf-menu li.menu-item-6491 a .dropdown-menu-toggle span { display: none; } .sf-menu li.menu-item-864 a .dropdown-menu-toggle span { opacity: 0; } .main-navigation .main-nav ul li.menu-item-6021.current-menu-item > a, .main-navigation .main-nav ul li.menu-item-6021:hover > a { padding-top: 24px; padding-bottom: 24px; }Let me know if that works!
-
unfortunately the words are not centered on each menu – i’d like the top and bottom to be both centered. I guess i could add a <center and </center> code to each menu item? should i do that?
-
The words are not centered (left to right centered)
I’d like both the first and second line in each menu item to be centered if possible.
-
Add this CSS as well:
.sf-menu li > a { display: flex; align-items: center; justify-content: center; text-align: center } -
That fixed some of them – some menu items are centered others are not.
Maybe has to do with items not being centered having dropdown menus – or having sub-menu items?
-
Can you recheck the CSS you added in the Customizer? It looks like there’s a
*character at the beginning of the code that’s preventing it from parsing, which is why it isn’t working. The CSS itself should work once that’s removed. -
That worked, Thank you!
-
You’re welcome!
- You must be logged in to reply to this topic.