Can the main menu be split to allow a logo in the centre? - Forum | JoomShaper
Solved Helix Framework

Can the main menu be split to allow a logo in the centre?

Asked by Dina Abramson 3 years ago Last activity 3 years ago

Hi,

My customer would like her logo to be placed in the center of the main menu. Is it possible to do this?

Her logo is currently on the left side of the header, nothing I have tried with the layout has worked.

Thanks for any assistance

Accepted answer

Marked as the solution
Pavel
3 years ago · edited

Or there is a way only using CSS with standart Logo and Menu positions from Helix. But this can cause problems with accessibility on Mac and iOS (this must be checked if you take care of accessibility)

@media (min-width: 992px) {
    #sp-menu,
    #sp-menu .sp-column,
    .sp-megamenu-wrapper,
    .sp-megamenu-parent {
        display: contents !important;
    }
    #sp-header .row {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
    }
    #sp-logo {
        grid-column: 4/5;
    }
    #sp-logo,
    .sp-menu-item {
        grid-row: 1;
    }
}

Values of properties grid-template-columns for #sp-header .row and grid-column for #sp-logo depends on the total number of menu items + logo

6 more replies

Oldest first Newest first Most helpful
Dina Abramson Asked this
3 years ago

I should qualify what I mean by center:

HOME MEET THE TEAM | LOGO HERE | J.A.I.K.S BLOG CONTACT US

Thanks.

Pavel
3 years ago · edited

Hi... Or create | LOGO HERE | menu item and use it for displaing logo image. And a little CSS to bring this to the right appearance.

Paul Frankowski Senior Staff
3 years ago

@Pavel indeed.

On the left side can be classic Helix Menu, then Logo, and Menu module on the "right" side.
Custom Header created in Layout may look like that:

Menu | Logo | top3

Of course menu module published on the "top3" (or different name) would NOT have MegaMenu features. SO you have to consider if you need MegaMenu on left or right side. And yes, extra CSS styling may be needed for extra Menu module - this is classic webmaster task!

Pavel
3 years ago · edited

I meant only the central menu item as a logo. Without top3 and menu module

<menu> item1 | item2 | item-Logo | item3 | item4 </menu>

In this case, all the functionality and appearance of the menu will remain.

Dina Abramson Asked this
3 years ago

Thank you, we decided to go a different route which was just simpler.

Log in to reply.