Responsive issue in Nav element

[RohanJacob23]

Description

When in mobile view, the navigation bar is overflowing due to excessive padding.

Reproduction

1. Go to Creative Commons Opensource in mobile view
2. see the nav element overflowing from the html element

Expectation

The nav element should not be overflowing from html element and it should be responsive.

Screenshots

Additional context

Resolution

• [x] I would be interested in resolving this bug.

[possumbilities]

To clarify the above since the photo might not explain this detail fully, on smaller viewports the "hamburger" icon has spacing between itself and the right edge of the viewport.

However, on much smaller viewports, due to the fact that the logo doesn't narrow in some way (padding, size, etc.). This occurs.

The expectation would be that some degree of right edge padding exists between the "hamburger" and the viewport edge and that elements further to the left narrow in some fashion.

[RohanJacob23]

Solution that I have thought of:

1. Set the width of the SVG to 100%. By doing this, the logo won't occupy the entire space of the navbar flex, avoiding overflow issues with the hamburger icon.

2. Adjust the padding from padding: 2rem to padding: 2rem 0.5rem. This decreases the left and right padding, preventing the logo from becoming too small and improving the mobile view.

The output would something like this:

[RohanJacob23]

Hi, Should I start working on this?

[possumbilities]

@RohanJacob23 sure, please do! ❤️

[RohanJacob23]

Hi @possumbilities,

Is it okay if I can complete the task by Monday or Tuesday?

[possumbilities]

@RohanJacob23 That's absolutely fine! ❤️

[RohanJacob23]

Hello @possumbilities,

I am facing this error:-

Traceback (most recent call last): File "C:\Users\rohan\AppData\Local\Programs\Python\Python39\lib\runpy.py", line 197, in _run_module_as_main return _run_code(code, main_globals, None, File "C:\Users\rohan\AppData\Local\Programs\Python\Python39\lib\runpy.py", line 87, in _run_code exec(code, run_globals) File "C:\Users\rohan\.virtualenvs\creativecommons.github.io-source-OHAFjTLf\Scripts\lektor.EXE\__main__.py", line 7, in <module> File "C:\Users\rohan\.virtualenvs\creativecommons.github.io-source-OHAFjTLf\lib\site-packages\lektor\cli.py", line 622, in main cli.main(args=args, prog_name=name) File "C:\Users\rohan\.virtualenvs\creativecommons.github.io-source-OHAFjTLf\lib\site-packages\click\core.py", line 1078, in main rv = self.invoke(ctx) File "C:\Users\rohan\.virtualenvs\creativecommons.github.io-source-OHAFjTLf\lib\site-packages\click\core.py", line 1688, in invoke return _process_result(sub_ctx.command.invoke(sub_ctx)) File "C:\Users\rohan\.virtualenvs\creativecommons.github.io-source-OHAFjTLf\lib\site-packages\click\core.py", line 1434, in invoke return ctx.invoke(self.callback, **ctx.params) File "C:\Users\rohan\.virtualenvs\creativecommons.github.io-source-OHAFjTLf\lib\site-packages\click\core.py", line 783, in invoke return __callback(*args, **kwargs) File "C:\Users\rohan\.virtualenvs\creativecommons.github.io-source-OHAFjTLf\lib\site-packages\click\decorators.py", line 93, in new_func return ctx.invoke(f, obj, *args, **kwargs) File "C:\Users\rohan\.virtualenvs\creativecommons.github.io-source-OHAFjTLf\lib\site-packages\click\core.py", line 783, in invoke return __callback(*args, **kwargs) File "C:\Users\rohan\.virtualenvs\creativecommons.github.io-source-OHAFjTLf\lib\site-packages\lektor\cli.py", line 342, in server_cmd ctx.load_plugins(extra_flags=extra_flags) File "C:\Users\rohan\.virtualenvs\creativecommons.github.io-source-OHAFjTLf\lib\site-packages\lektor\cli_utils.py", line 135, in load_plugins load_packages(self.get_env(extra_flags=extra_flags), reinstall=reinstall) File "C:\Users\rohan\.virtualenvs\creativecommons.github.io-source-OHAFjTLf\lib\site-packages\lektor\packages.py", line 290, in load_packages update_cache( File "C:\Users\rohan\.virtualenvs\creativecommons.github.io-source-OHAFjTLf\lib\site-packages\lektor\packages.py", line 251, in update_cache click.echo("Updating packages in %s for project" % package_root) File "C:\Users\rohan\.virtualenvs\creativecommons.github.io-source-OHAFjTLf\lib\site-packages\click\utils.py", line 314, in echo file = auto_wrap_for_ansi(file) # type: ignore File "C:\Users\rohan\.virtualenvs\creativecommons.github.io-source-OHAFjTLf\lib\site-packages\click\_compat.py", line 533, in auto_wrap_for_ansi import colorama ModuleNotFoundError: No module named 'colorama'

Could please guide me.

[possumbilities]

@RohanJacob23 what command or activity is causing this error? Could you share that as well?

[RohanJacob23]

pipenv install --dev

[possumbilities]

@RohanJacob23 and to verify you did go through the prerequisites for installation before?

[RohanJacob23]

Yes i did

[possumbilities]

@RohanJacob23 I'll look into it further. We're starting to stray from the topic here.

You might be better served by joining the Dev community on the CC Community Slack and asking for help there.

Or making a new Issue about this setup error, documenting it fully, and proceeding from there.

[NayanAnsh]

I would like to work on this issue.

[possumbilities]

@NayanAnsh If you'd like to give it a try, sure.

[wasimapinjari]

@possumbilities CSS needs some heavy fixing is it possible to fix the CSS and then substitute the fixed version in CDN?

As you can see the footer has some problems:

The alignment is off, there is unnecessary spacing creating a bad responsive design, if I type the wrong email there are no indicators for any errors (no error handling), and the LinkedIn icon is odd-man-out it should be a circle as well and it would be nice if you add a GitHub icon next to it for people to find this open-source project easily.

[namanbarkiya]

Hey, @possumbilities Could you kindly review the pull request? There hasn't been any activity since Aug 3, so I attempted to fix it without being formally assigned.