Fixing width between elelemnts in Nav

Hi John,

Your current menu item link has43px left and right padding which is set in the customizer.
https://www.screencast.com/t/1Pz94o4JBy1a

You can try increasing the padding at customizer > layout > Primary Navigation > Menu Item Width.

Let me know :)

Hi 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.com

Let me know if you can help with this!?
CHeers
John

When you add this CSS, the clickable area is as shown in the screenshot below:
https://www.screencast.com/t/85QB7XwpQ

You 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/nj6F5DPaNN

Hope it helps :)

OK 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?

But 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;
}

Thnak 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!

The 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;
}

Thank 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
john

The 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.

Absolutely wonderful.
Thank you for being so patient.
Really appreciated.
I will know so much now for the next one of these I try.
CHeers!

No problem. Glad to be of any help. :D