Reply To: How to combine single menu items and dropdowns in navigation menu

[alex_2000]

Here is the current header sample code:

<header id="header" data-plugin-options="{'stickyEnabled': true, 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': true, 'stickyStartAt': 97, 'stickySetTop': '-97px', 'stickyChangeLogo': true}">
	<div class="header-body border-color-primary border-top-0 box-shadow-none">
		<div class="header-container container z-index-2">
			<div class="header-row py-2">
				<div class="header-column">
					<div class="header-row">
						<div class="header-logo header-logo-sticky-change">
							<a href="index.html">
								<img class="header-logo-sticky opacity-0" alt="Porto" width="180" height="48" data-sticky-width="120" data-sticky-height="43" data-sticky-top="88" src="img/logo.png">
								<img class="header-logo-non-sticky opacity-0" alt="Porto" width="180" height="48" src="img/logo.png">
							</a>
						</div>
					</div>
				</div>
				<div class="header-column justify-content-end">
					<div class="header-row">
						<ul class="header-extra-info d-flex align-items-center">
							<li class="d-none d-sm-inline-flex">
								<div class="header-extra-info-icon">
									<i class="far fa-envelope text-color-primary text-4 position-relative bottom-2"></i>
								</div>
								<div class="header-extra-info-text">
									<label>GET IN TOUCH</label>
									<strong><a href="contact.html">CONTACT US</a></strong>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="header-nav-bar bg-primary" data-sticky-header-style="{'minResolution': 991}" data-sticky-header-style-active="{'background-color': 'transparent'}" data-sticky-header-style-deactive="{'background-color': '#0088cc'}">
			<div class="container">
				<div class="header-row">
					<div class="header-column">
						<div class="header-row justify-content-end">
							<div class="header-nav header-nav-force-light-text justify-content-center py-2 py-lg-3" data-sticky-header-style="{'minResolution': 991}" data-sticky-header-style-active="{'margin-left': '135px'}" data-sticky-header-style-deactive="{'margin-left': '0'}">
								<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 dropdown-full-color dropdown-light">
												<a class="dropdown-item active" href="index.html">
													Home
												</a>
											</li>
											<li class="dropdown dropdown-full-color dropdown-light">
												<a class="dropdown-item" href="about.html">
													About Us
												</a>
											</li>
											<li class="dropdown dropdown-full-color dropdown-light">
												<a class="dropdown-item" href="services.html">
													Services
												</a>
												<ul class="dropdown-menu">
													<li>
														<a class="dropdown-item" href="main-services.html">
															Main Services
														</a>
													</li>
													<li>
														<a class="dropdown-item" href="additional-services.html">
															Additional Services
														</a>
													</li>
												</ul>
											</li>
											<li class="dropdown dropdown-full-color dropdown-light">
												<a class="dropdown-item" href="contact.html">
													Contact
												</a>
											</li>
										</ul>
									</nav>
								</div>
								<button class="btn header-btn-collapse-nav my-2" data-toggle="collapse" data-target=".header-nav-main nav">
									<i class="fas fa-bars"></i>
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</header>

---