Navigation Bar

This sub-forum is for discussing all topics related to AppGini Helper JavaScript Library, provided by bizzworxx as a third-party AppGini plugin.
Post Reply
christian
Posts: 10
Joined: 2022-07-31 08:33

Navigation Bar

Post by christian » 2022-09-29 14:07

Hello,

Navigation Bar:
a great way to keep link well organised.
(AppGiniHelper.common.getNavbar())

Unfortunately, the navbar is not displayed in the mobile view (smartphone, ...).

Is there a way to fix this ?

Kind regards

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1495
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Navigation Bar

Post by jsetzer » 2022-09-29 16:10

Hi, don't know if I got your point. If not, please describe more detailed.

When opening in SmartPhone device, navbar is shown, but, obviously, automatically reduced to screen size. This is the default behaviour of websites using Bootstrap framework.

Can you show a screenshot so we can see?
Attachments
chrome_9GejFK4WrC.png
chrome_9GejFK4WrC.png (52.26 KiB) Viewed 420 times
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

christian
Posts: 10
Joined: 2022-07-31 08:33

Re: Navigation Bar

Post by christian » 2022-09-30 09:12

Hello, attached are 2 pictures showing my "problem".

Picture 01 - desktop view - you can see the menu item "Hilfe" on the top right.
Picture 02 - mobile view - "Burger menu" is there, the menu item "Hilfe" is gone.


Thank you for your efforts and best regards from Austria
Christian
Attachments
02.png
02.png (13.86 KiB) Viewed 396 times
01.png
01.png (11.87 KiB) Viewed 396 times

christian
Posts: 10
Joined: 2022-07-31 08:33

Re: Navigation Bar

Post by christian » 2022-10-02 18:47

Hello,

is my "problem" understandable ?
Thank you for the support.

many greetings
Christian

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1495
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Navigation Bar

Post by jsetzer » 2022-10-02 20:16

Well, from my point of view it works as designed, if menus and menuitems are hidden behind so called menu-hamburger button in small devices.
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

christian
Posts: 10
Joined: 2022-07-31 08:33

Re: Navigation Bar

Post by christian » 2022-10-03 07:15

Herzlichen Dank für die Info.

Liebe Grüße

User avatar
ronwill
Veteran Member
Posts: 216
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Navigation Bar

Post by ronwill » 2022-10-03 14:11

Hi Jan,

I think Christian wants the menu item 'Hilfe' to show on mobile devices in header or as a menu button?
Attachments
hilfe.jpg
hilfe.jpg (91.24 KiB) Viewed 309 times
Ron - Gloucestershire, UK: AppGini Pro V 22.13 Rev 1291 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar + Messages
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1495
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Navigation Bar

Post by jsetzer » 2022-10-03 16:53

Thanks, Ron, I know.

That is more complex than it looks like.

The problem is: You can put as many additional buttons as you like there. But the space is limited, depending on title and available screen width.

So, what is next: there must be an algorithm calculating button widths and deciding about how many buttons may (!) fit into the gap between title and Hamburger-menu and which buttons shall be visible in xs, sm, md and lg screen sizes in portrait/landscape.

Or, if you don't want an algorithm to make those decisions, you will have to specify (=configure) by yourself. For the developers configuring single button visibility would be much more than a one-liner in javascript, especially when specifying for different screen sizes depending on portrait and/or landscape mode and depending on media (screen/print).
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1495
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Navigation Bar

Post by jsetzer » 2022-10-03 17:12

I've just checked HTML code. The whole right part has class hidden-xs and therefore will not be visible in smartphone devices in portrait orientation.

In a first step we can bring back those additional buttons into the hamburger-menu:

Code: Select all

<!-- file: hooks/header-extras.php -->
<script>
 jQuery("ul.nav.navbar-nav.navbar-right.hidden-xs").removeClass("hidden-xs");
</script>
In Landscape:
chrome_dbxAfVwvTB.png
chrome_dbxAfVwvTB.png (31.58 KiB) Viewed 301 times

In Portrait:
Those additional buttons are in menu now.
chrome_6zxRfZjKHU.png
chrome_6zxRfZjKHU.png (35.69 KiB) Viewed 301 times
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

Post Reply