Show/Hide Top Banner on Mobile (Closed)

Is there a way to show the top banner bar by default on all device sizes? At the moment, the top banner only shows on desktop and there isn't any way to show/hide it unless you hack together some css.

It would be great if it showed on all devices by default, and also was a toggle to customise the text or sections for desktop and mobile (e.g. have a longer text on desktop and smaller on mobile).

Hi Michael,

Due to limited space, we keep the top bar hidden on mobile screens. To display it on mobile screens, add the following CSS code to Theme Options > Custom:

@media (max-width: 768px) {
    .uicore-top-bar {
        max-height: 100%;
        max-width: 100%;
        pointer-events: auto;
        position: relative !important;
        visibility: visible;
        z-index: 1;
    }
    .uicore-top-bar .uicore-container {
        flex-direction: column;
        gap: 10px;
    }
    .uicore-top-bar .ui-tb-col-2 {
        justify-content: flex-start;
    }
}

Let me know if this helps!

Thanks :) That works great.

Happy to help! I'll close this ticket for now, but if you need any further assistance, don't hesitate to open a new one. We're here to help!