[Support request] Topbar Design

[Brenda]

Hi Tom, I hope you or someone can help me with this. This is probably not as difficult as I have made it out to be, but I’m still in the learning process so… I saw this template (https://www.templatemonster.com/demo/62269.html) and I wanted I wanted to create a topbar similar to this one. I got as far as creating the topbar and adding color and one line of text. Any help would be very much appreciated.

Thank you.

[Tom]

Hi Brenda,

Which part exactly are you having trouble with? The social icons?

[Brenda]

I would like to have three to four columns in one row. Right now, the information is stacked one on top of the other. I am using the code below. And yes, how would I add the social icons. I did download the Lightweight Social Icons widget, but not sure how to use it.

<div class="top-bar grid-container">
    <div class="inside-top-bar grid-50">
        Sample Content
    </div>
    <div class="inside-top-bar grid-50">
        Sample Content
    </div>
    <div class="inside-top-bar grid-50">
        Sample Content
    </div>
</div>

[Brenda]

Hi Tom, the output from my last reply is showing the results of the code that I used and not the actual code itself. I want the output to be placed in a single row with the social icons on the far right.

Sample Content Sample Content Sample Content Social Icons

I hope this makes sense. Thank you.

[Leo]

Hi there,

I would recommend using the before header hook in that case:
http://demo.generatepress.com/hook-locations/
https://docs.generatepress.com/article/hooks-overview/

Try something like this:

<div class="topbar grid-container">
    <div class="topbar-left grid-33">
        Sample Content
    </div>
    <div class="topbar-center grid-33">
        Sample Content
    </div>
    <div class="topbar-right grid-33">
        Sample Content
    </div>
</div>

As for social icons, you can try Lightweight Social Icons plugin with Widget Shortcode:
https://en-ca.wordpress.org/plugins/widget-shortcode/

Or just use the built in FontAwesome library:
http://fontawesome.io/icons/

Let me know if you need more info 🙂

[Brenda]

Hi Leo, thanks for the response. I placed the code in the before header hook, but what I get is each div stacked on top of the other as opposed to having them in a single row.

The code produces this:
Sample Code
Sample Code
Sample Code

Instead of:
Sample Code Sample Code Sample Code

[Leo]

Hmm it shouldn’t. I just tried the code and they show up in one row.

Can you link me to the page?

[Brenda]

I’m just getting started, but here’s the link.

https://staging.thewebweaver.com/

[Leo]

Looks like it’s what you wanted? https://postimg.org/image/5mwelpxcr/03bb8657/

If you are seeing something different, try clearing browser cache.

[Brenda]

Thank you for your assistance Leo,
I cleared my cache but for whatever reason, it still doesn’t show properly. I think I’ll try restarting my system to see what happens. And thanks for the suggestion to use font awesome for the social icons. I’ll give it a try.

[Leo]

Sounds good. Let me know if you need more info 🙂

[Jose Luis]

Hi!

I’m trying to do the same, but it is not working.

[Leo]

Hi there,

Can you open a new topic for your question?

This one is a bit old already.

Thanks 🙂

[Author]

Posts