Home>Support>Vantage: How to put text (a phone nr.) to the right of the menu

Vantage: How to put text (a phone nr.) to the right of the menu

By cxp4, 9 years ago. Last reply by Andrew Misplon, 9 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

with logo in menu setting.

Thanks,

Chris

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Hi Cxp4

    Thanks for reaching out.

    Try the following child theme:

    https://siteorigin.com/wp-content/uploads/2015/05/vantage-child-menu-widget-area.zip

    It adds a new menu widget area at Appearance > Widgets. It’s meant for stuff like displaying translation flag icons. We might need to adjust a few things once it’s up and running.

    Install from Appearance > Themes > Add New: Upload Theme > Activate.

    Activating a child theme will cause Customizer and Menu Location settings to reset. Test the child theme out before redoing those.

    Let us know how you come along :)

  2. 9 years, 10 months ago cxp4

    Thanks.
    I did what you told me, then put the phone number in a textwidget in the new menu widget area.
    And… nothing happens (well unless I fire up firebug and dig out my phone number that is indeed there; but do I want to instruct my dear visitors to do so ? ;-)
    Tried to play a bit with css without great success.

    So I am all hears as to what to do next.

    Cheers,
    Chris

  3. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Hi Cxp4

    Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.

  4. 9 years, 10 months ago Private Message - cxp4

    This is a private message.

  5. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Super, let’s just add a little CSS to help this out. You can add to Appearance > Editor > style.css where there are rules for this already OR just add to Appearance > Custom CSS:

    .site-navigation .widget-area .textwidget {
    color: #fff;
    font-size: 13px;
    }
    
  6. 9 years, 10 months ago cxp4

    Thank you, it works well.

  7. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Super, glad we could help. All the best :)

  8. 9 years, 10 months ago cxp4

    Hi Andrew,
    I’m coming back to you since I would like to use the circle icon widget instead of the text widget.
    I couldn’t manage to have the icon left of the title text instead of above; could you please help ?
    Thanks,
    Chris

    What I get:

    title text

    What I would like to get:
    title text

  9. 9 years, 10 months ago cxp4

    What I get:
    icon
    + title text

    What I would like to get:
    icon + title text

  10. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    The Circle Icon widget has an Icon position field that’ll let you set the icon to left. It unfortunately doesn’t quite format as you’d like. Icon > Title with text underneath the title.

  11. 9 years, 10 months ago cxp4

    Do you mean I should use the text widget if I want to achieve the formatting I want ?

  12. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Have you given the Circle Icon widget a go? It looks pretty cool. Icon left with text to the right.

  13. 9 years, 10 months ago cxp4

    Yes, I did, but here is what I get:
    settings: http://i.imgur.com/7fywVfh.png
    output: http://i.imgur.com/Hprq8cc.png

    and the css I used:
    .site-navigation .widget-area .circle-icon-box h4 {
    color: #fff;
    font-size: 16px;
    }

    Not quite as pleasing as I would like…

  14. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    That’s not right. Can we see it live?

  15. 9 years, 10 months ago cxp4

    Sure, please login first

    ordi-support.fr/wp-login.php

    Under construction (you will need a login to view the site)
    login: support
    pwd: H3lpmepls

  16. 9 years, 10 months ago cxp4

    oups
    I change pwd and send it again

  17. 9 years, 10 months ago Private Message - cxp4

    This is a private message.

  18. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Ahhh! You’re working in our new widget area. That’s a bit of an unknown. I threw that together pretty quickly, originally it was just made to handle little flag icons for translation plugins. Let me take a look.

  19. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Let’s see if we can’t just get this done in a Text widget only.

    <i class="fa fa-phone"></i> 0000 000000
    

    And set font size and color for the widget area if you aren’t already:

    .site-navigation .widget-area .textwidget {
    color: #fff;
    font-size: 13px;
    }
    
  20. 9 years, 10 months ago cxp4

    That works, thanks.
    Of course, it would be preferable to use the round icon widget for easy icon selection and tweaking… may be down the road.
    Thanks again.

  21. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Super, glad to hear you made progress. If you’d like to switch icons you can find the i html snippet here: http://fontawesome.io/icons/. Let us know if you need a hand.

    All the best.

  22. 9 years, 10 months ago cxp4

    Thanks for sharing, that’s a fantastic ressource.

  23. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    For sure :)

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More