[Support request] Fixing width between elelemnts in Nav

Home Forums Support [Support request] Fixing width between elelemnts in Nav

Home Forums Support Fixing width between elelemnts in Nav

Viewing 5 posts - 16 through 20 (of 20 total)
  • Author
    Posts
  • #1817764
    Ying
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #1817945
    John

    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

    #1817989
    Ying
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #1818061
    John

    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?

    #1818100
    Elvin
    Staff
    Customer Support

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

    A wise man once said:
    "Have you cleared your cache?"

Viewing 5 posts - 16 through 20 (of 20 total)
  • You must be logged in to reply to this topic.