Modify breakpoint to show hamburger menu below a min-size of 1400px

[seoBOXX]

Hi there,

i am looking for a possibility to modify the menu breakpoint to show the hamburger menu below a min-size of 1400px. I was rushing thru all the settings but did not find anything like this ... is there a way to modify it?

Thanks in advance,

Andreas

[seoBOXX]

No idea where to do that? I set the template width to 1400px and just want the hamburger menu to show up when it is below that.

[Chacapamac]

I @seoBOXX

Yes, it will be great to have a control of the visibility of the hamburger directly in the Astroid Manager. Maybe @sonvnn can look at that.

For now, look at this image, I think there can be a solution by forcing a custom css. I’m not sure what file bring that css or it is inline? and it will be a bit difficult to target the div without a class name with the bootsrap class (d-lg-none)

I think if you use the div “header-mobilemenu-trigger” as starting point you can target the parent div also, even if with no name (it some css for that...)

I will look where this code originate....

[seoBOXX]

@Chacapamac , @sonvnn ... a solution to add that to the settings in the backend would be wonderfull

On my site -> https://joomla4.land-dinslaken.de/ the code looks like attached

[Joomlaplates]

Hello, you can try to modify the brerakpoints in the SCSS File > custom.scss or _variables.scss https://getbootstrap.com/docs/5.1/layout/breakpoints/

..

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

[seoBOXX]

Hello, you can try to modify the brerakpoints in the SCSS File > custom.scss or _variables.scss https://getbootstrap.com/docs/5.1/layout/breakpoints/

..

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

The breakpoint is ok but the class in the nav bar div not, as far as i understood that

[Joomlaplates]

The breakpoint is ok but the class in the nav bar div not, as far as i understood that The div´s are created by breakpoints, you cant not change the div.

[seoBOXX]

The breakpoint is ok but the class in the nav bar div not, as far as i understood that The div´s are created by breakpoints, you cant not change the div.

So there is now way to say that beyond 1400px the Hamburger menu has to be shown? I cannot believe that this could not be managed. Maybe not within a setting but within a direct manipulation or override maybe?

[Chacapamac]

@seoBOXX

So there is now way to say that beyond 1400px the Hamburger menu has to be shown?

I just give you a solution in —> https://github.com/templaza/astroid-framework/issues/303#issuecomment-1476367047

I agree that it will be great to be able to choose DIRECTLY in the Astroid Administration on what Bootstrap size the Hamburger menu is shown or not.

On top of that I can see more and more web site using the hamburger menu as their menu on ALL devices.

Maybe @sonvnn can put that in is “Things to do”

[sonvnn]

@seoBOXX

So there is now way to say that beyond 1400px the Hamburger menu has to be shown?

I just give you a solution in —> #303 (comment)

I agree that it will be great to be able to choose DIRECTLY in the Astroid Administration on what Bootstrap size the Hamburger menu is shown or not.

On top of that I can see more and more web site using the hamburger menu as their menu on ALL devices.

Maybe @sonvnn can put that in is “Things to do”

Your solution is great. I will add this feature in v2.6.5. Please wait for update :)

[Chacapamac]

Great @sonvnn , I think its a good feature. I mark this as “SOLVED”

[seoBOXX]

Your solution is great. I will add this feature in v2.6.5. Please wait for update :)

@sonvnn ... when do you think 2.6.5 will be released? Will it be before July 2023?

[sonvnn]

@seoBOXX I will release 2.6.5 in April or May. 2.6.5 will come with Color Mode feature. To learn more about color mode please read https://getbootstrap.com/docs/5.3/customize/color-modes/

Breakpoint option will be ready in the next few days. You can download developer branch to test it. I will inform you as soon as this feature is available in developer branch.

Thanks & Best Regards, Sonny

[seoBOXX]

@sonvnn .. thanks a lot .., i really appeciate that ... is there any way to support the project?

[sonvnn]

@Chacapamac @seoBOXX I add "Header Breakpoint" feature in https://github.com/templaza/astroid-framework/commit/117ba9ec8fe62292207e32f68fa2a4fdddf72981

How To Test it:

1. Download developer branch -> Re-install to your website
2. Go to Template options -> Header -> Header Breakpoint -> Select your breakpoint you want to transform.

Please let me know if you have any question about this feature.

Thanks & Best Regards, Sonny

[Chacapamac]

GREAT STUFF @sonvnn It work perfectly!

One thing when I use XXL the menu is still visible with no hamburger menu. — On XXL settings the collapse of the menu is on XL — On XL its on LG and so on....

I think it will be easier for the average user if when they choose XXL, the hamburger ALWAYS show on all devices — When choosing XL , the hamburger start to appear on XL down, and so on, SM = SM down.

• Also for the informative text I will go with something like

Astroid uses Bootstrap breakpoints. On Extra Extra Large setting, the header and menu collapse to the hamburger menu on ALL devices. On Extra Large the hamburger appears on Extra Large and down, and so on...

It is important if somebody want to use ONLY the hamburger menu on ALL devices.

[seoBOXX]

@sonvnn ... thank you so much ... it works great ... thats an awesome feature in my opinion ... is there any way to support the project or you ... maybe german translations or something like this?

[sonvnn]

@Chacapamac Breakpoint follow Bootstrap value you can find it here https://getbootstrap.com/docs/5.3/layout/breakpoints/#available-breakpoints XXL configure that mean Header will not break when ≥1400px

If you would like to change breakpoint you can follow @Joomlaplates instruction above Hello, you can try to modify the brerakpoints in the SCSS File > _variables.scss https://getbootstrap.com/docs/5.1/layout/breakpoints/

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

@seoBOXX Yeahh! Thank you for your interest you can contact to @Joomlaplates to ask join to translation team. I do this project for fun at the moment. Let's join this community and share your experience with others like @Chacapamac. That is biggest donate for me right now. I will think about a donate button in the future may be :)

Best Regards, Sonny

[seoBOXX]

@sonvnn ... a donate button would be great i think ... i would suggest a lot of people would like to show their appreciation for all that work and that real great product and donate ... i will contact @Joomlaplates ... maybe i can join the translation team .. so all the best, stay healthy and take care ... maybe we'll read soon on another issue

[Chacapamac]

I’m not to rich, but I think a donate button is a good idea. I will donate! — Astroid is by far the best Joomla Framework, people will recognize that!

[seoBOXX]

I’m not to rich, but I think a donate button is a good idea. I will donate! — Astroid is by far the best Joomla Framework, people will recognize that!

I totally agree ... i have been looking for a good solution for the page of our club for quite a few months and Astroid was the best solution and Joomla Framework i found.

[Chacapamac]

@seoBOXX Few years ago after my trusted (10 years+) Rockettheme framework spiral in a “reinvent the wheel” approach and a bulky, Joomla unfriendly Framework, I decide to find another one. I take a year to test all the big frameworks for Joomla and NONE approach the quality and Joomla integration than Astroid. This is with Joomdev then and now, with Sonny and the great people here it become way better.

I WANT A DONATE BUTTON! That's for the time I cannot participate in helping here!