Additional information and icons in NAV menu

Hola. My site address: www.lutrail.com/fr
I am trying to add some fixed info in my top nav menu. I made it using some code I found in the forum:

nav#mainnav:before {
    display: block;
    text-align: left;
    padding-right: 14px;
    font-size: 18px;
    color: #ffa500;
    content: "Tel: 054-7924242 | Email: LutraTravels@gmail.com";
}

Two problems:

  1. When you scroll down it jumps at the beginning, doesn’t go smoothly as usual.
  2. I want to add FontAwesome icons before the ‘Tel’ and the ‘E-Mail’. Tried to install ‘Better Font Awesome’ plugin in order to that, copied the code it gave me and it just didn’t work if I paste it where the content it. when I do that the content just vanishes.
    Any suggestions?
    Thanks ahead.

Well?

Hello @ncamaa,

Please try to use the following CSS code instead of the code that you are using now for that.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

header#masthead div.col-md-8.col-sm-4.col-xs-12::before {
    display: block;
    text-align: left;
    font-size: 18px;
    color: #ffa500;
    content: "\f095 054-7924242 | \f0e0 LutraTravels@gmail.com";
    font-family: "FontAwesome";
}

@media only screen and (max-width: 767px) {
    header#masthead div.col-md-8.col-sm-4.col-xs-12::before {
        text-align: center;
    }
}

.btn-menu {
    margin-bottom: 15px;
}

By the way, Sydney Pro theme has a nice feature for that, you might want to check Sydney Pro Demo site here:
http://demo.athemes.com/themes/?theme=Sydney%20Pro

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Thank you very much for your help @Roman !, you guys have the best themes and the best support!
It still jumps a bit but It’s fine. By the way, is there any way to make it clickable? or copyable?

You are welcome @ncamaa! And thank you for the kind words :slight_smile:

I think that it’s possible, but I don’t think that there is an easy way to achieve that. As an option, you can find a reputable freelancer on Upwork for this kind of service.

Kind Regards, Roman.

I’m sorry for sticking to small details. When I put the code you posted above:

header#masthead div.col-md-8.col-sm-4.col-xs-12::before {
    display: block;
    text-align: left;
    font-size: 12px;
    color: #ffa500;
    content: "\f095  054-7924242 | \f0e0  LutraTravels@gmail.com";
    font-family: "FontAwesome";
}

@media only screen and (max-width: 767px) {
    header#masthead div.col-md-8.col-sm-4.col-xs-12::before {
        text-align: center;
    }
}

.btn-menu {
    margin-bottom: 15px;
}

You used font family ‘FontAwesome’, which allows to use the icon codes. thing is, for the writings it uses (I think) ‘Times New Roman’. I don’t know where did get the idea to use this font, the default font and font family for the website is ‘Tahoma’. I tried to play with the code you gave me, and of course, if I change the font family to Tahoma, the icons doesn’t work.

Any ideas?

Hello @ncamaa,

It looks like you have to modify header.php file and use different HTML elements for text and icons in order to have different fonts. Also you might want to override modified header.php file in a child theme in order to avoid losing modifications after theme update. But this goes beyond our support policy. It’s considered advanced customization.

Kind Regards, Roman.