Nav bar format issue across browsers

  • The formatting of my site’s navigation bar is showing differently across browsers/devices.

    For me, the menu looks correct on Chrome, Edge, and Firefox on a laptop, window expanded to full size.

    https://tinypic.host/i/mg4NY

    To others on my team, using Firefox on a laptop plus Chrome/Edge/Safari on an iPad, with windows expanded to full size, the text is showing on two lines and bunched close to the home logo.

    https://tinypic.host/i/mgdr0

    The bar also collapses into a hamburger menu on mobile, as it’s supposed to.

    https://tinypic.host/i/mgMrS

    Is there any way to fix this? I tried several searches to see if there’s a setting I could change in our WordPress custom theme settings, but don’t have a good grasp of coding. A few sites suggested updating the Additional CSS in the custom theme setting, which currently looks like https://tinypic.host/i/mgcIR.

    We did add another drop down selection within the main nav several weeks ago, but had not experienced this issue until today. Any help is appreciated!

    • This topic was modified 1 year, 9 months ago by acronin.
    • This topic was modified 1 year, 9 months ago by James Huff. Reason: redundant link removed

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

Viewing 1 replies (of 1 total)
  • Ben Roberts

    (@bouncingsprout)

    Hey @acronin,

    You’re correct that from around 1300px screen width down to where you get the hamburger menu kick in, you get that bunching. I would start by looking at a few possibilities:

    • Change the breakpoints, so the hamburger menu kicks in a bit earlier.
    • Accept that the menu items will have to render vertically, and improve how they look (less spacing perhaps, e.g. between EV and Charging)
    • Consider making some of the menu items sub-menu items

    Any of those could offer a direction to work towards.

    Ben Roberts

Viewing 1 replies (of 1 total)
  • The topic ‘Nav bar format issue across browsers’ is closed to new replies.