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. 

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:

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