ja_stark menu problem

ffsandsbach

Hi all together,

i´m new here and i try to bild a hompage with the ja_stark tamplet.
on the computer it works fine.
but when i look it on the tablat then i have a other color on the menu and i have "Off Canvas" and "Main Menu" in the menu.
when i look the page on my mobil, i have the button for the menu but i don´t get the menu.

Please could sombody help me. where i can change the settenigs and what make i wrong.

Kind regards
Stefan

dominic

Hi ffsandsbach,
1/ You can add the following CSS code to the Systems > site template styles > Ja stark - default > Tools > Custom CSS to improve the style of the off-canvas menu:

.t4-offcanvas .t4-off-canvas-body .t4-module .row {
    flex-direction: column;
}

.t4-offcanvas .t4-off-canvas-body .t4-module div {
    max-width: 100%;
}

.t4-offcanvas .t4-off-canvas-body .t4-module div {
    max-width: 100%;
}

2/ If you want to hide the "Main menu" word, you can go to the Backend > Module > Main menu and turn off the title of the module.

3/ If you want to change the "Off-canvas" title, you can open the \language\en-GB\en-GB.tpl_ja_stark.ini file and find the "T4_OFF_CANVAS_TITLE" label.
However, if you want to remove this section, you can add the following CSS code to the Custom CSS:

.t4-offcanvas .t4-off-canvas-header a {
    display: none;
}

4/ About the mobile screen, I have checked and see that the off-canvas menu was showing fine. Could you send me a screenshot for further checking?

ffsandsbach

dominic
Hi Dominic,

thank you very much for your feedback.
Now it look like a bit better.

But in the mobile view the bar is still purple, where can I change that to red? I actually changed all the colors.

and I just noticed when viewing it with my cell phone, if I hold it horizontally, the menu can be opened, if I hold it in portrait format, then the menu doesn't appear (I use an iPhone).
Do you have any other tips for me as to what else I'm doing wrong here?

Kind regards
Stefan

dominic

Hi ffsandsbach,
To change the bar color, you can use the following CSS code:

.t4-offcanvas .t4-off-canvas-header {
     background-color: #2e3d96;
}

About the menu not opening on mobile, I think the site name is big and overlays the menu icon, you can try the following CSS Code:

@media (max-width: 480px) {
.navbar-brand.logo-text .site-name {
    font-size: 16px;
}
}

If you still face this issue, you can send me a screenshot for further checking.

ffsandsbach

dominic
Hello Dominic,
thank you this two CSS fixed my issue with the menu.

Now I hope that you also have a tip for my last problem
When i open the Menu "Über Uns/aktuelles/archiv" i get a list with different reports.
when i click on any report, the menu background is then black and i see only a comlpeat black side, it work normaly untl monday, i could read the reports and the menu background was red.

do you have a last tip for me, what i make wrong?

Kind regards
Stefan

dominic

Hi ffsandsbach,
Could you send me a screenshot of this issue?
Also, you should add the following code to your site to improve the icon on mobile:

.nav-breakpoint-lg.navigation-hide .t4-offcanvas-toggle {
     z-index: 102;
}

ffsandsbach

dominic

Hi Dominic

here the screenshot

and when i click on a report

kind regards
Stefan

dominic

Hi ffsandsbach,
You can use the following CSS code to change to background color for the header:

.layout-home .t4-sticky.t4-palette-primary {
      background-color: #ff0000;
}

ffsandsbach

dominic

Hi Dominic,

thank you for the feedback.
the header is now red, unfortunately I still can't see the report, here I only have a black page

ffsandsbach

dominic

Hi Dominic,

now i have one question again
why are some points from the menue green and not black

where can i change this, i don´t find the color green anywhere

Kind regards
Stefan

ffsandsbach

i found the failure and now it works.
Thank you for your help

dominic

Hi ffsandsbach,
This is the menu color when active, you can use the following CSS code to change the color:

.t4-megamenu .dropdown-menu ul > .active a.nav-link, 
.t4-megamenu .dropdown-menu ul > .active a.dropdown-item {
    color: #..... !important;
}

xabiermb

Hi,

I have the same problem. When I try to open the menu on a mobile phone or a tablet, it doesn´t show the menu.

I tried with this and didn´t work, or at least I didn´t see any change...

Thanks in advance

dominic

Hi xabiermb,
Could you create another thread and give me the site URL for further checking?