[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 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #1814266
    John

    Hi there,

    I have had some great help setting up this menu on this site (thank you!):
    https://karennespoli.com/

    I have noticed that it does not seem balanced on either site of the logo in the center.
    So the 3 cloud/menu items on the right hand side are closer to the logo.
    And there seems to be a slightly bigger gap between those 3 clouds than the 3 on the left hand side.

    Any suggestions on how I can even this out?
    I have tried multiple things which have not worked!

    Cheers
    John

    #1814297
    Elvin
    Staff
    Customer Support

    Hi John,

    I have noticed that it does not seem balanced on either site of the logo in the center.
    So the 3 cloud/menu items on the right-hand side are closer to the logo.
    And there seems to be a slightly bigger gap between those 3 clouds than the 3 on the left-hand side.

    The right side is closer to the logo because it occupies more horizontal space. This is the case because the menu items on the right side have more characters than the menu items on the left side.

    It’s quite tricky to evenly distribute as the HTML structure is not conducive to evenly distributing the menu item elements because we’re simply forcing the logo to the center of the header with CSS position absolute rather than having it structured in an actual split menu structure. While we can try to salvage the current layout by putting margin-left value on the first menu item, it’s going to be tricky to figure out the best value for all viewport.

    The alternative to properly distribute this will be quite tedious because this will require you to modify how the header is laid out.

    If you’re willing to consider it, try something like what I provided here – https://generatepress.com/forums/topic/split-menus-into-two-separate-lists/#post-1519913

    Which, to put simply, is creating 2 menu places in between the logo and then style it in a column-like manner with equal columns for both left and right menu (example: 40% left -20% logo – 40% right or 33.33% left – 33.33% logo – 33.33% right ).

    We then set the left column to “align-right” and set the right column to “align-left” so the menu item’s distance from the logo will be always equal regardless of the screen size.

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

    #1814451
    John

    OK – I appreciate that this might be trickier than the application of margin (which I did try!)

    I have created a staging site to try and work this out – I have added the snippet and the basic CSS.
    https://wordpress-537289-1976741.cloudwaysapps.com/

    As you will see, there seems to be issues as every page seems to show.
    I do need to keep the cloud behind the Menu item title.

    Can you make out what needs to be done next with the jumbled mess that has been created?
    I did delete all CSS aside from what you added, but that doesnt not seem to make much difference – just changes positions slightly and remeoves the cloud and logo (it is an SVG and needs to be given width etc to show)

    And ideas would be appreciated!
    Cheers

    #1814587
    David
    Staff
    Customer Support

    Hi there,

    can you provide a login so i can get past the coming soon page.

    #1814629
    John

    Apologies…I forgot to switch off the coming soon for the staging site.
    https://wordpress-537289-1976741.cloudwaysapps.com/

    #1814836
    David
    Staff
    Customer Support

    Am i looking at the right site ? As i am seeing A LOT more menu items, all the ones with the cloud background are to the left of the logo, and there is a separate menu to the right ( Without clouds )

    #1815467
    John

    Yes – it is the right site – and that is what has me confused.
    I followed Elvins linked instructions above – and I have 4 menus in operation.

    Off Canvas for mobile –
    Bottom Left – for menu items in the footer
    Before Logo and After Logo – as per Elvins instructions.

    not sure what to do next with this.

    #1815551
    Elvin
    Staff
    Customer Support

    The next step would be to split the menu items into 2 menus.

    3 menu items to the left, 3 to the right.

    We then style it with CSS:

    Before adding this, make sure you remove the CSS styling that absolute positions the logo.

    It’s this CSS:

    @media(min-width: 1025px) {
    .inside-header>.site-branding,
    .inside-header>.navigation-branding,.inside-header>.site-logo,.site-branding-container,
    #site-navigation .navigation-branding .site-logo,#sticky-navigation .navigation-branding {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    }

    And then add something like this:

    @media(min-width:1025px){
        nav#site-navigation { /* hide the primary menu */
            display: none;
        }
        .inside-header.grid-container { /* center the items */
            margin: 0 auto;
        }
    
        .menu-left-container,.menu-right-container { /* width of left and right menu */
            width: 40%;
        }
    
        .site-logo{ /* width of logo */
            width: 20% ;
        }
    
        .menu-left-container ul.menu { /* alignment of left menu */
            justify-content:flex-end;
        }
    
        .menu-right-container ul.menu { /* alignment of right menu */
            justify-content: flex-start;
        }
    }

    This will be the expected result – https://share.getcloudapp.com/9ZudA6vn

    In this image, you can see that the distance between g of Blog on the left-side and the B of the Book on the right-side is equal.

    You then re-add the cloud backgrounds.

    These would be the selectors but I’m not sure what’s the whole CSS involved for the alignment, etc. Adjust to your preference. 🙂

    @media (min-width: 1025px){
        ul#menu-left>li,
        ul#menu-right>li{
            position: relative;
            padding-left: 43px;
            padding-right: 43px;
            line-height: 70px;
        }
    	ul#menu-left>li:first-child:before,
    	ul#menu-right>li:first-child:before {
    	    content: '';
    		background-image: url(https://cdn.shortpixel.ai/spai/q_lossy+ret_img/https://wordpress-537289-1976741.cloudwaysapps.com/wp-content/uploads/2021/05/Cloud-11.png);
    	    position: absolute;
    		top: 45%;
    		left: 55%;
    		transform: translate3d(-50%, -50%, 0);
    		width: 100%;
    		height: 100%;
    		display: block;
    	}
    
    	ul#menu-left>li:before,
    	ul#menu-right>li:before
    	{
    		content: '';
    		position: absolute;
    		top: 45%;
    		left: 55%;
    		transform: translate3d(-50%, -50%, 0);
    		width: 100%;
    		height: 100%;
    		display: block;
    		background-image: url(https://cdn.shortpixel.ai/spai/q_lossy+ret_img/https://wordpress-537289-1976741.cloudwaysapps.com/wp-content/uploads/2021/05/Cloud-31.png);
    		background-size: contain;
    		background-repeat: no-repeat;
    		z-index: -1;
    	}
    }

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

    #1815641
    John

    ok great – thanks for taking so much time to delve into this.
    I have been making adjustments and hacking through it and getting closer to where I want it to be.

    I have found an issue when I add items to the sub-menu – it blows out the shape/margins width completely.
    Any ideas on how best to fix that?

    Cheers!

    #1815709
    Elvin
    Staff
    Customer Support

    Try this out.

    @media (min-width: 1025px){
    ul.menu li {
        list-style: none;
    }
    
    ul.menu li:hover ul.sub-menu{
        position: absolute;
        display: block;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        opacity: 1;
        transition-delay: 150ms;
        pointer-events: auto;
        height: auto;
        overflow: visible;
    }
    
    ul.menu li ul.sub-menu {
        display: none;
    }
    
    ul.menu li ul.sub-menu li {
        line-height: 1.5;
        margin: 20px;
    }
    }

    See it in action here – https://share.getcloudapp.com/nOuPNyA7

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

    #1815830
    John

    Ok great – making good progress thanks!

    A few more questions. And I am aware I might have fiddled with the css somewhere a little too much!

    1. How can I make the right and left hand side be an equal distance from the logo? I was playing around with this

     .menu-left-container ul.menu { /* alignment of left menu */
            justify-content:flex-end;
        }
    
        .menu-right-container ul.menu { /* alignment of right menu */
            justify-content: flex-start;
    }

    and some margin – but would really love you to give me the correct way of doing this so it aligns correctly on different devices.

    2. Is it possible to have the clouds be clickable too (as is the case on the main site https://karennespoli.com/)

    3. How do I increase the gap between items in the sub-menu to make them appear similar to the main site?

    Thanks again for all your detailed support.
    It really is awesome.

    #1816841
    Elvin
    Staff
    Customer Support

    For #1:

    The CSS should’ve been enough unless you didn’t remove the CSS that turns the logo position: absolute;. I believe I’m mentioned that on my reply here – https://generatepress.com/forums/topic/fixing-width-between-elelemnts-in-nav/#post-1815551

    It also won’t look equal if your cloud BGs are not evenly sized.

    For #2:

    Sure. Remove the padding on this CSS:

        ul#menu-left>li,
        ul#menu-right>li{
            position: relative;
            padding-left: 43px;
            padding-right: 43px;
            line-height: 70px;
        }

    And then add this CSS:

    ul#menu-left>li a, ul#menu-right>li a {
        padding: 0 43px;
    }

    For #3:

    We can add margin to the sub menu items.

    ul.menu ul.sub-menu li {
        margin-bottom: 20px;
    }

    But if you want it to be exactly the same as the main site, use padding:

    ul.menu ul.sub-menu li {
        padding: 15px;
    }

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

    #1816978
    John

    For #1

    The issue seems to be that on bigger screens versus smaller screens.
    So for example on a 13″ laptop – the clouds are right in over the logo.
    Whereas on a 22″ screen, the right hand side clouds move to the right, while the left hand side ones stay where they are.
    Is it possible to add a same sized gap on both sides of the logo which creates some space on the smaller 13″ screen.
    And is it possible for both left and right side to move in the same way? (if taht makes sense?)

    #2
    I have added that css but it does not seem to have made any discrenible difference.

    #3
    The sub-menus text is skewed now. Can you tell what has gone wrong please?

    Thanks again for all your detailed help.

    #1817036
    Elvin
    Staff
    Customer Support

    It’s quite difficult to keep track of things when the CSS seemed too convoluted to follow.

    That said, can you remove everything we’ve added so far, including the margins of each of the menu items?

    You then add this:

    @media(min-width:1025px){
    	.menu-item-673 { /* About */
    	transform: translateY(-50%);
    	}
    	.menu-item-674 { /* Blog */
    		transform: translateY(50%);
    	}
    	.menu-item-676 { /* Book */
    		transform: translateY(0%);
    	}
    	.menu-item-677 { /* Resources */
    		transform: translateY(50%);
    	}
    	 .menu-item-678 { /* Contact*/
    		transform: translateY(-50%);
        }
    
        nav#site-navigation { /* hide the primary menu */
            display: none;
        }
        .inside-header.grid-container { /* center the items */
            margin: 0 auto;
        }
    
        .menu-left-container,.menu-right-container { /* width of left and right menu */
            width: 40%;
        }
    
        .site-logo{ /* width of logo */
            width: 20%;
            text-align: center;
            margin: 0 30px
        }
    
        ul.menu { /* alignment of menu */
            justify-content: space-between;
            display: flex;
            flex-direction: row;
            margin: 0;
        }
    
    	ul#menu-left>li:first-child:before,
    	ul#menu-right>li:first-child:before {
    	    content: '';
    		background-image: url(https://cdn.shortpixel.ai/spai/q_lossy+ret_img/https://wordpress-537289-1976741.cloudwaysapps.com/wp-content/uploads/2021/05/Cloud-11.png);
    	    position: absolute;
    		top: 45%;
    		left: 55%;
    		transform: translate3d(-50%, -50%, 0);
    		width: 100%;
    		height: 100%;
    		display: block;
    	}
    
    	ul#menu-left>li:before,
    	ul#menu-right>li:before
    	{
    		content: '';
    		position: absolute;
    		top: 45%;
    		left: 55%;
    		transform: translate3d(-50%, -50%, 0);
    		width: 100%;
    		height: 100%;
    		display: block;
    		background-image: url(https://cdn.shortpixel.ai/spai/q_lossy+ret_img/https://wordpress-537289-1976741.cloudwaysapps.com/wp-content/uploads/2021/05/Cloud-31.png);
    		background-size: contain;
    		background-position: center;
    		background-repeat: no-repeat;
    		z-index: -1;
    	}
    
    	ul.menu li {
    		list-style: none;
    		position: relative;
            line-height: 2;
            padding:  20px;
    	}
    
    	ul.menu li:hover ul.sub-menu{
    		position: absolute;
    		display: block;
    		left: 50%;
    		transform: translateX(-50%);
    		margin: 0;
    		opacity: 1;
    		transition-delay: 150ms;
    		pointer-events: auto;
    		height: auto;
    		overflow: visible;
    	}
    
    	ul.menu li ul.sub-menu {
    		display: none;
    	}
    
    	ul.menu li ul.sub-menu li {
    		line-height: 1.5;
    		margin: 20px;
    	}
    }
    

    I’ve basically removed everything and recompiled/rechecked/rewrap everything again in 1 @media wrap.

    Here’s the result assuming you’ve properly removed everything and re-added this CSS –
    https://share.getcloudapp.com/X6uAO6dJ

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

    #1817203
    John

    OK great. Thank you.

    I have replicated the code as per your instructions.

    I would still like to add more padding to the words inside the clouds, but also make the complete cloud be clickable.
    Is that possible?

    I have tried adding:

    ul#menu-left>li a, ul#menu-right>li a {
        padding: 0 40px;
    }    
    }

    But that messes up the sub-menu and does not allow the clouds to be clickable.

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