Adding in phone number with text instead of social media icons

Home Forums Forstron Adding in phone number with text instead of social media icons

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #22229
    CarterB2019
    Participant

    Adding in phone number with text instead of social media icons

    Resolved

    Hey there! Have you noticed this support service is provided FREE of charge?
    If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you

    Consider a donation →

    Hi there,

    I want to add in a phone number to the right side of menu in the Forstron theme. It will basically read “Call 0200 0000 000”.

    I tried finding a solution, but couldn’t. Can you please tell me what codes should I edit and how?

    Thanks!

    #22230
    Oliver Juhas
    Keymaster

    Hi CarterB2019,

    1. First please add a custom link into the social links menu with “Call 0200 0000 000” as link text and “tel:02000000000” as URL.
    2. Then apply this custom CSS to enable the phone icon:
      .social-links a[href^="tel:"]:before {
      	content: '\f437';
      }

      or use this custom CSS to enable your link text instead:

      .social-links a[href^="tel:"]:before {
      	display: none;
      }
      
      .social-links a[href^="tel:"] .screen-reader-text {
      	clip: auto;
      	clip-path: none;
      	position: relative !important;
      	width: auto;
      	height: auto;
      	margin: 0;
      	overflow: visible;
      	font-size: 16px;
      }

    Best regards,

    Oliver Juhas
    WebMan Design

    #22232
    CarterB2019
    Participant

    Thank you Oliver.

    This works, but there is a slight issue. When I hover over the number, it flickers and shows a button below.

    #22240
    Oliver Juhas
    Keymaster

    Hi CarterB2019,

    Indeed. Please update the CSS code to:

    .social-links a[href^="tel:"] .screen-reader-text,
    .social-links a[href^="tel:"] .screen-reader-text:hover,
    .social-links a[href^="tel:"] .screen-reader-text:active,
    .social-links a[href^="tel:"] .screen-reader-text:focus {
    	clip: auto;
    	clip-path: none;
    	position: relative !important;
    	width: auto;
    	height: auto;
    	margin: 0;
    	overflow: visible;
    	font-size: 20px;
    	display: inline;
    	left: auto;
    	top: auto;
    	padding: 0;
    	background: none;
    	color: inherit;
    	font-weight: normal;
    	box-shadow: none;
    }

    Best regards,

    Oliver Juhas
    WebMan Design

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