Return to previous page

Have to have Left side & Right side top bar area widgets side by side

This topic has 6 replies, 2 voices, and was last updated 7 years, 11 months ago ago by Rose Tyler

sitehook

Participant

December 28, 2016 at 08:21

A website (that I do not wish to mention publicly) has correct information and formatting in the div class=”top-bar” area. I wish to add additional information to that area and am having trouble making it format correctly.

In the Left side top bar widget area, I have location and phone number information and in the Right side top bar widget area, I have social media icons.

My goal is to add a fourth icon in front of the other three social media icons that will link to an online catalog.

When I look in the widgets area, there’s nothing in the Left side top bar area or
Right side top bar area widget sections. When I add Text to those widget areas and simply input the code, the information in the Left side top bar area appears ABOVE the information in the Right side top bar area.

Please, contact administrator
for this information.

#150378 Copied WooCommerce version: 2.3

5 Answers
Rose Tyler

Support staff

December 28, 2016 at 14:13
Hello,

You can add Font Awesome icons http://fontawesome.io/icons/ in the top bar.
Try to add this code in Text widget (Appearance > Widgets > Right top side bar area)
```
<a href="#"><i class="fa fa-credit-card fa-2x" style="color: #fff;
  padding-left: 5px;  padding-right: 5px;"></i></a>
```
you should write a page link instead of #.
Also, provide us with wp-admin login credentials in private content area and we will check your widgets areas.

Regards,
Rose Tyler.
#150406 Copied
sitehook

Participant

December 28, 2016 at 20:08

Thanks for your fast response. Putting login information in private section. Feel free to play with those two widget areas LIVE. I’m not sure where the code is propagating/located to make that top bar appear since the two widget areas are empty.

Also, I would like to create my own custom buttons. Is that possible with the plug-in you mentioned?

Thanks again,
Ashley

Please, contact administrator
for this information.

#150448 Copied

Rose Tyler

Support staff

December 29, 2016 at 08:23

Hello,

I’ve added text in your top side bar (Appearance > Widgets) and this some code in your custom css.
You can change icon and link http://prntscr.com/dp6up2
Please check it now.

Regards,
Rose Tyler.

#150469 Copied

sitehook

Participant

January 3, 2017 at 19:14

Thanks so much for your assistance. I was able to find a Font Awesome icon that will work for now, pending our client’s approval.

I need one last bit of help. I’d like to remove/replace the search icon in top right of the menu with a menu item that includes an image. Is that possible?

Please see Private Content for more details.

Please, contact administrator
for this information.

#150788 Copied
Rose Tyler

Support staff

January 4, 2017 at 08:21
Hello,

Try to add this code in Custom CSS:
```
.fa-search:before {
    content: url('http://www.furnitureplus.com/wp-content/uploads/2017/01/catalog-fp.png');
    position: absolute;
    left: -400%;
    top: -35%;
}
.et-search-trigger .fa-search {
   background: transparent;
}
```
Regards,
Rose Tyler.
#150810 Copied
Tagged: left side, right-side, side by side, themes, top bar, widgets, woocommerce, wordpress
Viewing 6 results - 1 through 6 (of 6 total)