Mobile formatting just broke

Hi team

The formatting for my top nav bar seems to have just broken for smaller screens. I haven’t made any updates, this seems to have happened in the last 24 hours. Any ideas why, or how I can fix? I have just copied this css from someone else (so don’t really know how to fix), was working fine for last few months.

Thanks
Marty

Hi Marty

The screenshot looks like the desktop view on a very narrow screen ~600px.

The desktop view works OK all the way down to 1025px

This is specified in a media query in your theme in the common CSS tab

/* small-screen mode */
@media screen and (max-width: 1024px) {
    /* the .js makes sure that "small-screen-mode" overrides "big-screen-mode */
    .js div#bors-navbar {
        position: static;
        margin-top: -1em;
        margin-bottom: 1em;
    }
    .bors-nav-link-container {
        position: static;
        margin-left: 0;
    }
}

The mobile view seems broken, the custom CSS you added does not work well on small screens and needs to be either modified to work on mobiles or removed from the mobile view (there’s no space for the custom menu)

If you’ve set the desktop view on a mobile device by accident, you can visit https://forum.cleanenergyreviews.info/?mobile_view=1 to restore the mobile view.

We have a few supported theme components to add links to the header that work on both desktop and mobile

Custom Header Links

Iconified Header Links

Header submenus

Custom hamburger menu links

9 Likes