Heder banner

Home › Forums › Gillion Theme › Heder banner

Home › Forums › Gillion Theme › Heder banner

Viewing 20 posts - 1 through 20 (of 21 total)
1 2
  • Author
    RESOLVED Posts

  • John Arena
    Participant

    Is there any option that in mobile view the main heder banner be showed?

    Shufflehound Support
    Moderator

    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 team

    John Arena
    Participant

    Here it is:

    John Arena
    Participant

    Have you checked?

    Shufflehound Support
    Moderator

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

    John Arena
    Participant

    Added but

     

    Not showing…

    Shufflehound Support
    Moderator

    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.

    John Arena
    Participant

    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.

    Shufflehound Support
    Moderator

    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.

    John Arena
    Participant

    All Cache plugins deactivated.

     

    Check PS.

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

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

    John Arena
    Participant

    Now showing the top bar (no need for that), but there`s a large gap on the top, and not showing the banner again.

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    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?

     

    Attachments:
    You must be logged in to view attached files.

    John Arena
    Participant

    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.

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

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

    John Arena
    Participant

    Nope.

     

    Tried in two browsers, and without any cache plugin.

     

    Just empty space.

     

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    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

    Attachments:
    You must be logged in to view attached files.

    John Arena
    Participant

    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.

    Shufflehound Support
    Moderator

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

    John Arena
    Participant

    Thank you.

     

    Resolved.

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 21 total)
1 2