Collapse two in header

[zerojano]

Good day support,

We are modifying a template example, in the Header we have 2 navs and we should have that information collapsed into a single button, we bought code:

			<header id="header" class="header-effect-shrink" data-plugin-options="{'stickyScrollUp': false, 'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': false, 'stickyChangeLogo': false, 'stickyStartAt': 30, 'stickyHeaderContainerHeight': 70}">
				<div class="header-body">
					<div class="header-top header-top-default border-bottom-0 bg-color-primary">
						<div class="container">
							<div class="header-row py-2">
								<div class="header-column justify-content-end">
									<div class="header-row pt-8">
										<div class="header-nav">
											<div class="header-nav-main header-nav-main-effect-1 header-nav-main-sub-effect-1">
												<nav class="collapse">
													<ul class="nav nav-pills" id="mainNav">
														<li class="dropdown">
															<a class="dropdown-item dropdown-toggle" href="#">Menu 1</a>
															<ul class="dropdown-menu">
																<li><a href="#" class="dropdown-item">test 1</a></li>
																<li><a href="#" class="dropdown-item">test 2</a></li>
															</ul>
														</li>
														<li class="dropdown"><a class="dropdown-item" href="#">Menu 2</a></li>
													</ul>
												</nav>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="header-container container">
						<div class="header-row">
							<div class="header-column">
								<div class="header-row">

									<div class="header-logo header-logo-sticky-change" style="width: 160px; height: 30px;">
										<a href="/">
											<img class="header-logo-non-sticky opacity-0" alt="UACh logo" width="215" height="108" src="img/logo-uach-small.png">
											<img class="header-logo-sticky opacity-0" alt="UACh logo" width="120" height="50" style="top: -10px;" src="img/logo-default-slim1.png">
										</a>
									</div>
								</div>
							</div>
							<div class="header-column justify-content-end">
								<div class="header-row pt-8">
									<div class="header-nav">
										<div class="header-nav-main header-nav-main-effect-1 header-nav-main-sub-effect-1">
											<nav class="collapse">
												<ul class="nav nav-pills" id="mainNav">
													
													<li class="dropdown">
														<a class="dropdown-item dropdown-toggle" href="#">Menu 3</a>
														<ul class="dropdown-menu">
															<li><a href="#" class="dropdown-item">Submenu 1</a></li>
															<li><a href="#" class="dropdown-item">Submenu 2</a></li>
														</ul>
													</li>
													<li class="dropdown"><a class="dropdown-item" href="#">Menu 4</a></li>
													<li class="dropdown"><a class="dropdown-item" href="#">Menu 5</a></li>
													<li class="dropdown">
														<a class="dropdown-item dropdown-toggle" href="#">Menu 6</a>
														<ul class="dropdown-menu">
															<li><a href="#" class="dropdown-item">Submenu 3</a></li>
															<li><a href="#" class="dropdown-item">Submenu 4</a></li>
														</ul>
													</li>
												</ul>
											</nav>
										</div>
										<button class="btn header-btn-collapse-nav" data-bs-toggle="collapse" data-bs-target=".header-nav-main nav">
											<i class="fas fa-bars"></i>
										</button>
									</div>
								</div>

							</div>
						</div>
					</div>
				</div>
			</header>

I attached an image of what it currently looks like:

https://bit.ly/3oyVQ7u

from mobile:
https://bit.ly/43pYGut

greetings

---

• This topic was modified 1 week, 4 days ago by zerojano.
• This topic was modified 1 week, 4 days ago by zerojano.

[Support]

Hello,

Unfortunately we don’t have an example of that on Porto, we just have this one:
https://www.okler.net/previews/porto/9.9.2/feature-navigations-logo-between.html

What you can do is to add the elements in the nav and add bootstrap helper classes, for example:

<li class="dropdown d-block d-lg-none">
	<a class="dropdown-item" href="#" title="">
		This will appear on mobile only.
	</a>
</li>

https://getbootstrap.com/docs/5.3/utilities/display/#hiding-elements

Hope that helps.

---

[zerojano]

Very good!

---

[Author]

Posts