- This topic has 25 replies, 4 voices, and was last updated 2 years, 9 months ago by Elvin.
-
AuthorPosts
-
June 10, 2021 at 9:31 am #1817764YingStaffCustomer Support
Hi John,
Your current menu item link has
43px
left and right padding which is set in the customizer.
https://www.screencast.com/t/1Pz94o4JBy1aYou can try increasing the padding at customizer > layout > Primary Navigation > Menu Item Width.
Let me know π
June 10, 2021 at 2:20 pm #1817945JohnHi Ying,
Thank you for your input.
I think you may be looking at the main site: https://karennespoli.com/We have been working away on a staging site trying to get a different structre:
https://wordpress-537289-1976741.cloudwaysapps.comLet me know if you can help with this!?
CHeers
JohnJune 10, 2021 at 3:21 pm #1817989YingStaffCustomer SupportWhen you add this CSS, the clickable area is as shown in the screenshot below:
https://www.screencast.com/t/85QB7XwpQYou can add some top/bottom padding as well to increase the clickable area, for example:
ul#menu-left>li a, ul#menu-right>li a { padding: 30px 40px; } }
So that the clickable area will be covering most part of the cloud:
https://www.screencast.com/t/nj6F5DPaNNHope it helps π
June 10, 2021 at 6:31 pm #1818061JohnOK great – thank you for that.
A couple of final things and then I am finished I promise!
If I want to add a hover zoom effect, how can I do that for the elements which already have the trasform property on them?
So this is the css I add:ul#menu-left>li:hover, ul#menu-right>li:hover { transform: scale(1.1)!important; transition: all .2s ease-in-out!important; }
But this makes the menu items which have been moved up/down using
transform: translateY(30%);
scale from a different point.And how can I fix the sub menu drop downs not to look all skewed?
June 10, 2021 at 7:35 pm #1818100ElvinStaffCustomer SupportBut this makes the menu items which have been moved up/down using transform: translateY(30%); scale from a different point.
Ah I forgot about that. In that case then we have to go back to using margins.
Remove these:
.menu-item-673 { /* About */ transform: translateY(-50%); } .menu-item-674 { /* Blog */ transform: translateY(30%); } .menu-item-676 { /* Book */ transform: translateY(0%); } .menu-item-677 { /* Resources */ transform: translateY(50%); } .menu-item-678 { /* Contact*/ transform: translateY(-50%); }
replace it with this:
.menu-item-673, .menu-item-677 { margin-top: -30px; } .menu-item-672, .menu-item-674, .menu-item-676, .menu-item-678 { margin-top:30px; }
Adjust it to your preference.
And how can I fix the sub menu drop downs not to look all skewed?
The skewed submenu text you see is because of having too much padding. See here – https://share.getcloudapp.com/YEuZpzP2
It’s not having enough space for a proper flow of text.
It’s from the CSS Ying provided but we can tweak it a bit to stop it from happening.
Here’s a modified version of Ying’s CSS:
ul#menu-left>li> a, ul#menu-right>li> a { padding: 30px 40px; }
June 15, 2021 at 10:19 pm #1823693JohnThnak you for these updates.
I have a couple of more questions.
1. Is it possible to reduce the space between the clouds?
I have tried playiing with the width and adding some margin:.menu-left-container,.menu-right-container { /* width of left and right menu */ width: 40%; } .menu-left-container { margin-left: 10px; } .menu-right-container { margin-right: 10px; }
But this doe snot achieve the desired result on different screeen sizes – either the logo gets squashed or the clouds don’t realign nicely.
I need the two clouds closest to the logo to be anchored at an equal distance to the logo – with the oether clouds tucked in closer.2. How can I reduce the gap betweeen the submenu items in the drop-down under resources?
Thanks again for all your incredible support!
June 15, 2021 at 10:26 pm #1823698ElvinStaffCustomer SupportThe gap is from this CSS:
ul.menu { /* alignment of menu */ justify-content: space-between; display: flex; flex-direction: row; margin: 0; }
The
justify-content: space-between;
means, “add a space between the menu items automatically”.If you must change this, we’ll have to assign separate justify-content property for the menus.
We need to modify this CSS:
ul.menu { /* alignment of menu */ justify-content: space-between; display: flex; flex-direction: row; margin: 0; }
into this:
ul.menu { /* alignment of menu */ display: flex; flex-direction: row; margin: 0; }
and then add this:
ul#menu-right { justify-content: flex-start; } ul#menu-left { justify-content: flex-end; }
June 16, 2021 at 1:43 am #1823824JohnThank you yet again!
And how can I reduce the gap between the submenu items in the drop-down under resources (or other submenu items that get added in the future?)
Cheers
johnJune 16, 2021 at 3:03 am #1823882ElvinStaffCustomer SupportThe gap you see is a combination of margin-top + padding values on the sub menu items.
You can reduce the margin top value of this CSS.
ul.menu li ul.sub-menu li { line-height: 1.1; margin-top: 20px; }
You can also decrease the padding by adding a separate padding value lower than 16px to this CSS.
June 16, 2021 at 3:35 am #1823904JohnAbsolutely wonderful.
Thank you for being so patient.
Really appreciated.
I will know so much now for the next one of these I try.
CHeers!June 16, 2021 at 7:30 pm #1824803ElvinStaffCustomer SupportNo problem. Glad to be of any help. π
-
AuthorPosts
- You must be logged in to reply to this topic.