Archived topic
Aligning Custom Element to the Right of Secondary Nav
6 replies · Started by Clay on May 23, 2022
Good morning,
I’m using the Hook element to display some Social Icons. As of now, I’m testing and have placed the new icons in the generate_after_secondary_menu Custom Hook area. Right now, it is aligning underneath the secondary nav. I'd like it to align to the right (and pick a new class name, "social_nav"). Sorry, my Flex CSS is not up to snuff!
Site is here: https://nkadd.us/
Thanks for any assistance!
-CDB
Hi there,
Not sure if I fully understand.
I'm somehow seeing two secondary navigations here:
https://www.screencast.com/t/vSvx9znKLg
Is that intended? and How did you add them?
Right, I started this a couple weeks ago, got sidetracked and forgot where I was and what I was doing! I created an Element called 'Social Media Icons" using the Custom Hook and selecting "generate_after_secondary_menu". The contents of the Element are:
<div class="main-nav">
<ul id="menu-secondary" class=" secondary-menu sf-menu">
<li id="menu-item-205" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-205"><a href="https://www.facebook.com/nkadd1971" target="_blank"><img src="https://nkadd.us/wp-content/uploads/2022/05/facebook-icon.png" width="30" height="30"></a></li>
<li id="menu-item-204" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-204"><a href="https://nkadd.us/board-of-directors/">Board of Directors</a></li>
<li id="menu-item-203" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-203"><a href="https://nkadd.us/partner-agencies/">Partner Agencies</a></li>
<li id="menu-item-202" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-202"><a href="https://nkadd.us/local-cities-counties/">Local Cities / Counties</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-27"><a href="https://nkadd.betterteam.com/">Career Opportunities</a></li>
<li id="menu-item-201" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-201"><a href="https://nkadd.us/transparency/">Transparency</a></li>
</ul>
</div>
The reason you see two secondary navs is due to me not changing the name of the class away from main-nav. The Facebook Icon is what I want in the "third-nav" and I need it right aligned to the current secondary nav (which starts with About Us).
Hope that helps...
Any chance you have an example of the layout you are trying to achieve here?
This is our current site... social nav is on the top left, secondary nav on the top right. In the new site, I'm flipping those, secondary on the left, social on the right. At the moment, the second secondary-nav is underneath the first. I need it aligned to the right.
OK, I have made some adjustments on my own... and it appears that it just seems to work? Odd. I think we are good for now. I'll the right icons in and if I need further assistance, I'll reach back out!
Sounds good :)
