[Resolved] Split menus into two separate lists

Home Forums Support [Resolved] Split menus into two separate lists

Home Forums Support Split menus into two separate lists

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

    Hi again,

    The CSS from my previous reply had the wrong selectors. (it was for the demo site.)

    Here’s the CSS selectors needed for your site specifically:

    .menu-right-main-nav-container, .menu-left-main-nav-container {
        width: 35%;
        display: flex;
        justify-content: center;
        padding: 15px 0;
    }
    
    li.menu-item:not(:last-child) {
        margin-bottom: 5px;
    }

    It’ll work like this when applied to your site: https://share.getcloudapp.com/rRuoZNPz

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

    #1527649
    jregist

    Definitely much better and closer to what I needed. I’ll attach two graphics to try to show what I mean by centered over the left and right images of the Residential page. The center of the left image should be roughly the center of the three left menu items. And same for the right in both the horizontal and stacked breakpoints. The stacked one is not quite centered. Here’s a graphic — https://wishfulthinkingus-my.sharepoint.com/:f:/g/personal/jregist_wishfulthinkingus_onmicrosoft_com/EinIqeJY2aRKrpAimS_k92sBMZp985TFH_xQoYBjv0SqYA?e=E2LoTT

    I’ll look at this again in the morning. Let me know if you have any additional advice. For example, one potential issue I’ve found is increasing the menu height while keeping the logo size the same.

    Thanks again for all the help with this!

    Joel

    #1527666
    Elvin
    Staff
    Customer Support

    Ahh if that’s the case, the CSS needs a significant amount of rework.

    Let’s start with the easy ones.

    To make sure the Logo is centered, add this CSS:

    .navigation-branding img {
        margin: 0 auto !important;
    }

    We then make sure the nav and the logo’s width mathematically matches the gallery’s column width.

    .navigation-branding > * {
        width: calc(100%/3) !important;
        padding: 8px;
    }

    With this CSS, the width is properly computed.

    Now let’s start aligning the gallery columns to match your header.

    The problem here is, your gallery module is adding margin that makes things harder to aligning things.

    Apply this CSS to remove them:

    .fl-node-5f81d49bec4f2 > .fl-module-content {
        margin-top: 0px;
        margin-right: 0px;
        margin-left: 0px;
    }
    
    #pt-cv-view-581215enq8 {
        margin: 0px;
    }

    We then reapply the spacing on their respective containers. This is done so we’re sure the horizontal space is even between the header and the gallery.

    .fl-builder-content-438, .navigation-branding {
        padding: 0 95px;
    }

    I’ll look at this again in the morning. Let me know if you have any additional advice. For example, one potential issue I’ve found is increasing the menu height while keeping the logo size the same.

    As for this one, consider using height:auto; and apply fixed value on the width instead.

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

    #1531876
    jregist

    Thanks, Elvin and team. Very much appreciate all your help. Fantastic support from GeneratePress!

    #1532586
    Elvin
    Staff
    Customer Support

    No problem. Glad to be of any help. 🙂

    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.