- This topic has 20 replies, 2 voices, and was last updated 6 years, 8 months ago by
.
Is there any option that in mobile view the main heder banner be showed?
Hi @Qommunica,
I hope you are well today and thank you for your question.
We can try achieving this developing custom CSS code.
Could you please share me your site URL where it’s displaying so that i can help you to achieve it?
Best regards,
Shufflehound teamHere it is:
Have you checked?
You can display it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
@media (max-width: 1025px){ header.primary-desktop { display: block !important; } header.primary-desktop .sh-header-height { display: none !important; } header.primary-desktop .sh-header-top { position: fixed; top: 0; left: 0; width: 100%; } header.primary-mobile{ margin-top: 40px; } }Added but
Not showing…
I don’t see the shared code used on your site.
Please make sure to clear the WP Fastest Cache and autoptimize cache that you are using on your site.
Cache cleared, and I notice a new banner space in the top of the mobile view, but won`t show the photo, just empty space.
Still I don’t see the shared code used on your site.
Where have you added it?
Please temporary deactivate all the cache used on your site.
All Cache plugins deactivated.
Check PS.
It seems we are facing CSS specificity issue so please try using below changed CSS code removing above shared code.
@media (max-width: 1025px){ #page-container header.primary-desktop { display: block !important; } header.primary-desktop .sh-header-height { display: none !important; } header.primary-desktop .sh-header-top { position: fixed; top: 0; left: 0; width: 100%; z-index: 99999; } header.primary-mobile{ margin-top: 40px; } }Now showing the top bar (no need for that), but there`s a large gap on the top, and not showing the banner again.
Ohh I thought you are referring Topbar as banner so I have developed CSS code to display it.
Thank you for making it clear by sharing the screenshot but I don’t get that result and all display fine for me as shown in the attached screenshot.
Which browser are you using?
Could you please test it on different browser and on different mobile?
Sorry, maybe I was unclear, but I want the banner in the print screen attached to be visible on the mobile also, on the top.
You can try displaying it using below CSS code.
@media (max-width: 1025px){ header.primary-desktop { display: block !important; } header.primary-desktop .sh-header-height .sh-header-logo-container, header.primary-desktop .sh-header-height .sh-header { display: none !important; } header.primary-desktop .sh-header-middle { position: fixed; top: 0; left: 0; width: 100%; } header.primary-mobile{ margin-top: 80px; } }Nope.
Tried in two browsers, and without any cache plugin.
Just empty space.
It displays fine for me as shown in the attached screenshot.
You need to troubleshoot more to find out why it is not working for you.
This topic took much of our support time to develop custom code but developing custom code for custom functionality is beyond the scope of support that we provide here.
If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Shufflehound recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5
I found where the problem is, all working well when I enter CSS code via CSS plugin, not in CSS section in Gillion theme.
So can you tell me which part of the CSS code is for the banner visibility only? Not for the top header menu.
Solution for this topic
The following CSS code is for displaying Banner on mobile.
@media (max-width: 1025px){ header.primary-desktop { display: block !important; } header.primary-desktop .sh-header-height .sh-header-logo-container, header.primary-desktop .sh-header-height .sh-header { display: none !important; } header.primary-desktop .sh-header-middle { position: fixed; top: 0; left: 0; width: 100%; } header.primary-mobile{ margin-top: 80px; } }Thank you.
Resolved.
