CSS style for site menu

Issue

I want to create a menu for the website to be on the left side like the image below. However, when I write the code and apply the styles, it doesn't display correctly and ends up like the right side of the image. What could be the issue? enter image description here

**style.css: **

.mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  /* height: var(--mobile-nav-height); */
  height: (var(--vh, 1vh) * 100);
  background-color: var(--primary-container);
  color: var(--on-background-variant);
  padding-block: 12px 16px;
  z-index: 4;
  box-shadow: var(--shadow-1);
}

**index.html: **

<nav class="mobile-nav" aria-label="primary">
      <ul class="navbar-list">
        <li class="nav-item">
          <a href="./recipes.html" class="nav-link">
            <span class="item-icon">
              <span class="material-symbols-outlined" aria-hidden="true">
                lunch_dining
              </span>
            </span>
            <span class="label-medium">Recipes</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link" aria-current="true">
            <span class="item-icon">
              <span class="material-symbols-outlined" aria-hidden="true">
                home
              </span>
            </span>
            <span class="label-medium">Home</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="./saved-recipes.html" class="nav-link">
            <span class="item-icon">
              <span class="material-symbols-outlined" aria-hidden="true">
                book
              </span>
            </span>
            <span class="label-medium">Saved</span>
          </a>
        </li>
      </ul>
    </nav>

Please guide me on setting up the menu.

Solution

For this issue, you can use the Flex property to fulfil your requirements, and we can set all the navigation items as per the left-side image. Use the below CSS code.

.mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    /* height: var(--mobile-nav-height); */
    height: (var(--vh, 1vh) * 100);
    background-color: var(--primary-container);
    color: var(--on-background-variant);
    padding-block: 12px 16px;
    z-index: 4;
    box-shadow: var(--shadow-1);
}

.mobile-nav .navbar-list {
    display: flex;
}

.mobile-nav .navbar-list .nav-item {
    flex: 1;
}

.mobile-nav .navbar-list .nav-item .nav-link {
    display: flex;
    flex-direction: column;
}

<nav class="mobile-nav" aria-label="primary">
    <ul class="navbar-list">
        <li class="nav-item">
            <a href="./recipes.html" class="nav-link">
                <span class="item-icon">
                    <span class="material-symbols-outlined" aria-hidden="true">
                        lunch_dining
                    </span>
                </span>
                <span class="label-medium">Recipes</span>
            </a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link" aria-current="true">
                <span class="item-icon">
                    <span class="material-symbols-outlined" aria-hidden="true">
                        home
                    </span>
                </span>
                <span class="label-medium">Home</span>
            </a>
        </li>
        <li class="nav-item">
            <a href="./saved-recipes.html" class="nav-link">
                <span class="item-icon">
                    <span class="material-symbols-outlined" aria-hidden="true">
                        book
                    </span>
                </span>
                <span class="label-medium">Saved</span>
            </a>
        </li>
    </ul>
</nav>

Answered By - Prashant