Content After Header how to show on mobile? Setting under Header > General

Hello @courtneyd,

Could you please provide the shortcode you’ve used? I couldn’t find it on your live URL: https://postimg.cc/XGD6Vrvv.

Please send screenshots or any other document, so we can understand and check it better. You can upload your files to one of the following online services:
https://postimages.org
https://drive.google.com
https://wetransfer.com
https://dropbox.com
Or any other service you know.

Shortcodes will appear on all devices unless there are style limitations specific to a particular shortcode.

Best Regards

Hi @skalanter

The shortcode is [aws_search_form] from Advanced Woo Search plugin – https://www.ads-software.com/plugins/advanced-woo-search/

Screenshots: https://www.dropbox.com/sh/nyyfmy1j52uue7b/AADbs4U0Ru7wpWTeoSK03H1la?dl=0

Thanks for your help

Hello @courtneyd,

The shortcode on the Customizer> header > general only appears on the desktop.
To show your desired shortcode on mobile, you need to customize it / or you can use the CSS below.

Please put the CSS below in Customizing > Custom CSS/JS > CSS Code:

@media only screen and (max-width: 959px) {
     body.default-breakpoint .oceanwp-social-menu, body.default-breakpoint .after-header-content {
        display: block;
         width: 100%;
    }
}

Please read this link for more information about the CSS/JS code on the customizer: https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website.

Also, instead of using the default header(s), you can use the custom header, please follow the steps explained in this link:
https://docs.oceanwp.org/article/355-how-to-create-a-custom-header

Note: As you know, the mobile menu and the primary header style are two different templates, and we don’t have the “Content After Header” option on Customizer> Header > Mobile menu.

I hope it helps,
Best Regards

The CSS you gave me didn’t work for some reason but I was able to accomplish the same result with this:

@media only screen and (max-width: 959px) {
.after-header-content { display: block !important;
float: left;
width: 65%;
}
}

Thank you for your time.

Hello @courtneyd,

For the previous CSS, you can add “!important” before each semicolon and recheck it.
By the way, I’m glad to hear that you were able to resolve that.

Best Regards