help with navbar problem on small devices

[14Steve14]

Just been using my new sit eon a mobile device and have noticed that the navbar when opened buty clicking the hamburger button has no colour behind it.

I have upload all new files for the navbar just in case something was wonky but that made no difference.

I have also deleted everything from the css file relating to navbar and still no colour shows.

Does anyone know what may be causing this and give guidance on correcting the error.

[ecartz]

Is the site available online? I.e. not a local test site that only you can see.

[14Steve14]

Is the site available online? I.e. not a local test site that only you can see.

Online now www dot railwayscenics dot com

[ecartz]

Screenshot 2024-06-14 at 11-52-26 Railwayscenics Price Lists Railwayscenics.png

That's what I see in Firefox in responsive mode. Is that what you see? Or something different. If different, what are you using to view it? Android phone? iPhone? Something else?

[burt]

Looks fine to me. Tested on iPhone and in chrome (in small mode).

[14Steve14]

Screenshot 2024-06-14 at 11-52-26 Railwayscenics Price Lists Railwayscenics.pngThat's what I see in Firefox in responsive mode. Is that what you see? Or something different. If different, what are you using to view it? Android phone? iPhone? Something else?

Looks fine to me. Tested on iPhone and in chrome (in small mode).

@ecartz and @burt thanks for taking a look.

That's what I see.

I have turned the navbar back to how it was i.e. a dark background and a light text.

Now hover over the top navbar hamburger menu. When the dropdown menu opens there is no background colour, so when I have the text setting to show as white with a darker navbar background colour all you can see is the Heart for the wishlist and it looked like the text was missing. White text on a white background. On the demo store the background colour shows behind the text as I would think it should.

I hope this explains better.

[ecartz]

When I add via Web Developer Tools

Code: Select all

.navbar-collapse.offcanvas-collapse.open {
  background-color: blue;
}

It shows blue. Not sure what would happen if you added the same via user.css.

The problem is that offcanvas-collapse has its own background color set, which seems to be overriding other colors.

Note: I just selected blue because it was dark and appeared in the dropdown when picking a color. Presumably you can set that to whatever you want.

[14Steve14]

When I add via Web Developer Tools

Code: Select all

.navbar-collapse.offcanvas-collapse.open {
  background-color: blue;
}

It shows blue. Not sure what would happen if you added the same via user.css.

The problem is that offcanvas-collapse has its own background color set, which seems to be overriding other colors.

Note: I just selected blue because it was dark and appeared in the dropdown when picking a color. Presumably you can set that to whatever you want.

I would never have found that. I was thinking of ways to change the colours so something did show. Now I don't have to. Thanks for your help.

[Omar_one]

Now it show to me on android mobile light background and the font is light. So it's not clear

Screenshot_2024-06-15-15-57-29-85_40deb401b9ffe8e1df2f1cc5ba480b12.jpg