Phone number outside from collapse menu

Sparkling
1

Hi ,I want to put a text or a button with phone number or social icon in navbar near Menu button.
I want it to be viewable on a phone.

Link with site model : http://www.cofetaria-bombo.ro/ro/ (that facebook icon ,in phone view is still there )
Link with my site : http://website.allincluded.ro/

2

Hi @alexandrupistol,

I hope you are well today and thank you for your question.

You can try displaying the social icon by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS


div#logo{
  position: relative;
  margin-right: 130px;
  max-width: 130px;
}

div#logo:after {
    content: '';
    display: block;
    width: 100px;
    height: 100px;
    max-width: 100%;
    background: url("https://colorlib.com/wp/wp-content/uploads/sites/2/colorlib-logo-top.png") no-repeat;
    background-size: 100%;
    position: absolute;
    right: -100%;
    top: 40%;
    z-index: 999999;
}

Please change the image URL in the above CSS code to the social icon image URL.

Best Regards,
Movin

3

Thank you so much ! I want to add phone number insted social icon . I cant put an text or photo with a number and make him callable ? It is possible ?

4

I can see you have managed to display both social icons and phone number on your site as shown in the attached screenshot.

Please advise.

5

Hi @Movin ,

I did it ,for my phone it’s ok ,but for a smaller screen it is a problem , do you know hot to make him responsive ?

Thank you again ,you are the best .

6

Try using the below custom CSS code so that it will be displayed on mobile devices as shown in the attached screenshot.

@media (max-width: 367px) {
div#logo {
    margin-right: 0;
    margin-bottom: 40px;
}
div.numar-telefon {
    right: -18%;
    top: 100%;
}
}