Top Bar Placement

Hello @rene-michaels,

Thank you for reaching out,

I’ve tried to reproduce the issue you’ve raised on this topic and couldn’t see it on my end. Kindly share a live URL and I’ll check it on your website’s sources.

Best Regards

https://renemichaels.com I have it set back to “Left Social & Right Content” now and it is not displaying on mobile. I have the Menu Style set to “Minimal” and am using the “Top Bar Menu” in the top bar.

If I change the Top Bar back to “Centered Content & Social”, it displays fine on all devices.

• This reply was modified 1 month, 1 week ago by rene-michaels.
• This reply was modified 1 month, 1 week ago by rene-michaels.

Hello @rene-michaels,

Thank you for reaching out,

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

@media (max-width: 1080px) {
    #top-bar-nav, #site-navigation-wrap, .oceanwp-social-menu, .after-header-content {
        display: block !important;
    }
}

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.

Result: https://postimg.cc/cvX89BG6.

Note: If you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, remember to click on the regenerate all assets file and data in Elementor > Tools(if you have Elementor).

I hope that helps.

Best Regards

That fixed the top bar display on mobile but totally screwed up the main menu display on mobile. I changed your CSS and took out the “site-navigation-wrap,” part as noted below and that seems to have fixed it.

@media (max-width: 1080px) {
#top-bar-nav, .oceanwp-social-menu, .after-header-content {
display: block !important;
}

Thank you for the assistance!

You are welcome,
And I’m glad that you were able to resolve that.