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

[Richard]

My mobile header looks different even though I have mobile header turned on in the layout section.
I tried changing the header text under the colors section in customize but that didn’t do anything.

[Elvin]

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.

[Richard]

That didn’t do anything for me.

[Elvin]

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;
}

[Richard]

Awesome thanks that worked.

So when I open the menu on mobile and it shows the fullscreen pop-up menu, how would I changed the elements in it? Like the background color, the text/link color, add social media icons etc. ?

[Elvin]

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.

[Richard]

“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.”

Can you explain this part? I created a new block element and inserted social media icons. How do I hook it to the off-canvas panel using that code?

[Elvin]

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.

[Richard]

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

[Elvin]

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

That’s right. 🙂

[Richard]

Cool. I was able to edit the color of the email form on desktop, but how would I do that for mobile? And also the size of the input box and button? They’re both a little big and would like them both to be on the same line.

[David]

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;
}

[Richard]

How would this code look if I wanted to change only the mobile version? Because it’s editing the desktop version too.

Also how would I change the color for the button?

[Ying]

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;
}

[Richard]

Ok that worked in a way. How do I change it so that everything is center in the mobile menu? It looks like the links shifted to the right and the mailchimp form moved to the left when I changed the width of it.

[Author]

Posts