Jump to content
  • Status Definitions

    Pending = We have not yet reviewed the suggestion.

    Under Review = We are currently reviewing the suggestion. Check the suggestion's comments for updates from the team.

    Accepted = We've approved the suggestion and it will be implemented in a future update.

    Completed = The suggestion has now been implemented.

    Rejected = The suggestion has been rejected. Check the comments section for more information.

     

    Please do not post duplicate suggestions or report bugs. This area is for suggestions for changes/improvements to the game.

Navbar redesign


Zoltan
  • Under Review

It's one of those things waiting in the background to be redone, but I guess it's inevitable at some point.
Not only to use a much simple flex here too, but to sort out the problem of different viewport widths.

Right now if the width is below roughly 1300px, the navbar breaks and looks ugly, under a 1000px it's becoming hard to use.

So I've collected some pure css flex solutions from codepen, check them out when you feel to.
 

https://codepen.io/samnorton/pen/zBYMJG
https://codepen.io/stanlouis/pen/gOpxKEe
 

or for a more robust, JS included sample check out microsoft's flexible navbar
https://codepen.io/fasterv_410/pen/rrxGXE
 

These could be used as basis, as we still need to adjust it, make the navbar sticky etc.



  Report Suggestion



User Feedback

Recommended Comments

  • Developers

My only issue with the first two is they appear to only be a single level, so no drop-downs like we currently have. I guess we could maybe redesign “main” pages for each of the modules, so this would work, but that might lead to more clicks?

Link to comment
Share on other sites

  • Administrators

Oh no, I meant just to show how they handle the flex to display stuff and keep them aligned regardless of the screen size,

For example, the first one has the brand on the left, the menu on the right, when the screen size gets low, the menu is displayed in the middle vertically.

The second similarly has branding on left, menu on right, if shrinked horizontally, then it turns into an icon with which you can get the menu to pop up.

These two are amazing, because they are lightning fast, and don't use any scripts, just css.

And then there is the MS version, obviously here with js you can do much more,

So I just really meant these as some guides or help to create our own.

Since we want the navbar to be visible everywhere on the page, we need it to be sticky.

So in overall what I had in mind:

- a flex navbar to be readable and usable with any screensize
- make it sticky so it's visible and accessable when you scroll down
 

  • Like 1
Link to comment
Share on other sites



Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...