How do I apply my custom CSS to each page I select from my custom navbar in an app?

[szabados]

So I created an app with a custom navbar. I added the dashboard.css and application.css to the app, and works fine for all the elements in my navbar. The problem is, if I choose the "basic" item from the navbar, like Search, Pivot, Dashboards, .. etc, the CSS is not applied, and the design is reverted to the default splunk design.

How can I fix this ?

[MichaelPriest]

Have you tried using the User Navigation within Splunk?

If not this can achieve want you want to, have a look here and download the pdf:
http://docs.splunk.com/Documentation/Splunk/6.2.3/AdvancedDev/BuildNavigation

You will have something like:

    <nav  search_view="search" color="#FF0000">
      <view name="search" default='true' />
      <collection label="Default">
        <view name="dashboards" />
       <view name="alerts" />
       <view name="reports" />
      </collection>
        <view name="link1"/>
        <view name="link2" />
        <view name="lin3" />
    </nav>

[szabados]

This is just the color of the navbar, but in my CSS I'm using several other selectors as well.

[MichaelPriest]

it's not just the colour it also sets out the menu items, and the sub menu's, it will work without the colour:

<nav  search_view="search">
       <view name="search" default='true' />
       <collection label="Default">
         <view name="dashboards" />
        <view name="alerts" />
        <view name="reports" />
       </collection label="Custom">
         <view name="link1"/>
         <view name="link2" />
         <view name="lin3" />
     </nav>

[MichaelPriest]

What are your other selectors?

[MichaelPriest]

So you have custom CSS which has added on some more links across the top next to the usual ones?
e.g.
Search, Alert, Report, Dashboard, customlink1, customlink2

[szabados]

Yes, actually the usual ones are in a dropdown, and there are some custom ones. The CSS works with all the custom ones, but not with the usuals