Page 1 of 1

help with navbar problem on small devices

Posted: Fri Jun 14, 2024 1:32 pm
by 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.

Re: help with navbar problem on small devices

Posted: Fri Jun 14, 2024 1:56 pm
by ecartz
Is the site available online? I.e. not a local test site that only you can see.

Re: help with navbar problem on small devices

Posted: Fri Jun 14, 2024 2:33 pm
by 14Steve14
ecartz wrote: Fri Jun 14, 2024 1:56 pm Is the site available online? I.e. not a local test site that only you can see.
Online now www dot railwayscenics dot com

Re: help with navbar problem on small devices

Posted: Fri Jun 14, 2024 3:58 pm
by 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?

Re: help with navbar problem on small devices

Posted: Fri Jun 14, 2024 4:08 pm
by burt
Looks fine to me. Tested on iPhone and in chrome (in small mode).

Re: help with navbar problem on small devices

Posted: Fri Jun 14, 2024 4:23 pm
by 14Steve14
ecartz wrote: Fri Jun 14, 2024 3:58 pm 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?
burt wrote: Fri Jun 14, 2024 4:08 pm 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.

Re: help with navbar problem on small devices

Posted: Sat Jun 15, 2024 12:01 am
by 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.

Re: help with navbar problem on small devices

Posted: Sat Jun 15, 2024 11:19 am
by 14Steve14
ecartz wrote: Sat Jun 15, 2024 12:01 am 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.

Re: help with navbar problem on small devices

Posted: Sat Jun 15, 2024 1:00 pm
by 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