Open ereslibre opened 3 years ago
Given a menu of options, on the config.toml configuration, like:
config.toml
[menu] [[menu.main]] identifier = "hub" name = "Policy Hub" url = "https://hub.kubewarden.io/" weight = -130 [[menu.main]] identifier = "charts" name = "Helm Charts" url = "https://charts.kubewarden.io/" weight = -120 [[menu.main]] identifier = "docs" name = "Docs" url = "https://docs.kubewarden.io/" weight = -110
On a regular screen, the contents look fine:
However, on a smaller screen, we see that the menu items: Policy Hub and Helm Charts seem to overflow on top of themselves:
On very small displays (on the sample, iPhone 5), the main content is also not filling the whole content viewport:
The way we have fixed the top menu mobile appearance, at least until we have a good solution is by using this patch in our website:
commit 5197242aeef1641be9ec5f80045ae672a0ba4e28 Author: Rafael Fernández López <ereslibre@ereslibre.es> Date: Wed Apr 21 10:45:29 2021 +0200 Make menu look fine on narrow displays diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 46a1cfe..b955448 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -7,6 +7,20 @@ --light : #F3F3F3; } + .sub-header { + white-space: nowrap; + flex-flow: wrap; + } + + .sub-header ul { + display: flex; + flex-flow: wrap; + } + + .sub-header ul li { + display: block; + } + .navbar-brand { flex: 1; }
This solution is very probably suboptimal, given we are not designers, but it does the job until we have a proper fix.
Thank you.
The website project lives at https://github.com/kubewarden/kubewarden.io
ping @lvuch - this is affecting all project sites.
Given a menu of options, on the
config.toml
configuration, like:On a regular screen, the contents look fine:
However, on a smaller screen, we see that the menu items: Policy Hub and Helm Charts seem to overflow on top of themselves:
On very small displays (on the sample, iPhone 5), the main content is also not filling the whole content viewport:
The way we have fixed the top menu mobile appearance, at least until we have a good solution is by using this patch in our website:
This solution is very probably suboptimal, given we are not designers, but it does the job until we have a proper fix.
Thank you.