Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • February 21, 2020 at 9:09 am #1186636
    pantoni

    Hi guys

    I would like to emulate the top red bar on this example site,

    Home

    After enabling Enfold Header > Extra Elements for Phone/Extra Info, how would I…

    1. Add the Email next to Phone the same as example above?

    2. Add similar icons?

    3. Add link code for both Email and Phone to launch those apps.

    Thanks.

    February 22, 2020 at 1:54 pm #1186961
    Rikard

    Hey pantoni,

    You can add that to the phone number field:

    <a href="tel:0000">Call Us</a>
    <a href="mailto: (Email address hidden if logged out) ">Email Us</a>

    I’m not sure which icons you are looking to add though?

    Best regards,
    Rikard

    February 23, 2020 at 1:48 am #1187033
    pantoni

    Thanks Rikard

    WIll give that a shot. Couple of other queries for you…

    1. Was looking at using FontAwsome and an icon such as: <i class=”fas fa-phone-alt”></i>
    2. Where do I control the font colour/size and the background color of the nav strip?

    Thank you

    February 24, 2020 at 2:54 am #1187165
    pantoni

    HI
    The tel and mailto links are working correctly on the sit ebelow – thanks.

    Just need to know how to:

    1. Add fontawesome icons before those links such as
    <i class=”fas fa-phone-alt”></i>

    2. How to increase size of social icons and phone/telephone font size and colours. I’ve tried this code but it doesn’t work….
    /* Phone info font size */
    .phone-info { font-size: 18px; }

    3. How to change top bar background color

    Thanks

    February 24, 2020 at 5:19 am #1187186
    Rikard

    Hi,

    Thanks for the update.

    1. Did you import Fontawesome to your site? If not then please try doing that first: https://fontawesome.com/start. After that you should be able to simply paste the markup above and your icons should appear.

    2. Please try this in Quick CSS:

    #header_meta li a:before {
  font-size: 20px; 
}

#header_meta .phone-info a {
  font-size: 16px; 
}

    3. Please try this CSS as well:

    #header_meta {
  background: red; 
}

    Best regards,
    Rikard

    February 24, 2020 at 7:24 am #1187218
    pantoni

    Thanks Rikard!

    I’ve got that all working well. Just a couple of tiny tweaks…

    1. Is there any way to control the Social hover states to one single color?

    2. On mobile, the hamburger menu and Phone/Email links display well. However on desktop when reducing the browser down to similar width, the hamburger menu gets pushed over the logo by the Social icons (which are removed from display on Mobile which is good). Is there a way to disable the Social icons on desktop at that view port like on mobile?

    Screengrab here >>
    https://ibb.co/5jzhwC1

    February 24, 2020 at 12:26 pm #1187281
    Rikard

    Hi,

    1. Please try this CSS:

    ul.social_bookmarks li:hover {
  background-color: green !important;
}

    2. And this to hide the social icons on mobile:

    @media only screen and (max-width: 767px) {
.responsive #top #header .social_bookmarks {
    display: none !important;
}
}

    Best regards,
    Rikard

    February 25, 2020 at 8:19 am #1187610
    pantoni

    Thanks Rikard

    I’ve got 2. working well!

    No luck with 1. Social icons hover though?

    Cheers

    February 25, 2020 at 2:49 pm #1187701
    Rikard

    Hi,

    Please try this instead for the social icons hover:

    ul.social_bookmarks li:hover a {
  background-color: green !important;
}

    Best regards,
    Rikard

    February 26, 2020 at 12:47 am #1187911
    pantoni

    Thanks Rikard – that worked!

    cheers

    February 27, 2020 at 4:14 am #1188321
    Rikard

    Hi,

    Great, I’m glad that you got it working and thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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