Hello
Is there a way to create a two-tier (or two-row) navigation bar with simple CSS?
For example:
Top row: Home | About | Contact
Second row: Services | Products | Suppliers
Thank you
Hey vantagepointmg,
Thank you for the inquiry.
There is no built-in option for this, but you can use the following css code to create multiple rows and limit each row to four menu items.
#avia-menu {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
list-style: none;
padding: 0;
margin: 0;
float: right;
align-items: center;
}
#avia-menu > li {
flex: 1 1 auto;
min-width: 100px;
text-align: center;
}
#avia-menu > li > a {
display: block;
text-decoration: none;
}
#avia-menu > li {
flex: 1 1 calc(25% - 10px);
}
Best regards,
Ismael