Submneu does not work in the secondary menu

[mac]

Hello,

on this page: https://portotheme.com/html/porto/8.0.0/index-corporate-hosting.html

there is a secondary menu, just below the slide.
Is it possible to insert a Menu with submenus?
I did a test but the sub menu does not open.

Example (My Submenu):

<aside class="nav-secondary" id="navSecondary" data-plugin-sticky data-plugin-options="{'minWidth': 991, 'padding': {'top': 72}}">
  <div class="container">
    <div class="row">
      <div class="col">
        <ul class="nav nav-pills nav-pills-tertiary justify-content-center">
          <li class="nav-item"><a class="nav-link" data-hash data-hash-offset="165" href="#features">Features</a></li>
          <li class="nav-item"><a class="nav-link" data-hash data-hash-offset="165" href="#plans">Hosting Plans</a></li>
          <li class="nav-item"><a class="nav-link" data-hash data-hash-offset="165" href="#testimonials">Testimonials</a></li>
          <li class="nav-item"><a class="nav-link" data-hash data-hash-offset="165" href="#search-domain">Search Domain</a></li>
          <li class="nav-item"><a class="nav-link" data-hash data-hash-offset="165" href="#blog">Our Blog</a></li>
          <li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">My Submenu</a>
            <ul class="dropdown-menu">
              <li><a class="nav-link" href="#">Submenu</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</aside>

---

[Support]

Hello,

You can do that following the steps below:

First use this HTML:

<aside class="nav-secondary" id="navSecondary" data-plugin-sticky data-plugin-options="{'minWidth': 991, 'padding': {'top': 72}}">
	<div class="container">
		<div class="row">
			<div class="col">
				<ul class="nav nav-pills nav-pills-tertiary justify-content-center">
					<li class="nav-item"><a class="nav-link" data-hash data-hash-offset="165" href="#features">Features</a></li>
					<li class="nav-item"><a class="nav-link" data-hash data-hash-offset="165" href="#plans">Hosting Plans</a></li>
					<li class="nav-item"><a class="nav-link" data-hash data-hash-offset="165" href="#testimonials">Testimonials</a></li>
					<li class="nav-item"><a class="nav-link" data-hash data-hash-offset="165" href="#search-domain">Search Domain</a></li>
					<li class="custom-dropdown nav-item">
						<a class="nav-link" data-hash data-hash-offset="165" href="#blog">Our Blog</a>
						<ul class="dropdown-menu">
							<li><a class="nav-link" href="#">Submenu Item 1</a></li>
							<li><a class="nav-link" href="#">Submenu Item 2</a></li>
							<li><a class="nav-link" href="#">Submenu Item 3</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
</aside>

Add in (css/custom.css):

.custom-dropdown {
	position: relative;
}

.custom-dropdown > .dropdown-menu {
	border-color: #f8f8f8;
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.07);
}

.custom-dropdown > .dropdown-menu li a {
	color: #777;
	transition: ease all 300ms;
	font-weight: 400;
}

.custom-dropdown > .dropdown-menu li:hover > a {
	color: #1d7fbe;
	background: #f8f8f8;
}

.custom-dropdown:hover > .dropdown-menu {
	display: block;
	top: 99%;
}

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

[mac]

Hi, it works great and thank you very much!
I just have one last question, to make it responsive on mobile (size less than 990px) the hamburger menu icon appears. can you help me? Thank you!

---

[Support]

Hello,

Unfortunately the template don’t comes with a ready feature to show a hamburguer button for the secondary nav on mobile. Instead of it you can try enabling the nav secondary sticky on mobile. For it change the minWidth option like below:

<aside class="nav-secondary" id="navSecondary" data-plugin-sticky data-plugin-options="{'minWidth': 0, 'padding': {'top': 72}}">

* This will enable the sticky on mobile and the sub menus will works like in large devices.

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[mac]

Hello,
thank you very much for the valuable information!

---

[Author]

Posts