I want to create a submenu in a submenu from a basic page menu. If you do it in the same way as above, the layout will be broken. Which class should I give?

Hello, Sub Menu Items for the Page Menus are definitely supported: http://themes.semicolonweb.com/html/canvas/page submenu.html . Consider using this code: This will definitely work fine. Hope this Helps! Let us know if we can help you with anything else or if you find any further issues.

This is not supported out of the box but you can consider using the following CSS code: Hope this Helps! Let us know if we can help you with anything else or if you find any further issues.

Page navigation questions

3 replies·opened May 28, 2021

high8skyMay 28, 2021

<nav class="page-menu-nav">
  <ul class="page-menu-container">
    <li class="page-menu-item"><a href="#"><div>menu1</div></a>
      <ul class="page-menu-sub-menu">
        <li class="page-menu-item"><a href="#"><div>sub-1</div></a></li>
        <li class="page-menu-item"><a href="#"><div>sub-2</div></a></li>
      </ul>
    </li>
  </ul>
</nav>

I want to create a submenu in a submenu from a basic page menu.

<nav class="page-menu-nav">
  <ul class="page-menu-container">
    <li class="page-menu-item"><a href="#"><div>menu1</div></a>
      <ul class="page-menu-sub-menu">
        <li class="page-menu-item"><a href="#"><div>sub-1</div></a>
          <ul>
            <li>sub sub-1</li>
            <li>sub sub-2</li>
          </ul>
        </li>
        <li class="page-menu-item"><a href="#"><div>sub-2</div></a></li>
      </ul>
    </li>
  </ul>
</nav>

If you do it in the same way as above, the layout will be broken. Which class should I give?

SemiColonWebSTAFFMay 28, 2021

Hello,

Sub Menu Items for the Page Menus are definitely supported: http://themes.semicolonweb.com/html/canvas/page-submenu.html . Consider using this code:

<nav class="page-menu-nav">
	<ul class="page-menu-container">
		<li class="page-menu-item current"><a href="#"><div>Gallery</div></a></li>
		<li class="page-menu-item"><a href="#"><div>Features</div></a></li>
		<li class="page-menu-item"><a href="#"><div>Models</div></a></li>
		<li class="page-menu-item"><a href="#"><div>Reviews</div></a>
			<ul class="page-menu-sub-menu">
				<li class="page-menu-item"><a href="#"><div>Expert Reviews</div></a></li>
				<li class="page-menu-item"><a href="#"><div>User Reviews</div></a></li>
			</ul>
		</li>
		<li class="page-menu-item"><a href="#"><div>Compare</div></a></li>
		<li class="page-menu-item"><a href="#"><div>Build</div></a></li>
		<li class="page-menu-item"><a href="#"><div>Order</div></a></li>
	</ul>
</nav>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

high8skyMay 30, 2021

It's not a 2-depth menu, but I want to make a 3-depth menu.

SemiColonWebSTAFFMay 30, 2021

This is not supported out of the box but you can consider using the following CSS code:

@media (min-width: 992px) {
	.page-menu-sub-menu .page-menu-sub-menu {
		list-style: none;
		top: 0;
		left: 100% !important;
	}

	.page-menu-sub-menu .icon-angle-down {
		transform: rotate(-90deg) !important;
	}
}

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard