CSS style for site menu

Question

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.

Answer 1

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>