Custom Top Navigation

Question

I'm creating a custom master page and I want to create a new top navigation similar to this page. I only know how to add it using content editor but I don't want the menus to appear on any dialog boxes as well (i.e. Add a Page from the GEAR icon).

I added the html snippet for Top Navigation from Design Manager and read through this page and I can't figure out how to customize the links. I dont want it to automatically extract the links from the Pages library.

In DevTools, it seems it possible to remove it but I can't figure out how to code it properly in css targeting a class inside another class:

Answer 1

I figured it out. I just have to list every id and class. Below code seems to work on dialog box for the 'add a page' and any list dialog box.

    .ms-dialog .ms-backgroundImage #aspnetForm #s4-workspace #custTopNavigation .topnavbar{
    display: none;
}

My master template has background color and the list dialog box also inherited the background color in its ribbon so I added the following:

.ms-dialog .ms-backgroundImage #aspnetForm #ms-designer-ribbon {
    background-color: white;
}

So far they are working well for me.