[Resolved] Add a TopBar widget

Home Forums Support [Resolved] Add a TopBar widget

Home Forums Support Add a TopBar widget

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
  • #48631

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

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


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

    Lead Developer
    Lead Developer

    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.


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

    Lead Developer
    Lead Developer

    That’s the plan πŸ™‚




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

    Lead Developer
    Lead Developer

    Cool – something like that would be possible using the secondary navigation with Font Awesome icons πŸ™‚


    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?

    Lead Developer
    Lead Developer

    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.

    Lead Developer
    Lead Developer

    Happy to help πŸ™‚


    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,

    Lead Developer
    Lead Developer

    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?


    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.



    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!

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.