[Resolved] Header widget on mobile

[_blank]

Hi,
I have a custom html widget in the header with Google search form. However, it doesn’t show on mobile header. I’d like it shows below mobile menu. I know this was already addressed before, but those solutions don’t seem to work for me. I have the latest theme version.

Thanks for any tips.

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

[_blank]

Hi, the website is offline, in development, so let me share some screens.

[David]

Hi there,

the Header Widget only exists in the standard site header. Options:

1. Disable the Mobile Header in Customizer > Layout > Header.
OR
2. Remove the header widget and use a Block Element, to add a Search Block to the menu_bar_items hook. This will be display to the right of the nav on desktop and mobile.

[_blank]

Thanks for these tips.
However, I’d like to keep the mobile header so I need another approach. I thought about Unsemantic Grid Classes displayed only on mobile, but I see the theme doesn’t use them anymore? (https://docs.generatepress.com/article/switching-from-floats-to-flexbox/)

How can I create grids now?

[Ying]

Hi Priotr,

You can use either of the methods that David replied.

If you want to keep the mobile header, then go with the second option:

2. Remove the header widget and use a Block Element, to add a Search Block to the menu_bar_items hook. This will be display to the right of the nav on desktop and mobile.

[_blank]

Ok, thanks.
And are there any grid classes I can use with the theme?

[Elvin]

Hi Piotr,

You may have to write the CSS manually.

Here’s a great documentation about it. 😀
https://css-tricks.com/snippets/css/complete-guide-grid/

[_blank]

Ok, thanks again. I thought the theme has some ready grid classes.

[_blank]

I have played around with adjusting the header with search form in different screen sizes following your suggestions and have come up with something I’d would see as close to final, but may I please ask you to verify it, as I’m not sure if I have addressed the right css classes (details in private note).

Thanks!

[Ying]

It looks right visually, but can you link us to your site so we can see the CSS as well as the HTML?

[_blank]

The website is only available offline. I could provide some more code on your request.

[David]

Can you provide a screenshot of how you want the header to look on desktop and mobile ?
May be easier for us to then provide a more specific solution.

[_blank]

I used the following code to make the layout of the mobile header:

@media (max-width: 600px) {
.has-inline-mobile-toggle .inside-header, .has-inline-mobile-toggle .mobile-menu-control-wrapper {
flex-direction: column;
margin-left: 0;
}
.menu-bar-items {
padding-top: 20px;
padding-bottom: 20px;
}
}

It looks as expected (although I haven’t tested this on too many browsers yet), but maybe I should address different css classes?

Thanks.
If there is a better way to do it (addressing some other classes), I’d appreciate you

[Ying]

Sorry we can’t calculate the result by just reading the CSS without seeing the live site.

As long as the result is what you are expected, I think that’s valid CSS.

[Author]

Posts