Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 8, 2018 at 10:34 am #909670
    johnstanley1990

    Hi there, I would like to change the top bar (the bit where the phone number appears above the main header menu) so that on mobile a clickable phone icon appears as well as a clickable mail icon for email. Here is a screenshot of what I would like it to look like (found on another website)

    https://snag.gy/CxUtIg.jpg

    I am guessing this would require quite a lot of customisation of the theme, but just wanted to check if there was a way of achieving this?

    Thanks for your help

    February 8, 2018 at 2:07 pm #909766
    Mike

    Hey johnstanley1990,
    Please try adding this to your Enfold Theme Options > Header > Extra Elements > Phone Number or small info text:

    <ul class="contact"><li class="phone"><span class="in1"><a href="tel://1-555-555-5555">[av_font_icon icon='ue854' font='entypo-fontello' size='20px'][/av_font_icon]</a></span></li>   <li class="mail"><span class="in1"><a href="mailto: (Email address hidden if logged out) ">[av_font_icon icon='ue805' font='entypo-fontello' size='20px'][/av_font_icon]</a></span></li></ul>

    be sure to change the email address & phone number in the links.

    Then add this code in the General Styling > Quick CSS field:

    .in1 {display: inline-block !important; }
.contact ul {list-style: none!important; list-style-type: none!important;}
ul.contact li { display: inline!important;}

    This is the expected outcome:
    2018-02-08_070157

    Best regards,
    Mike

    February 21, 2018 at 3:06 pm #915487
    johnstanley1990

    Hi Mike,

    Thanks for this and sorry for the slow reply.

    Can you please post a link to hiring a freelancer?

    Thanks again

    February 21, 2018 at 3:31 pm #915508
    Victoria

    Hi johnstanley1990,

    Hire a freelancer here. Was Mike’s suggestion not helpful?

    Best regards,
    Victoria

    February 22, 2018 at 1:47 pm #916037
    johnstanley1990

    Hi Victoria,

    Yes Mike’s answer was helpful, but I just wanted to see your freelancer service out of interest as it is taking me longer as a novice to do the things I would like to do with the site.

    Thanks again for your help.

    Kind regards

    February 22, 2018 at 2:05 pm #916052
    Mike

    Hi,
    Glad to hear it was helpful, Thank you for using Enfold.

    Best regards,
    Mike

    July 26, 2019 at 11:54 am #1122134
    jl_tan

    ” <ul class=”contact”><li class=”phone”><span class=”in1″>[av_font_icon icon='ue854' font='entypo-fontello' size='20px'][/av_font_icon]</span> <li class=”mail”><span class=”in1″>(Email address hidden if logged out) “>[av_font_icon icon='ue805' font='entypo-fontello' size='20px'][/av_font_icon]</span> ”

    Hi Mike,

    Thanks for the code it worked perfectly! May I know how can I display the phone number and email following the icon on screen instead of just Icon? Also is it possible to display the number and email without the underline? Please check the link below to undertand what I meant.

    Here is an example (https://dcc-eu.com/), thanks for the helpful solution!

    • This reply was modified 5 years, 3 months ago by jl_tan.
    July 27, 2019 at 9:37 pm #1122439
    Mike

    Hi,

    @jl_tan     I took a look at your phone and email links, but it seems that you have already added the phone number and removed the underline. Is this solved now?
    Please see the screenshot in Private Content area.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Changing the top bar’ is closed to new replies.