[Support request] Mobile/Tablet header looks different than desktop

Hi Richard,

Do you want to use the Mobile header on the tablet view as well?

If so, you can go to Appearance > Customize > Layout > Primary Navigation and set the mobile breakpoint to 1024px.

I may be misunderstanding what you meant.

Let’s clarify things a bit more.

Is this for w****today site? Were you trying to make the site’s mobile header?

I’ve inspected the site and the mobile header is actually there but it isn’t perceivable because the background color of the mobile header is the same color as it’s contents.

If you add this CSS, the actual mobile header contents will be perceivable.

nav#mobile-header {
    background-color: #184e77;
}

Your site is using GP Premium’s feature called Off-canvas panel.

You can change the colors of it’s content on Appearance > Customize > Colors and look for the Off Canvas tab.

As for changing the elements in it:

It depends on what you’re trying to change. If you wish to change the menu, go to Appearance > Menu and assign a menu to the Off-canvas location.

As for adding more things in it like social media icons:

You can create a layout of social media icons on a Block element and then hook this Block element inside the off-canvas panel.

You can use the hook generate_inside_slideout_navigation if you wish for the icons to appear BEFORE the menu. You can use generate_after_slideout_navigation if you wish to place things AFTER the menu.

You can watch this video.
https://share.getcloudapp.com/12uPWxb5

On the video, you’ll see inside_slideout_navigation but you can replace that with after_slideout_navigation if you wish to place the social icon AFTER the menu.

Awesome that works. So if I want to add mailchimp form, do I need to create a new block?

That’s right. 🙂

Hi there,

are you wanting a different color on mobile ?

To keep the input and button inline add this CSS:

.mc4wp-form-fields {
    display: flex;
}
.mc4wp-form-fields input[type="email"] {
    max-width: calc(100% - 120px);
    margin-right: 5px;
}

You can add a media query for the CSS so it only apply to mobile:

@media (max-width: 768px) {
.mc4wp-form-fields {
    display: flex;
}
.mc4wp-form-fields input[type="email"] {
    max-width: calc(100% - 120px);
    margin-right: 5px;
}
}

What button do you mean? The subscribe in off canvas menu?
If so, try this:

#generate-slideout-menu input[type="submit"] {
    background-color: red;
}