The navbar has been redesigned to suit the mobile version. In the mobile version, the title will be hidden and the three buttons on the right will be put inside the hamburger. According to the todo list, a lot of useless divs were deleted
Types of change
[x] Finished todo List
[x] Adapt to mobile version
[x] Hide title in mobile version
Implementation
Here is the mobile version of the CBE tool
In this screenshot, I deleted a lot of unnecessary divs.
The reason why I still set the span of the LOGO to auto is that the span will affect the button display of the mobile version. I tested it several times on the web page and found that using auto does not affect the size of the LOGO display.
Setting span to a fixed size will not change the display on mobile version.
I add a line(border-bottom 1px) under the navbar make it looks same as Toby's repo
Use callback to adjust the mobile version(change the button's style)
Make the toggle upper
The More cbe tools dropdown box contain margin compare to the about and documentation button, For making them look same, I have to move it a little to the right ("margin-left": "250px",)
I hide the title in mobile version
Checklists
[x] todo delete divs, grids and cols
[x] todo the navbar should be less wide on large screens
Navbar modification
Description
The navbar has been redesigned to suit the mobile version. In the mobile version, the title will be hidden and the three buttons on the right will be put inside the hamburger. According to the todo list, a lot of useless divs were deleted
Types of change
Implementation
Here is the mobile version of the CBE tool
In this screenshot, I deleted a lot of unnecessary divs. The reason why I still set the span of the LOGO to auto is that the span will affect the button display of the mobile version. I tested it several times on the web page and found that using auto does not affect the size of the LOGO display. Setting span to a fixed size will not change the display on mobile version.
I add a line(border-bottom 1px) under the navbar make it looks same as Toby's repo
Use callback to adjust the mobile version(change the button's style)
Make the toggle upper
The More cbe tools dropdown box contain margin compare to the about and documentation button, For making them look same, I have to move it a little to the right ("margin-left": "250px",)
I hide the title in mobile version
Checklists