CSS not Displaying on Mobile, remove navigation

  • There is an old thread from over a year ago related to this. The project was interrupted and I’m trying to tie up loose ends.

    I changed the font for the header tags to Taviraj in the CSS but it is not being reflected on the mobile site. Now the headers are sans serif on mobile, but serif everywhere else.

    What do I need to add to make them serif everywhere?

    Also, this site is being redeveloped to only show a single page. I have switched Home to News so the logo links back to News and for the moment made the link for “News” black so it is invisible. Is there a way to eliminate the top navigation entirely?

    Thank you

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi @catwingz ,

    I’m sorry to hear you’re having trouble with your website’s font display on mobile devices and the top navigation menu.

    After checking the browser console, it seems the font is being loaded from a different domain—https://localhost.com—while your site is on https://dev.neo420.com. This mismatch could be why the font isn’t displaying correctly on mobile devices.

    Could you double-check the font file path to ensure it’s pointing to the correct domain? Since you’re using a child theme of Storefront, it might also help to temporarily switch to the parent Storefront theme to see if the issue persists.

    As for hiding your primary menu, you can use this CSS code to remove it entirely:

    .main-navigation .primary-navigation {  
      display: none !important;  
    }

    To apply this, navigate to Appearance > Customize, then click on Additional CSS, and paste the code there.

    Let me know if this works for you, or if you need further assistance!

    Thread Starter catwingz

    (@catwingz)

    Thanks for pointing out the file path issue @jonayedhosen. I believe I’ve corrected it but this hasn’t solved the problem. What am I missing?

    The navigation has been banished. Thanks again.

    Hi @catwingz ,

    I’m glad to hear that the navigation is hidden properly with the code.

    However, regarding the font issue, I can still see that the font is being called from the wrong domain: https://localhost/wordpress/wp-content/themes/storefront-child/fonts/Taviraj-Medium.ttf.

    The correct file path should be: https://dev.neo420.com/wp-content/themes/storefront-child/fonts/Taviraj-Medium.ttf

    Please update the file path to the correct one and check the issue again.

    Thread Starter catwingz

    (@catwingz)

    @jonayedhosen, it appears that I have a mystery to solve. I already have the correct file path in the style sheet for the child theme. The localhost path was there until I changed it, but must somehow still be in a second location. If you can suggest where the overriding entry might be, please do so. It’s too late tonight and I won’t be able to look until tomorrow.

    Thanks again

    Hi there!

    I have checked the issue, and I can see that the file path is appearing correctly. However, I’m still seeing a 404 error message from the server specifically for the Taviraj-SemiBold.ttf file.

    Please note that we generally do not provide support for customizations, If you need more in-depth support or want to consider professional assistance for customization, I can recommend?WooExperts?and?Codeable.io?as options for getting professional help. Alternatively, you can also ask your development questions in the??WooCommerce Community Slack?as custom code falls outside our usual?scope of support.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.