[Resolved] Split menus into two separate lists

[Elvin]

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

[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

[Elvin]

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.

[jregist]

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

[Elvin]

No problem. Glad to be of any help. 🙂

[Author]

Posts