In Susper, the drop-down menu is customized with colorful search icons and we wanted to maintain the same menu for mobile screens too, however the drop-down menu disappeared for all screens with width less than 767px. This blog can be used to learn how to create css classes for such drop-down menus without using any bootstrap.
This is how the issue was solved.
- Replacing standard bootstrap classes : The drop-down menu blocks had a source code as follows:
Using col-sm-4 will do the following
- For widths greater than 767px: Divide each row into four equally sized columns.
- For widths smaller than 767px: Stack all the columns on top of each other.
Since the drop-down menu’s design was to remain intact, I made the following changes:
- Replace row with menu-row
- Replace col-sm-4 with menu-item
Now I wrote personalized css for these classes.
- Width: It is used to set the width of the div class, each row now has a width of 267px, with each column in it having a width of 86px.
- Grid-template-columns: It is used to layout the structure of the template, here 1fr 1fr 1fr represents that there will be three columns in a row.
- Display: The display is set to inline block to overwrite the default property of the div element to start in a new line.
- Custom css for small screens : In standard bootstrap, for screen sizes less than 767px, dropdown class has properties like transparent background, no border etc. that need to be over written. So we add a new id for the div tag as shown:
- Position : absolute is used to make sure all our values are absolute and not relative to the higher div hierarchically
- Border: The values for the border represent the following respectively: Thickness, Style and Color.
- Auto: Here the value auto for left signifies that there is no fixed value for the left margin, it can take the default value
- For working of grids in Bootstrap: https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp
- A useful article for difference between id and class: https://css-tricks.com/the-difference-between-id-and-class