How to combine single menu items and dropdowns in navigation menu

[alex_2000]

Dear Support Team,

We are currently using the “index-corporate-3” demo page.
(We have generated a new skin which includes removing the forced square borders for buttons etc.)

I would like to combine “single level” menu elements as well as dropdowns in the navigation menu.
Simply put, some of the navigation elements serve as buttons and some as drop downs.

The problem is that when using:
<li class="dropdown dropdown-full-color dropdown-light"> <a href=""contact.html""> Contact Us </a> </li>

Upon hover, and unwanted white line appears under a button as it would be the beginning of a dropdown.

If using only the “dropdown-item” as shown below the correct background of the button and the hover effect are lost:
<li> <a href=""contact.html""> Contact Us </a> </li>

So the goal is to have the correct white background on active and hover effects for the “single level buttons” in the navigation menu as well as “dropdown buttons” type of navigation. The same behavior would be desired for the sticky navigation as well.

Thank you in advance,
Alexander

---

Template Version: 8.2

[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>

---

[Support]

Hello, please use the following css code and let us know if it works as you want:

(css/custom.css)

@media (min-width: 992px) {
	html #header .header-nav .header-nav-main nav > ul > li.dropdown-full-color.dropdown-light.open > a:before, html #header .header-nav .header-nav-main nav > ul > li.dropdown-full-color.dropdown-light:hover > a:before {
		opacity: 0 !important;
	}
	
	html #header .header-nav .header-nav-main nav > ul > li.dropdown-full-color.dropdown-light .dropdown-menu {
		margin-top: -3px;
	}
}

Kind Regards,

Jonas

---

[alex_2000]

Hello Jonas,

Thank you for the response.
Unfortunately that did no help.

To make sure that I habe conveyed my issue correctly I provide 2 images below.
The first is the menu status before hover.
The second image shows that “extra” white effect/bottom-underline added under a simple menu element (that has no drop down).
Hopefully that helps to clarify what the issue is.

Possibly the code of the navigation bar elements (provided in my initial post above) should be modified as well?

Thanks in advance,
Alexander

---

[Support]

Hello,

Thanks for the screenshots.

Please try with this new CSS code below:

@media (min-width: 992px) {
    html #header .header-nav .header-nav-main nav > ul > li.dropdown-full-color.dropdown-light.open > a:before, html #header .header-nav .header-nav-main nav > ul > li.dropdown-full-color.dropdown-light:hover > a:before {
        content: none;
    }
    html #header .header-nav:not(.header-nav-line):not(.header-nav-links) .header-nav-main nav > ul > li.dropdown-full-color.dropdown-light:hover > a {
        border-radius: 4px !important;
    }
    html #header .header-nav .header-nav-main nav > ul > li.dropdown-full-color.dropdown-light.open > a + .dropdown-menu, 
    html #header .header-nav .header-nav-main nav > ul > li.dropdown-full-color.dropdown-light:hover > a + .dropdown-menu {
        margin-top: -5px;
        border-radius: 0 4px 4px 4px;
    }
}

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

---

[alex_2000]

Hello Rodrigo,

That works now as expected.
Thank you for the quick solution.
Wishing you and the rest of Okler team a good start in 2020!

Best Regards,
Alexander

---

[Author]

Posts