Mobile template changes desktop version? Text loads vertically
-
Hello! I am trying to finish up this website but I’m having trouble with the mobile version. I have a block attached to the header and I fear this is my problem. The Header text and page links load vertically in mobile, but my image and text block load normally. Is there any way to fix this on the home page so the text and links won’t load vertically without changing my desktop layout? Thanks!!
The blog I need help with is: (visible only to logged in users)
-
The issue where your header links stack vertically on mobile—while your image and text block remain horizontal—is a result of how WordPress themes handle “Responsive Breakpoints.” Most layouts are programmed to automatically stack side-by-side elements on smaller screens to keep text readable, which is why your menu items are jumping into a vertical list. To fix this on your site without affecting your desktop layout, you can use a Media Query in your CSS to force a horizontal “Flex” layout specifically for mobile devices. By adding a small snippet of code to your Additional CSS section, you can instruct the browser to keep those specific header links in a single row (flex-direction: row) and prevent them from wrapping, even on narrow screens. Additionally, if the “block” you mentioned is a Media & Text or Columns block, you should check the block settings in your editor and ensure that the “Stack on mobile” toggle is turned OFF, as this built-in setting is likely the culprit forcing the vertical alignment. Here is the specific code:
/* Keep header links horizontal on mobile */@media screen and (max-width: 600px) { .site-header .main-navigation ul, .header-block-container { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center; gap: 10px; /* Adjust spacing between links here */ } .site-header .main-navigation li { margin: 0 !important; font-size: 0.9rem; /* Shrink text slightly so it fits on one line */ }}
WordPress.com Forums 