Archived topic
Add a TopBar widget
18 replies · Started by Stephane on November 24, 2014
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?
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.
That's the plan :)
Extra!
Another example of what I want to do : http://esltutor.net/
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?
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.
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,
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.
Cheers!
Lyle
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!
