[Resolved] Move header widget under content on mobile?

[Todd]

I found this support thread to move the widget under the header on mobile, but I want to move it under the main content, much like the sidebars do automatically. Is this possible? I figure it might be as “easy” as extending the ordering in the css you provided in the linked thread or is that wishful thinking?

[Leo]

Hi there,

Moving under the main content would be more complicated.

A workaround would be to use the widget shortcode plugin:
https://wordpress.org/plugins/widget-shortcode/

And add the header widget in the desired location using Hooks Element:
https://docs.generatepress.com/article/hooks-element-overview/
https://docs.generatepress.com/article/hooks-visual-guide/

Then you can use the built-in hide-on classes to hide one on desktop and the other on mobile:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

Let me know if you need more info 🙂

[Todd]

edit: Figured this question out, so no need to respond, but will leave it up for other people that might do the same thing: Basically, the icons don’t show up until you enter URLs in the widget. 🙂

Thanks for the advice, Leo. I’m assuming I’d need to use a plugin like Lightweight Social Icons along with the widget shortcode? If that’s the case, I have an early blocker in that I can’t get the icons to show up using the the LSI plugin (ws plugin not yet installed). I’ve tried putting the LSI widget in both the header and the sidebar and I’m only getting the title to show up, but no icons. I don’t see any css conflict with my child theme and since LSI is the only plugin I have activated there shouldn’t be conflict with other plugins.

If you want to take a look, login is: tom/generate

[Todd]

Is there an easy way to add the ‘hide-on’ class to a widget? I see the instructions for adding to a menu, but widgets don’t have the same options in the dashboard.

[Leo]

There isn’t unfortunately unless you use an HTML widget.

I can give you some CSS to hide it if you can provide the login and pw here?

The URL is only visible to admins so the login info should be useless for others.

You can also provide login info through Account Issue here as well:
https://generatepress.com/contact/

Let me know 🙂

[Todd]

login: tom/generate

Thanks, Leo!

And if it involves less than 30 seconds of your time (i.e. you know off the top of your head), I’d appreciate the css to make the background of the icons transparent too. If it’s more than that, I’ll fiddle around with things… I think I can figure it out (i’m assuming it’s something along the lines of background-color: transparent; … just have to figure out the right class/id).

[Leo]

Hide header widget on mobile:

@media (max-width: 768px) {
    .header-widget {
        display: none;
    }
}

As for icon background color, couldn’t you just use the same grey as the header so that it appears as transparent?

I’m not seeing the widget being added at the end of the content on mobile.

Looking at your layout though, you should able to add it as footer widgets instead of the using widget shortcode + hook, then we can use this CSS to hide it on desktop:

@media (min-width: 769px) {
    .footer-widgets {
        display: none;
    }
}

[Todd]

That worked great. Thanks, Leo!

(I’m undecided on how to handle the icon background. It’d be a lot cleaner to have it transparent, but you’re right that I could just match it for now).

[Leo]

Not sure why it would be cleaner but here is the CSS if you need:

.widget .icon-set-lsi_widget-3 a, .widget .icon-set-lsi_widget-3 a:visited, .widget .icon-set-lsi_widget-3 a:focus {
    background: transparent !important;
}

[Author]

Posts