Navigation Menu Lost on Homepage

Hi there,

Long time reader, first time poster!

I've been receiving reports from some users that our navigation bar has disappeared from our website: https://www.rciscience.ca/

While it still appears correctly for me in Chrome and Firefox, I can see it's vanished for me when I'm in config and if I look it up in a browser I don't typically use (Safari), it's vanished.

This is a website I inherited when I took over managing the charity. I know it was developed by an external company in 2017, but they no longer exist and I'm at a bit of a loss as to how to rectify this particular issue. Hoping someone here has knowledge of what went wrong and how I can fix it so it doesn't happen again? 🤞

Sincerely, a mildly panicked charity manager,

Carrie

If I had to guess, this might be newly tied to the width of the display window or something? Is there a way to force this to remain fixed on smaller windows (to a point - it's probably inappropriate for mobile screens)?

It looks fine to me. Windows/Chrome

Thanks! I think there's a problem when you start shrinking the width of the window? I don't know how to best phrase this, but the nav bar is disappearing at widths I'd expect to still be able to see it at eg. on an 11.5 inch screen. It didn't used to do this (really it would only reformat on mobile, maybe tablet) so I'm perplexed.

On 4/5/2023 at 7:44 PM, Boyceterous said:

Thanks! I think there's a problem when you start shrinking the width of the window? I don't know how to best phrase this, but the nav bar is disappearing at widths I'd expect to still be able to see it at eg. on an 11.5 inch screen. It didn't used to do this (really it would only reformat on mobile, maybe tablet) so I'm perplexed.

You mean this problem?

Yes, exactly! Any ideas how I set a limit on when that happens? 🤔

On 4/11/2023 at 3:41 PM, Boyceterous said:

Yes, exactly! Any ideas how I set a limit on when that happens? 🤔

It is default setting, require a lot of code to make nav appear again,how about change to mobile menu on this screen size?

How would I do that?

And out of curiousity, how much code is a lot of code?

Thanks!

16 hours ago, Boyceterous said:

How would I do that?

And out of curiousity, how much code is a lot of code?

Thanks!

Depends on one's point of view. If using code to force nav appear, I think need at least 20 lines of code.

Add to Design > Custom CSS

@media screen and (max-width:1100px) and (min-width:900px) {
div#logoWrapper {
    padding: 0 !important;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}
div#preFooterBlocks {
    visibility: hidden;
}
}

this code will run from screen sizes 900px to 1100px. You can adjust these numbers to what you feel okay