main menu style?

[dale]

Hi,

I posted this in comp.infosystems.www.authoring.stylesheets but no
answer ...

I will like to improve my style sheet.

Here it is ...

https://www.dalekelly.org/mystyle.css

Here is my website ...

https://www.dalekelly.org/

I have unique styles in it for computers, tablets, and phones.

On computer sizes the main menu is on the left.

On tablet sizes the main menu is horizontal across the top.

On phone sizes the main menu is top to bottom.

On phones it seems like the menu is too long. Too many selections.

I am thinking of new menus.

Any thoughts of a new style sheet handling?

--
Mystery? -> https://www.dalekelly.org/

Facebook-> https://www.facebook.com/dalekellytoo/
Instagram -> https://www.instagram.com/dalekellytoo/
Twitter -> https://twitter.com/dalekellytoo/
YouTube-> https://www.youtube.com/@dalekellytoo
GitHub -> https://github.com/dalekellytoo
LinkedIn -> https://www.linkedin.com/in/dalekellytoo/
Pinterest -> https://www.pinterest.com/dalekellytoo/

[JJ]

On Thu, 20 Apr 2023 11:03:02 -0400, dale wrote:
> Hi,
>
> I posted this in comp.infosystems.www.authoring.stylesheets but no
> answer ...
>
> I will like to improve my style sheet.
>
> Here it is ...
>
> https://www.dalekelly.org/mystyle.css
>
> Here is my website ...
>
> https://www.dalekelly.org/
>
> I have unique styles in it for computers, tablets, and phones.
>
> On computer sizes the main menu is on the left.
>
> On tablet sizes the main menu is horizontal across the top.
>
> On phone sizes the main menu is top to bottom.
>
> On phones it seems like the menu is too long. Too many selections.
>
> I am thinking of new menus.
>
> Any thoughts of a new style sheet handling?

Most mobile layout sites would use one-row scrollable nav. Taking advantage
of touch input. i.e. add these:

ul.sidenav {
display: flex;
}

If all nav links must be visible, then make it two columns. i.e. ad these:

ul.sidenav {
display: flex;
flex-wrap: wrap;
}
ul.sidenav > li {
width: 50%;
}

[dale]

Thank You !

Will give it a try and get back.

[Arno Welzel]

dale, 2023-04-20 17:03:

> https://www.dalekelly.org/
[...]

> On phones it seems like the menu is too long. Too many selections.

You may implement a drop down menu using CSS, also see here:

<https://blog.logrocket.com/create-responsive-mobile-menu-with-css-no-javascript/>



--
Arno Welzel
https://arnowelzel.de