Menu split to left & right of logo

TwoStudios

Hi!

I'm working on a website:
http://twostudios.site/wafelwagen/
with the JA Nova template.

The customer likes the idea of having the menu split in 2 parts, and the logo in the middle.
Therefore, I have arranged an extra menu, that is shown in the "header-cta" position.

For the desktop version, this is perfect. However, in the mobile version, the header-cta position isn't shown... and the customer would like all 8 items (menu's to the left, and to the right of the logo) to be added to the mobile menu.

Is this possible? And if so, how can I get this to work?

Thanks for your help.

KInd regards,
Karen

saguaros

Hi Karen,

The off-canvas menu on mobile shows modules assigned to 'off-canvas' position. You can create menu module to load the second menu there.

TwoStudios

Thanks, this solved the issue. However, now the menu collapses on a different width than the main menu.
(so at a certain width, only the left menu is visible) - where can I change the settings of this part?

thanks for your help, again!

kind regards,
Karen

saguaros

Hi Karen,

You can go to Backend >> Site template styles >> JA Nova >> Navigation >> Off-canvas and change settings there.

https://www.joomlart.com/documentation/t4-framework/navigation-settings#off-canvas_jadoc

TwoStudios

Hi! I tried this, but both items seem to have different break points
the menu on the left is the main menu - it collapses to the off canvas menu at widths less than 1200px
the menu on the right is called "infomenu" in position header-cta - it is not shown anymore at screen widths less than 1400px

so, since the off canvas menu (which contains the items of both the main menu & infomenu) only appears at widths less than 1200px - the content of the infomenu is not shown in all widths between 1200-1400px.
I would prefer the main menu to collapse to the off canvas at widths of -1400px already.

Maybe I'm overlooking the setting... but I've tried my best :-)
the site has now moved to www.dewafelwagen.be

thanks for your help!

kind regards,
Karen

saguaros

TwoStudios Hi Karen,

It would be great if you could share the Super Admin credentials and a screenshot of the desired outcome. This will help me suggest the necessary changes more effectively.

TwoStudios

Anyone?
would it help if i added the admin login info?

TwoStudios

Hi,

I added the info for super user login.

Actual situation:
when you open the page on a large screen, you see:
MAIN MENU (Home-Bedrijven-Babyborrel-Onze formules) - LOGO - INFO MENU (FAQ-Prijscalculator-Beschikbaarheid-Over ons)
(cfr print screen 1)

When you resize your screen to a smaller size (for example 1220px) - the info menu disappears, and the logo moves to the left of the main menu, so we get:
LOGO - MAIN MENU (Home-Bedrijven-Babyborrel-Onze formules)
the info-menu can't be found anywhere
(cfr print screen 2)

If you continue to narrow down the screen size, both menu's (main menu & info menu) will collapse to the off canvas position
(cfr print screen 3)

Wanted situation
In all screen sizes, I want to have the logo, and both menu's. If there isn't enough space to put the main menu & info menu in the top nav - they should both collapse, simultaneously to the off canvas menu.

In short, the layout of print screen 1 & 3 is OK. The layout of print screen 2 is not. Since one menu is missing in that view.
I think this can be solved, by making the main menu collapse at the same width, as the width that triggers the infomenu to disappear.

TwoStudios

Hi!

Have you had the chance to take a look at this?

kind regards,
Karen

phinb

Hi @TwoStudios

I have updated the header for you. You can check it in the template layout or the attached file I sent

Additionally, I made updates in the custom.css file

.logo-image img {
  max-height: 100px;
}

@media (max-width: 1400px) {
  .header-wrap .navbar>.navbar-nav .nav-link {
    margin-left: 0;
  }
}

Please check if it meets your expectations, and let me know if any further adjustments are needed 🙂

mainnavhtml.zip

568B

TwoStudios

ok, these adaptations are not made in the live site, right?
Because I just checked dewafelwagen.be and the problem is still there. but probably I'm missing something :-)

saguaros

I applied the same into your site, could you take a look?