[Resolved] Top bar & header customization

[Blue Clover Ltd.]

Hi Tom,

Thank you for this awesome theme!

I’ve searched the forums but was unable to find an answer that gave me a clear answer.

To get a visual of what I describe, take a look at the top bar and header here: https://www.ems-usa.com/ (it’s also build with GP)

Like above, I want to put some social icons on the left and a (multilanguage using qTranslate-X) “Call Us Today” message on the right in the top bar. Additionally, I want to put a “Contact Us” button on the right in the header (the header logo will be on the left). I do not need the red mail icon on the left.

Currently what I’ve done is use your lightweight social icons plugin to insert it as a widget in the top bar section, but I do not see any GP Hooks to add content within the top bar, so I seem unable to add the “Call Us Today” message if I go that route. I guess the button could be added with one of GP’s header hooks without problems but I haven’t experimented yet.

I could go ahead and replicate the code I see in the above site, but I’m trying to use the theme’s built-in features (like the top bar) as much as possible, keeping my interventions/customizations to a minimum.

So my questions:
1. In your opinion what would be the best/cleanest approach to go about this, given I would like to use your social icons plugin, and keep interventions to a minimum?
2. If creating a custom top-bar/pre-header is the only way to do this, are the sections/CSS classes that I see on the forum (for example https://generatepress.com/forums/topic/top-bar-2/ or https://generatepress.com/forums/topic/top-barsecondary-navigation-area/) or on the above site documented somewhere? Are they built-in within the theme?

Thanks!

[Leo]

Hi Alex,

1. Unless I misunderstood the question, you should be able to insert lightweight social icon widget and a text widget for phone number in the top bar.
The first widget will be on the right and the second widget will be on the left.

2. I would go with the top bar approach first. Should be doable.

Let me know if this answers your question.

[Blue Clover Ltd.]

Leo,

Thank you for your answer.

I had not seen the text widget option so I was unaware of it. This solves my issue, so I’ll get back to you only if I face any problems (which shouldn’t be the case).

Thanks again!

[Leo]

You’re welcome 🙂 Let me know if you need more info!

[Fabrice]

Hello,

To go on on this subject, and I thank you for your help, is it possible to add a section from elementor library in the top bar widget ?
BR

[Leo]

Like using shortcode from Elementor?

[Fabrice]

In fact, I created a section saved in Elementor library, and I would like to put it on the right side of the container where the logo is placed (using generatePress ability).

I tried Hooks but not sure where is the place to paste the code

Thanks 😉

[Leo]

Which hook are you thinking? Can you provide a link to your site?

[Fabrice]

I’ve made a screen print, my site is not already online, under construction and still in my NAS.
Can I paste an image here, to show you ?
Thanks

[Leo]

You can upload it to a site like this: https://postimage.io/

Here are some info on hooks:
https://docs.generatepress.com/article/hooks-overview/
http://demo.generatepress.com/hook-locations/

Each of the hook has instruction on using them as well: https://docs.generatepress.com/collection/hooks/

[Fabrice]

Thanks a lot, I will check infos.
BR

[Leo]

You’re welcome. Let me know if you need more info.

[Author]

Posts