[Resolved] Fixing width between elelemnts in Nav

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

Home Forums Support Fixing width between elelemnts in Nav

Viewing 11 posts - 16 through 26 (of 26 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;
    }
    #1823693
    John

    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!

    #1823698
    Elvin
    Staff
    Customer 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;
    }
    #1823824
    John

    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

    #1823882
    Elvin
    Staff
    Customer Support

    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.

    #1823904
    John

    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!

    #1824803
    Elvin
    Staff
    Customer Support

    No problem. Glad to be of any help. πŸ˜€

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