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:
class=“dropdown-menu”>
class=“row”>
class=“col-sm-4”>
</div>
</div>
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: 267px;
grid–template–columns: 1fr 1fr 1fr;
background-color: white;
}
.menu-item{
display: inline–block;
width: 86px;
}
- 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:
<div id=“small-drop” class=“dropdown-menu”>
/** Now we add css for it, as shown: **/
@media screen and (max-width: 767px) {
#small-drop{
position: absolute;
background-color: white;
border: 1px solid #cccccc;
right: -38px;
left: auto;
}
- 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
References:
- 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