-
AuthorPosts
-
August 5, 2017 at 4:02 am #834565
Hello!
I’m looking to replicate the header found at this website: http://tinyurl.com/ybz7ckp2
I’ve tried for hours, tried multiple things including following the directions to add a widget to the header area, tried to use HTML in the Extra Elements -> Phone Number or small info text, tried multiple CSS ways, tried a 2nd menu, tried to use the icon shortcode multiple ways, and even additional plugins. How can I recreate this responsive sticky “contact” menu, with icons and the text (no need for the social icons)?
Website and admin logins found in Private Content
Thank you!
August 7, 2017 at 1:18 am #835172Hey enfold4phil,
I was able to get your icons to go inline with your text, in your header extra bar.
You can review your Enfold Theme Options > Header > Extra Elements > Phone Number or small info text and your Quick CSS for the exact code I used, but to help other people I will show the redacted info here:
In Enfold Theme Options > Header > Extra Elements > Phone Number or small info text:<ul class="contact"><li class="phone"><span class="in1">[av_font_icon icon='ue854' font='entypo-fontello' size='20px'][/av_font_icon]</span> (555) 555-5555 </li> | <li class="mail"> <span class="in1">[av_font_icon icon='ue805' font='entypo-fontello' size='20px'][/av_font_icon]</span> (Email address hidden if logged out) </li> | <li class="local"> Bussiness in the Greater Metro Area </li> - <u>Call Us Today: (555) 555-5555</u></ul>
In Quick CSS:
.in1 {display: inline-block !important; } .contact ul {list-style: none!important; list-style-type: none!important;} ul li { display: inline!important;}
Best regards,
MikeAugust 7, 2017 at 3:22 am #835180WOW! THANK YOU MIKE!!! :) That’s incredible, I struggled with why that wasn’t working properly.
Here is my final CSS based on Mike’s reply:
/* Misc - Adjusts the contact information bar in header above menu */ #header_meta { height: 53px; } #header_meta .avia-icon-pos-left { float: none !important; } #header_meta ul li { display: inline!important; padding: 19px 20px; border-left: 1px solid #E2E6E7; } #header_meta ul li:last-child { border-right: 1px solid #E2E6E7; } .phone-info { margin-top: 10px; margin-bottom: 0px !important; font-size: 14px; font-weight: 200; } .contact ul { list-style: none!important; list-style-type: none!important; } .in1 { display: inline-block !important; } @media only screen and (max-width: 870px) { #header_meta { height: 64px; } #header_meta ul li { display: block !important; line-height: 1.3; padding: 0px 0px; border-left: 0px; } #header_meta ul li:last-child { border-right: 0px; } .in1 { padding-right: 5px !important; } }
August 7, 2017 at 3:37 pm #835415Hi,
Great, glad you got it working and thanks for sharing your solution. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
RikardAugust 7, 2017 at 3:52 pm #835422One more question. Is there a way to align one of these list items to the right? So 2 of them would be aligned to the left, 1 of them aligned to the right? I’ve tried playing with divs, multiple ul’s, but can’t seem to get it. I’m trying to align the li class=”local” to the right side of the page. Login/admin info in my original post is still valid. Thanks!
- This reply was modified 7 years, 3 months ago by enfold4phil.
August 8, 2017 at 7:11 am #835709 -
AuthorPosts
- You must be logged in to reply to this topic.