[Resolved] Top bar problem

[Jurjen Brouwer]

I am very happy with the Generatepress Theme and the plugins and used it in multiple sites without major problems.
Now I’m working on http://www.5plogistics.com .
Using plugin Extended Widget Options and amr shortcode any widget, nice widgets to put widget where ever you like on the device you want . Works perfectly in the whole site, EXCEPT the TOPBAR of Freelancer/Generatepress. When using the “hide on mobile devices” button , nothing happens…..
The plugin author tested the site with other themes (Bazaar, Flatsome) and the plugin works…..
Maybe you can solve this problem.
Jurjen

[David]

Hi there,

so if you add a widget to another widget area eg. the Sidebar the hide on mobile option works?

If so could you add a widget to that area with hide on mobile so i can see what the difference is?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jurjen Brouwer]

Yes. See “Widgets” “Widgets for shortcodes”
The top one doesn’t appear in the desktop site, but shows up on your mobile.
Or both header widgets , they show on desktop, but are hidden on mobile
Works nice.

We would like to hide both topbar widgets on mobile but that doesn’t work……

[Jurjen Brouwer]

Login

[Leo]

Sorry – is there a reason why a plugin is needed here instead of just adding the widget in?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jurjen Brouwer]

You mean : Extended Widget Options ?
Because of the possibilities, left , right , mobile, tablet , destop, hide/show on pages, styling

[Leo]

GP has options for most of those things.

For example, the top bar widget has options in the customizer:
https://docs.generatepress.com/article/top-bar-widget-area/

If you want to hide certain options in the mobile view, you can use the built-in hide-on classes:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

Can we try to achieve what you want without a plugin first?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jurjen Brouwer]

Okay.
So: the login.widget on the right. Not visible on mobile
the (Kwaliteit logistiek ) widget on the left , also not visible on mobile

The rest of the widgets : the plugin is very easy to hide/make visible on the pages you want, we leave it this way 

[Leo]

the login.widget on the right. Not visible on mobile
the (Kwaliteit logistiek ) widget on the left , also not visible on mobile

This should be by default (first widget on the right and second widget on the left) in the top bar widget area.

If not just change the alignment here:
https://docs.generatepress.com/article/top-bar-widget-area/#top-bar-alignment

Then we can just use this CSS to hide the entire top bar on mobile:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jurjen Brouwer]

For us not the best solution, because it effects the rest of the layout. The hook in the header : font size changes, the widgets on the right side come in top of each other.
Any idea why the plugin widget options does work everywhere, except in the topbar?

[Leo]

For us not the best solution, because it effects the rest of the layout.

Not sure if I fully understand what the issue here.

The hook in the header

Which part are you referring to?

font size changes

Have you tried the options in Customizer > Typography > Top Bar?

the widgets on the right side come in top of each other.

Can you disable the plugin first? It’s adding some conflicting CSS.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jurjen Brouwer]

You can try it yourself, I send a login. But, please be carefull

[Leo]

I would prefer not to make changes to your site.

Is this a live site with traffic? If so can you duplicate the set up on a staging environment so we can make some changes?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jurjen Brouwer]

Adding the CSS on another place (earlier) solves the problem….
Thanks for helping out!
Still strange that the widget works fine , except in the topbar.
I removed the extended version of this widget , it caused other problems
Jurjen

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts