- This topic has 7 replies, 2 voices, and was last updated 5 years ago by David.
-
AuthorPosts
-
April 10, 2019 at 10:30 am #865310Barbara
Hi,
I’d like to have a menu with permanently expanded sub-menus (so they are visible and accessible with one click).
After they are expanded, I would also like the little arrows to the right of the main menu items to dissappear, as well as the light shadow border around sub-menu items.Can you please give me a CSS code to achieve this?
Thank you.
Kind regards,
BarbaraApril 10, 2019 at 12:09 pm #865377DavidStaffCustomer SupportHi there,
try this CSS:
.dropdown-click #site-navigation.main-navigation ul ul { visibility: visible; } #site-navigation.main-navigation ul ul { box-shadow: none; float: none; left: initial; opacity: 1; pointer-events: initial; height: auto; } #site-navigation .menu-item-has-children .dropdown-menu-toggle { display: none; }
April 10, 2019 at 12:43 pm #865400BarbaraHi David,
Thank you, that works nicely.
Just two more things:
1. How can I make only main menu bold, without the setting affecting sub-menus?2. Menu in tablet and mobile versions is not centered anymore and also the menu is not expanded on them.
Here’s the screenshot: https://screencast.com/t/blixFQLEjyJg
Can I get a code to fix this too please?A side question: Can all the extra CSS slow down my site? It doesn’t seem like it does but just wonder if it’s important to keep it to a minimum.
Thank you.
April 10, 2019 at 2:36 pm #865452DavidStaffCustomer Support1. This CSS will change the font weight of the parent menu items:
.main-navigation ul li.menu-item-has-children > a { font-weight: 700; }
2. I edited the CSS above so – by removing the @media query it will apply to all devices. It will fix the centring as well.
That amount of additional CSS won’t have an impact on your site speed.
April 10, 2019 at 11:01 pm #865676BarbaraHi David,
Thanks, that works except for the two bottom menu items that have no sub-menus – these are not affected by this CSS but I’d like to have them bold too:
https://screencast.com/t/BSCPvFZ5gkHcAnother thing I see now: I’d love to be able to adjust/change the spaces (height) between main menus and sub-menus in a way that there would be more space above main menu items and less space bellow them.
A screenshot for a clearer picture of the spaces I mean:
https://screencast.com/t/ti8Y5zA5A0RF
I can’t seem to do this with customisation options since it creates same amount of space everywhere. I hope what I’m asking for isn’t too complicated!Thank you!
April 11, 2019 at 3:49 am #865889DavidStaffCustomer SupportSo use this CSS instead, it will cover all parent menu items and fix the spacing:
.main-navigation ul.menu>li>a { font-weight: 400; padding-top: 20px; padding-bottom: 2px; }
You can adjust the padding values to suit.
April 11, 2019 at 10:53 pm #866770BarbaraPerfect, thank you!
April 12, 2019 at 2:34 am #866890DavidStaffCustomer SupportGlad to be of help.
-
AuthorPosts
- You must be logged in to reply to this topic.