Broken menu

[MortenHofft]

Hi @SnymanE and @FatimaParkerAllie this issue is in response to your email.

Why things do not work

I can see that the navigation bar isn't really working. The menu looks/behaves odd and the links points to "page not found". There are 3 issues.

1. The navigation bar is wrongly configured
2. The urls doesn't match the page location
3. the page is invalid

The navigation bar
The current version can be seen here
https://github.com/gbif/hp-sanbi/blob/65ae94fef7f12dcac7e811a917d801965614c9bf/_data/navigation.yml

And I have copied the code below and left a comments for the first lines

# this is a list of menu items. each item in the list starts with a `-`. 
- text: About # First item has a name, but no link/href so it does nothing
- menu: # Second item states that it is a dropdown, but has no text. So only the arrow is shown in the interface
  - text: About Us # this is correctly indented so it is a list of items in the dropdown menu. It has the text "About Us"
    href: /About Us/About Us/ # this is the URL pointing to the home page. It needs to start with `/` just as you do. It is unusual to have spaces and capital letters in a url. You should use lower case and `-` instead of spaces. So for example `/about-us/about-us`. My first thought is that simply `/about-us` might be a better url, but that is a preference I suppose.
  - text: Network Partners
    href: /About Us/Network Partners
- text: Data Mobilisation
- menu:
  - text: GBIF SA Data Portal
    href: /Data Mobilisation/GBIF SA Data Portal
  - text: Data Publishing-SANBI-GBIF IPT
    href: /Data Mobilisation/Data Publishing-SANBI-GBIF IPT
  - text: Data-Science-Policy/Data Use and Impact
    href: /Data Mobilisation/Data-Science-Policy and Data Use and impact
- text: HCD
- menu:
  - text: Elearning
    href: /HCD/Elearning
- text: Regional Engagement
  href: /Regional Engagement
- text: News/Events
  href: /News/Events
- text: Resources and useful links
  href: /Resources and useful links

Why does the URL /About us/About us not show anything
Because there is no such page. You probably meant it to point to the page hp-sanbi/About/About Us.md

Per default files get their url based on the folder and file name. So that file will per default get the url /About/About%20Us/

You can overwrite the location by adding a permalink in the frontmatter of the file permalink: /about-us-some-name-i-made-up and the that will be the url no matter what directory and file name it has been given.

But it doesn't show on /About/About%20Us/ either
From reading above we see that the file should show as /About/About%20Us/, but it doesn't. That is because the content of the file doesn't follow the rules.
It should ALWAYS start with the frontmatter and then followed by markdown. But there is no frontmatter in the file
Because it doesn't follow that rule it is just copied to the site as a plain text file

Background reading
https://jekyllrb.com/docs/pages/
https://jekyllrb.com/docs/front-matter/
https://jekyllrb.com/docs/permalinks/

[SnymanE]

Thank

…

On Mon, 30 Aug 2021, 10:09 Morten Høfft, ***@***.***> wrote: Hi @SnymanE <https://github.com/SnymanE> and @FatimaParkerAllie <https://github.com/FatimaParkerAllie> this issue is in response to your email. Why things do not work I can see that the navigation bar isn't really working. The menu looks/behaves odd and the links points to "page not found". There are 3 issues. 1. The navigation bar is wrongly configured 2. The urls doesn't match the page location 3. the page is invalid *The navigation bar* The current version can be seen here https://github.com/gbif/hp-sanbi/blob/65ae94fef7f12dcac7e811a917d801965614c9bf/_data/navigation.yml And I have copied the code below and left a comments for the first lines # this is a list of menu items. each item in the list starts with a `-`. - text: About # First item has a name, but no link/href so it does nothing - menu: # Second item states that it is a dropdown, but has no text. So only the arrow is shown in the interface - text: About Us # this is correctly indented so it is a list of items in the dropdown menu. It has the text "About Us" href: /About Us/About Us/ # this is the URL pointing to the home page. It needs to start with `/` just as you do. It is unusual to have spaces and capital letters in a url. You should use lower case and `-` instead of spaces. So for example `/about-us/about-us`. My first thought is that simply `/about-us` might be a better url, but that is a preference I suppose. - text: Network Partners href: /About Us/Network Partners - text: Data Mobilisation - menu: - text: GBIF SA Data Portal href: /Data Mobilisation/GBIF SA Data Portal - text: Data Publishing-SANBI-GBIF IPT href: /Data Mobilisation/Data Publishing-SANBI-GBIF IPT - text: Data-Science-Policy/Data Use and Impact href: /Data Mobilisation/Data-Science-Policy and Data Use and impact - text: HCD - menu: - text: Elearning href: /HCD/Elearning - text: Regional Engagement href: /Regional Engagement - text: News/Events href: /News/Events - text: Resources and useful links href: /Resources and useful links *Why does the URL /About us/About us not show anything* Because there is no such page. You probably meant it to point to the page hp-sanbi/About/About Us.md <https://github.com/gbif/hp-sanbi/blob/65ae94fef7f12dcac7e811a917d801965614c9bf/About/About%20Us.md> Per default files get their url based on the folder and file name. So that file will per default get the url /About/About%20Us/ You can overwrite the location by adding a permalink in the frontmatter of the file permalink: /about-us-some-name-i-made-up and the that will be the url no matter what directory and file name it has been given. *But it doesn't show on /About/About%20Us/ <https://hp-sanbi.gbif-staging.org/About/About%20Us> either* From reading above we see that the file should show as /About/About%20Us/ <https://hp-sanbi.gbif-staging.org/About/About%20Us>, but it doesn't. That is because the content of the file doesn't follow the rules. It should ALWAYS start with the frontmatter and then followed by markdown. But there is no frontmatter in the file <https://raw.githubusercontent.com/gbif/hp-sanbi/master/About/About%20Us.md> Because it doesn't follow that rule it is just copied to the site as a plain text file <https://hp-sanbi.gbif-staging.org/About/About%20Us.md> *Background reading* https://jekyllrb.com/docs/pages/ https://jekyllrb.com/docs/front-matter/ https://jekyllrb.com/docs/permalinks/ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AS7EO2CUWRPX2XPUO5MIKR3T7M4CHANCNFSM5DBKSMPA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[SnymanE]

Good afternoon Please advise on how to justify images and text in markdown. Also, how to put in columns (by not using a table). Thanks

…

On Mon, Aug 30, 2021 at 10:09 AM Morten Høfft ***@***.***> wrote: Hi @SnymanE <https://github.com/SnymanE> and @FatimaParkerAllie <https://github.com/FatimaParkerAllie> this issue is in response to your email. Why things do not work I can see that the navigation bar isn't really working. The menu looks/behaves odd and the links points to "page not found". There are 3 issues. 1. The navigation bar is wrongly configured 2. The urls doesn't match the page location 3. the page is invalid *The navigation bar* The current version can be seen here https://github.com/gbif/hp-sanbi/blob/65ae94fef7f12dcac7e811a917d801965614c9bf/_data/navigation.yml And I have copied the code below and left a comments for the first lines # this is a list of menu items. each item in the list starts with a `-`. - text: About # First item has a name, but no link/href so it does nothing - menu: # Second item states that it is a dropdown, but has no text. So only the arrow is shown in the interface - text: About Us # this is correctly indented so it is a list of items in the dropdown menu. It has the text "About Us" href: /About Us/About Us/ # this is the URL pointing to the home page. It needs to start with `/` just as you do. It is unusual to have spaces and capital letters in a url. You should use lower case and `-` instead of spaces. So for example `/about-us/about-us`. My first thought is that simply `/about-us` might be a better url, but that is a preference I suppose. - text: Network Partners href: /About Us/Network Partners - text: Data Mobilisation - menu: - text: GBIF SA Data Portal href: /Data Mobilisation/GBIF SA Data Portal - text: Data Publishing-SANBI-GBIF IPT href: /Data Mobilisation/Data Publishing-SANBI-GBIF IPT - text: Data-Science-Policy/Data Use and Impact href: /Data Mobilisation/Data-Science-Policy and Data Use and impact - text: HCD - menu: - text: Elearning href: /HCD/Elearning - text: Regional Engagement href: /Regional Engagement - text: News/Events href: /News/Events - text: Resources and useful links href: /Resources and useful links *Why does the URL /About us/About us not show anything* Because there is no such page. You probably meant it to point to the page hp-sanbi/About/About Us.md <https://github.com/gbif/hp-sanbi/blob/65ae94fef7f12dcac7e811a917d801965614c9bf/About/About%20Us.md> Per default files get their url based on the folder and file name. So that file will per default get the url /About/About%20Us/ You can overwrite the location by adding a permalink in the frontmatter of the file permalink: /about-us-some-name-i-made-up and the that will be the url no matter what directory and file name it has been given. *But it doesn't show on /About/About%20Us/ <https://hp-sanbi.gbif-staging.org/About/About%20Us> either* From reading above we see that the file should show as /About/About%20Us/ <https://hp-sanbi.gbif-staging.org/About/About%20Us>, but it doesn't. That is because the content of the file doesn't follow the rules. It should ALWAYS start with the frontmatter and then followed by markdown. But there is no frontmatter in the file <https://raw.githubusercontent.com/gbif/hp-sanbi/master/About/About%20Us.md> Because it doesn't follow that rule it is just copied to the site as a plain text file <https://hp-sanbi.gbif-staging.org/About/About%20Us.md> *Background reading* https://jekyllrb.com/docs/pages/ https://jekyllrb.com/docs/front-matter/ https://jekyllrb.com/docs/permalinks/ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AS7EO2CUWRPX2XPUO5MIKR3T7M4CHANCNFSM5DBKSMPA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[MortenHofft]

Good afternoon Please advise on how to justify images and text in markdown. Also, how to put in columns (by not using a table). Thanks

I'm not sure you can do that in markdown without writing custom css yourself (this require general knowledge about css and html though)

Can you describe in a bit more details what you are striving to do?