Can The Main Menu Be Split To Allow A Logo In The Centre? - Question | JoomShaper
Back to the questions

Can The Main Menu Be Split To Allow A Logo In The Centre?

DA

Dina Abramson

Helix Framework 10 months 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

0
7 Answers
Order by
Oldest Newest Votes
Pavel
Pavel
Accepted Answer
10 months ago #118958

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

0
DA
Dina Abramson
Accepted Answer
10 months ago #118912

I should qualify what I mean by center:

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

Thanks.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 10 months ago #118939

Hi Dina,

it request php code customization in custom header (if megamenu must be on both sides), or install one of those templates:

0
Pavel
Pavel
Accepted Answer
10 months ago #118946

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.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 10 months ago #118951

@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!

0
Pavel
Pavel
Accepted Answer
10 months ago #118957

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.

0
DA
Dina Abramson
Accepted Answer
10 months ago #119164

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

0