Layout Issue

[leemchildress]

Below is the HTML for my top navigation bar. I’m having all sorts of issues getting the same spacing between the social media icons and the search icon. I finally placed the search within the <ul> tag, but because of the divs it shifts the position of the block and the background circle for search doesn’t line up. (I’d rather not have a hover background for search and signin.)

Decided I needed to reach out to the expert for some guidance.

    
    		        <!-- Top Navigation: Start -->
                        <!-- ============================================= -->

    					<div class="header-top header-top-borders">
    						<div class="container h-100" style="padding-top: 10px;">
    							<div class="header-row h-100">
    								<div class="header-column justify-content-start d-none d-sm-block">
    									<div class="header-row">
    										<nav class="header-nav-top">
    											<ul class="nav nav-pills">
    												<li class="nav-item nav-item-anim-icon d-none d-md-block">
    													<a><i class="fas fa-angle-right"></i> About Us</a>
    												</li>
    												<li class="nav-item nav-item-anim-icon d-none d-md-block">
    													<a><i class="fas fa-angle-right"></i> Contact Us</a>
    												</li>

    												<!-- <li class="nav-item nav-item-left-border nav-item-left-border-remove nav-item-left-border-sm-show">
    													<span class="ws-nowrap"><i class="fas fa-phone"></i> (219) 465-3400</span>
    												</li> -->
    											</ul>
    										</nav>
    									</div>
    								</div>
    								<div class="header-column justify-content-end" style="margin-top: 10px;">
    									<div class="header-row">
    										<ul class="header-social-icons social-icons social-icons-clean">
    											<li class="social-icons-facebook"><a><i class="fab fa-facebook-f"></i></a></li>
    											<li class="social-icons-x"><a><i class="fab fa-x-twitter"></i></a></li>
    											<li class="social-icons-linkedin"><a><i class="fab fa-linkedin-in"></i></a></li>
    											<li><div class="header-nav-features-search-reveal-container"><div class="header-nav-feature header-nav-features-search header-nav-features-search-reveal d-inline-flex"><a><i style="padding-left: 5px;" class="fas fa-search header-nav-top-icon header-search-custom"></i></a></div></div></li>
    											<li><a><i class="far fa-user"></i></a></li>
    										</ul>
    									</div>
    								</div>
    							</div>
    						</div>
    					</div>
    			<!-- Top Navigation: End -->
                        <!-- ============================================= -->

---

• This topic was modified 1 month, 1 week ago by leemchildress.
• This topic was modified 1 month, 1 week ago by leemchildress.
• This topic was modified 1 month, 1 week ago by leemchildress.
• This topic was modified 1 month, 1 week ago by Support.

[Support]

Hello, I’m not sure if I understand the issue very well, but here’s my suggestion:

<div class="header-column justify-content-end">
	<div class="header-row">
		<ul class="header-social-icons social-icons social-icons-clean">
			<li class="social-icons-facebook"><a href="http://www.facebook.com/" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a></li>
			<li class="social-icons-x"><a href="http://www.x.com/" target="_blank" title="X"><i class="fab fa-x-twitter"></i></a></li>
			<li class="social-icons-linkedin"><a href="http://www.linkedin.com/" target="_blank" title="Linkedin"><i class="fab fa-linkedin-in"></i></a></li>
			<li><span class="header-nav-features-search-reveal-container"><span class="header-nav-feature header-nav-features-search header-nav-features-search-reveal"><a href="#" class="header-nav-features-search-show-icon text-decoration-none"><i class="fas fa-search header-nav-top-icon header-search-custom"></i></a></span></span></li>
			<li><a href="#" class="header-nav-features-toggle text-decoration-none"><i class="far fa-user"></i></a></li>
		</ul>
	</div>
</div>

Change from DIV to SPAN, and remove d-inline-flex.

You can also remove the margin.

If you want to make items up/down you can add these classes to elements:

“p-relative top-5”, or “p-relative bottom-5”

* 5 is an example, it can be from 1 to 10.

Hope that helps.

---

[leemchildress]

You are so amazing. That works perfectly!

---

[Author]

Posts