• Using Customizr v3.4.9

    Menu layout is regular(horizontal), left.

    I have quite a bit of space left at the right of my top nav’s box outline. This is where we’d like to add the LinkedIn script for “follow us” (or something similar), and the Twitter icon.

    I realize that the theme already comes with options to incorporate social on the page, but it doesn’t include the option of putting it inside the navbar inner.

    Any ideas? Thanks.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You’ll need to move the social block using CSS. Need a site link to help you move it.

    Thread Starter kgueter1

    (@kgueter1)

    site is purehoneytechnologies dot com. Follow-up question: can I use the LinkedIn script for their “follow us” button instead of the LinkedIn icon provided in Customizr? Here’s where a visual of what I am going for https://goo.gl/rUcgYR

    Thanks.

    Hi,
    Add this to your child theme CSS.

    .navbar-inner .social-block {
    float:          right;
    margin-top:     10px;
    margin-right:   0px;
    text-align:     right;
    }

    Hey there kgueter1,
    Without going to much into the code of the theme, you can get this result: https://goo.gl/TAKbU0 — with only css and a child theme.

    What you need to do is to go to Appearance -> Menus, create 2 new links for the menu, LinkedIn and Twitter, go to Screen Options tab at the the menus screen and tic CSS Classes. Now you will have a new field next to URL and Label when you click on your new menu link. You would have to enter 2 terms there, “social-icn” and “soc-twitter” / “soc-linkedin” without the quotes like here: https://goo.gl/FGvxN7 .
    Then all you need to do is add this css to your child theme by going to Appearance -> Editor

    @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");
    .social-icn {
        position: relative;
        top: -20px;
    }
    
    .social-icn a {
        margin-left: 40px;
    }
    
    .soc-linkedin a {
        background: #007bb5;
        color: #fff !important;
        text-shadow: none !important;
    }
    
    .soc-twitter a {
        background: #00aced;
        color: #fff !important;
        padding-right: 15px !important;
        text-shadow: none !important;
    }
    
    .soc-linkedin a:hover {
        background: #125688 !important;
    }
    
    .soc-twitter a:hover {
        background: #007BA7!important;
    }
    
    .soc-linkedin:before {
        font-family: "fontawesome";
        content: "\f0e1";
        position: relative;
        top: 25px;
        padding-left: 5px;
        margin-left: 15px;
        background: #007bb5;
        padding: 7px 8px 7px 10px;
        color: #fff;
        border-right: 1px solid #cacfd2;
        text-shadow: none !important;
    }
    
    .soc-twitter:before {
        font-family: "fontawesome";
        content: "\f099";
        position: relative;
        top: 25px;
        padding-left: 5px;
        margin-left: 15px;
        background: #00aced;
        padding: 7px 8px 7px 10px;
        color: #fff;
        border-right: 1px solid #cacfd2;
        text-shadow: none !important;
    }

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Adding LinkedIn FollowUs icon inside "navbar"’ is closed to new replies.