Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 5, 2017 at 4:02 am #834565
    enfold4phil

    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 #835172
    Mike

    Hey 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,
    Mike

    August 7, 2017 at 3:22 am #835180
    enfold4phil

    WOW! 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 #835415
    Rikard

    Hi,

    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,
    Rikard

    August 7, 2017 at 3:52 pm #835422
    enfold4phil

    One 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, 4 months ago by enfold4phil.
    August 8, 2017 at 7:11 am #835709
    Rikard

    Hi,

    I think that would be difficult unfortunately. You could try to display it absolute but I think you would need to spend a lot of time on getting that looking right.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.