User logout button, responsive with quark

[finanalyst]

When the website is on a small screen (smart phone), the user-logout button is far too large and gets misplaced.

Also, to my eye, for large screens (desktop), the user/logout button unbalances the top navigation bar.

So for my websites, I replaced the user/logout button by putting the username and 'logout' inside a tooltip using css (see attachment). The result is that a single user icon is visible initially, but when hovering over the icon, the name of the user & logout becomes visible. Logging out happens with a click on the icon.

However, I could only get this to work if I put the twig include code inside partials/navigation.html.twig in order to put it inside the <ul> container. It would be better if this code is in partials/base.html.twig as it is at present (better css might solve this, but ...). The container partials/navigation get put into is made invisible when the html is rendered for a smart phone. (Good, see below)

Currently, when the web page is constrained to small dimensions, eg. smart phone, the navigation menu collapses to a 'hamburger', but the logout button remains the same. This is really ugly on a smart phone. So in addition, to placing the user button inside navigation bar, which disappears when dimensions get small, I have placed the code for user login inside the mobile menu bar, which is invisible for large screens and visible for small screens.

This combination seems a much neater way of handling the logout button. I offer it for your consideration.

I am attaching a zip with screenshots of a website that has the modifications in, showing large & small screens (in firefox's responsive mode) and with the cursor over the icon, together with modified versions of partials/base.html.twig, partials/navigation.html.twig, and css/custom.css responsive_user.zip

[newmedicine]

This is an issue for me too, I'll look at your files, thanks

[rhukster]

More an issue for Quark me thinks.