StartFit theme navigation links all black on mobile

• 

  monicasiikalampi · Member · Sep 18, 2023 at 7:55 pm

  • Copy link
  • Add topic to favorites

  Hi. I am using the StartFit theme on my blog with a Personal plan (no custom styles). The theme works well on desktop but on mobile the navigation menu will only work properly when accessed from the Index page. If accessed from any other page, the navigation links will all be black, same as the background, resulting in them being invisble. This is a problem because I cannot edit the colours due to me not having a premium plan. I would expect the theme with the default styles to at least be useable… Don’t really want to get premium just because, what to me looks like, a bug in the theme.

  The blog I need help with is: (visible only to logged in users)

• 

  staff-totoro · Staff · Sep 20, 2023 at 1:16 am

  • Copy link

  Hi there,

  I’ve taken a look at your site compared to the demo, and I see the demo was optimized for a header that is a dark color throughout the site, with light colored menu text. You can see this by comparing the homepage to any internal site page as shown here:

  

  However on our site I see that you have used a light colored design with a transparent header, where only the homepage has a dark background (with light menu text) and the other pages have a light background color with dark menu text.

  

  It’s a really lovely design! Unfortunately the issue is that the mobile menu on this theme was designed for a menu that uses light colored text. On mobile this works fine since the mobile menu inherits the text color of the page. If the menu uses light text, it shows up agains the dark background.

  The limitation here is that the background color (of the mobile menu) cannot be customized, so when you are on a page with a light background, the mobile menu inherits the dark text (black on black) and the menu is not visible.

  Clearly the most elegant solution, and the one that will preserve the design you have now, would be to upgrade to the Premium plan. Using the design tools under that plan you will be able to either set a “mobile-only” menu font color or background color.

  Without upgrading, I can think of a few options you may wish to try:

  • Add a dark background behind the header (similar to what is seen in the demo) so you can set the menu text to a lighter color. This lighter text color will help the mobile menu to be visible on internal pages
  • You can also try a gradient at the top of the page that goes from dark to light, or a dark image (as with your homepage) to serve as the header for internal pages, also allowing you to set the menu text in a light color so it shows on mobile.

  Hope that helps. Please let us know if you have any more questions.