[Resolved] Add a TopBar widget

[Stephane]

Hello Tom,

I want to add a topbar widget to put some extra elements like WPML widget, Lightweight Social Icons widget, and … .

Is it possible to have the same behaviors with it like the header’s behaviors?

I modify the header like this :

<div id="topbar">
  <?php if ( is_active_sidebar('left-topbar') ) : ?>
  <div id="left-topbar-widget">
    <?php dynamic_sidebar( 'left-topbar' ); ?>
  </div>
  <?php endif; // end left topbar widget area ?>
  <?php if ( is_active_sidebar('right-topbar') ) : ?>
  <div id="right-topbar-widget">
    <?php dynamic_sidebar( 'right-topbar' ); ?>
  </div>
  <?php endif; // end right topbar widget area ?>
</div>

The next step is it to modify element-classes and extras PHP files?

Thanks.

Or do you plan to make a such thing in the future?

[Tom]

What kind of header behaviors? Anything is possible 🙂

I’m in the midst of developing a “Featured Widgets” add-on which will allow the same amount of widget areas as the footer widgets, but below the header. Maybe I’ll make it an option to add above the header as well.

[Stephane]

Make this elements to be setting by the customize panel like the header.

[Tom]

That’s the plan 🙂

[Stephane]

Extra!

[Stephane]

Another example of what I want to do : http://esltutor.net/

[Tom]

Cool – something like that would be possible using the secondary navigation with Font Awesome icons 🙂

[Stephane]

Ok. I don’t think to make it with it. I have a look at it so.

Do you thing we could have menu buttons and social icons in the same menu?

[Tom]

Absolutely: http://generatepress.com/forums/topic/social-networks-buttons-on-nav-menu-bar/#post-45453

[Stephane]

LOL! I’m a newbie.

And you do it to to your GeneratePress primary navigation site! I have to open my eyes!

Thanks you for help.

[Tom]

Happy to help 🙂

[Dean]

Just curious on the timeline planned for adding the “featured widgets” add-on below the header?

I’m trying to setup a common page header which has:

== MENU ==
== Image Slider == (which I have added via the Page Header)
== Content bar == directly under the slider

But as a new user (not new to WordPress, have been with it since before v1.5) to GP Premium and Elementor Pro am currently struggling.

This would be very helpful!

I was thinking of making a page template that had the Page Header in it (so it is effectively “global” when I choose that page template) — but this would work better for me if you include it.

Kind regards,

[Tom]

Hi Dean,

Made a few changes recently that will pave the way for this to be a possibility.

Thinking a featured widget area you can place above or below the header. Could easily turn it into a top bar, or a feature bar below the header/nav.

There’s no timetable yet, but have you looked into using GP Hooks in the meantime?

[Lyle]

Hi Dean,

As you have Elementor Pro and GP Premium, what you want to do is too easy 🙂

– create your content as required in a new Elementor template, add whatever you need and save
– in Dashboard > Elementor > My Library, copy the shortcode for the template you just created
– paste it into the Before Header hook location in GP Hooks and save
– there ya go 🙂

And when you add it as a shortcode this way, the content is in fact global; make a change to the template and the changes are updated throughout the site.

Cheers!
Lyle

[Dean]

A belated thanks to Lyle and Tom for your replies! I was travelling over Christmas, back at it now.

This helped — I used a Slider, finally worked out how to do one responsively vs my old way (3 sliders, one for each desktop/tablet/phone settings, and hide the slider on the other widths). Now the logo is the content and it works much better — I’ve used it as a GP Hook inside the page container.

The only thing now is that I have two elements now in this Hook — a slider and a call to action.

I have margins set to 0, but I cannot seem to decrease the gap between the elements.

In my Hook code (Inside Content Container), I have:

<?php echo do_shortcode( '[elementor-template id="379"]' ); ?><br />
<?php echo do_shortcode( '[elementor-template id="383"]' ); ?>

using a line break between them. PHP Execute is ON and it displays okay.

It just has a reasonably large (for me anyway) gap in between the elements, looking at the page on the desktop and a mobile. It doesn’t kill the design, but I’d like to make it smaller.

In my GP layout settings for the container, I use 12px on all sides for the padding.

But the gap between these two elements is larger, and despite an hour of inspecting the page, playing with CSS, I can’t decrease the gap at all (would like it about 12px too, for consistency at the top of the page). I tried setting a custom class for the slider but not sure what to change. I turned off the paragraph line height but that didn’t affect it (not setting a line height like 0.9em).

(I did use a custom class and css too for the orange bar and that was all good and is working fine).

The URL (just a splash page for now): http://www.theterritorycollection.com.au/

Any advice most appreciated!

[Author]

Posts