Why this works

This simple menu uses clean HTML and CSS, making it ideal for quick integration into Blumentals editors. It's fully responsive without needing any JavaScript frameworks.

Source Code

<nav class="responsive-menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<style>
.responsive-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  background: #343a40;
  border-radius: 8px;
}
.responsive-menu li {
  margin: 0;
}
.responsive-menu a {
  display: block;
  padding: 1rem 1.5rem;
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.3s;
}
.responsive-menu a:hover {
  background: #495057;
}
@media (max-width: 768px) {
  .responsive-menu ul {
    flex-direction: column;
    align-items: center;
  }
  .responsive-menu a {
    width: 100%;
    text-align: center;
  }
}
</style>