[Support request] Limiting the width of all navigation items to 50%

Home Forums Support [Support request] Limiting the width of all navigation items to 50%

Home Forums Support Limiting the width of all navigation items to 50%

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #679645
    tux

    Hi!

    I just managed to line up the first navigation item in my navigation bar (including a logo) to the left-hand side of my 50% main-site container (25% left sidebar, 50% main content, 25% right sidebar).

    Is there any way to line up the last item in the navigation bar to the right-hand side of the main-site container by dynamically changing the spacing between the items? Maybe my calculations are wrong, but theoretically it should work by limiting the width of all menu items (logo not included) to 50%, as the alignment to the left-hand side is already done.

    Thank you for the amazing work!
    Greetings

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #679766
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    So you’re wanting the right side of your last menu item to align with the edge of the content?

    #679883
    tux

    Yes, exactly, but the items should be evenly distributed as they are now.

    #680366
    Tom
    Lead Developer
    Lead Developer

    Maybe try something like this instead of what you have now:

    .navigation-logo {
        width: 25%;
    }
    
    .main-nav {
        width: 50%;
        display: inline-block;
    }
    
    .main-nav > ul {
        display: flex;
        justify-content: space-between;
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.