Why does my navigation switch to mobile on a desktop?

Pipeline has collision detection in the header space. If your navigation items are too long and they collide with your logo, the navigation automatically switches to the mobile version. You'll find this happen when you use a device with a small browser width or if you resize the browser window. 

In the animation below, you'll see how the red zone, your navigation titles will run out of room when the browser window is resized. At that point, when it collides with the yellow zone, your logo; Pipeline switches menu modes. The reverse occurs as well, when the window is enlarged, mobile view now becomes desktop mode. 

Note: If the total width of your menu is greater than the total area allotted to the header - the header will be permanently locked in mobile mode.  To prevent your menu from switching on large screens you can nest menu items into a dropdown, use a narrow logo, use concise wording, or move navigation items into the footer. 

Sometimes you'll see this only occur when an item is added to the cart:

Adding an item to the cart will show the total value next to the cart link which also takes up space in the header. This can trigger the navigation from desktop to mobile. 


Suggestions to help

1

Reduce padding between the menu items

Use this code to reduce the padding in the navigation:

Navigation: Reduce padding for top-level menu items

2

Use smaller menu titles

Shorten the title names for your top level menu items. Sometimes even a couple shorter names can help.

3

Change the font

For example Oswald and Roboto are tighter fonts:
cc040d534911807a7fbb0889ded0acd8.png

These fonts use less space when stacked across. 

4

Combine items in a meganav

Use a Meganav:  

How do I create a meganav in Pipeline with Nested Menus?

Or group some items in to drop-down menus:

Nested Menus: How to create a drop-down menu

Still need help? Contact Us Contact Us