Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1490213

    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

    #1490229

    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

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.