Add Other Elements & Social Icons To Top Bar

Started by: Chase May 04, 2017 - 18:57

I need to add other elements to the top bar.

I need to add more social links, pinterest, vimeo etc.

And I also need to add a custom button and link to the top bar.

How can I accomplish this? I am using the school demo with header style 3



Replies:

  • Author Team
    #4019 Reply

    Baxter
    Hi,

    It needs to customize header template through Child theme in order to realize your needs - https://stylemixthemes.com/forums/topic/child-theme/. If you don't have any experiences with Wordpress customization, we recommend you to hire developers from our maintenance support team - https://goo.gl/fZHHNu.

    Regards

    #4129 Reply

    Philip Prouhet
    Hey Chase,

    I am working on a different theme (Consulting), but I believe the code for the top bar is similar to the Smarty theme. What I did for my purposes was add three li entries on a ul and then styled them with CSS to look like menu buttons. You could change the text to images or icons if you want...

    In order to add content to the top bar, you will need to do the following:

    1. Duplicate the header.php file from the main theme folder to the child theme folder.
    2. Edit the header.php file that is now in your child theme folder with the following code change (right after the <div class="container">):

     <ul class="top">
    <li class="top"><a href="default.asp">Request A Bid</a></li>
    <li class="top"><a href="news.asp">Request Service</a></li>
    <li class="top"><a href="contact.asp">Request Maintenance</a></li>
    </ul>

    3. In the Custom CSS section on the Customization pane, enter the following CSS:

    ul.top {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: inline;
    }

    li.top {
    float: left;
    border-right: 1px solid #222222;
    }
    li.top a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px 16px;
    text-decoration: none;
    }

    li.top:last {
    border-right: none;
    }

    li.top:first-child {
    border-left: 1px solid #222222;
    }

    /* Change the link color to #111 (black) on hover */
    li.top a:hover {
    background-color: #333333;
    }

You must be logged in to reply to this topic.