# Custom styling of "ion-nav-view"

**URL:** <https://forum.ionicframework.com/t/custom-styling-of-ion-nav-view/12452>\
**Category:** ionic-v1\
**Created:** [November 10, 2014, 3:15pm UTC](https://forum.ionicframework.com/t/custom-styling-of-ion-nav-view/12452 "2014-11-10T15:15:28Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jacobriprap](https://avatars.discourse-cdn.com/v4/letter/j/ba8739/32.png) [@jacobriprap](https://forum.ionicframework.com/u/jacobriprap)\
**Post date:** [November 10, 2014, 3:15pm UTC](https://forum.ionicframework.com/t/custom-styling-of-ion-nav-view/12452/1 "2014-11-10T15:15:28Z")

</div>

Hi!

I am all new to Ionic, and need some help.

I have a page where I want to style the navigation different than on other pages. Is that possible?

This is the code on my page:

```
 <ion-view title="test">
    <ion-view>
      <ion-content>Hello!</ion-content>
    </ion-view>
  </ion-nav-view>
</body>

```

Is it possible to go like this `<ion view class="custom" title.....>`, if yes - where do I write the CSS?

Thanks

---

<div class="post-metadata">

**Author:** ![dave](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/dave/32/64295_2.png) [@dave](https://forum.ionicframework.com/u/dave)\
**Post date:** [November 10, 2014, 3:54pm UTC](https://forum.ionicframework.com/t/custom-styling-of-ion-nav-view/12452/2 "2014-11-10T15:54:05Z")

</div>

What happens when you try that? Does the class get added?

---

<div class="post-metadata">

**Author:** ![jacobriprap](https://avatars.discourse-cdn.com/v4/letter/j/ba8739/32.png) [@jacobriprap](https://forum.ionicframework.com/u/jacobriprap)\
**Post date:** [November 10, 2014, 4:29pm UTC](https://forum.ionicframework.com/t/custom-styling-of-ion-nav-view/12452/3 "2014-11-10T16:29:15Z")

</div>

I have tried to style it in ionic.app.scss -\> But nothing happens, so i really dont know if it will work

---

<div class="post-metadata">

**Author:** ![brandyshea](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/brandyshea/32/148286_2.png) [@brandyshea](https://forum.ionicframework.com/u/brandyshea)\
**Post date:** [November 11, 2014, 7:37pm UTC](https://forum.ionicframework.com/t/custom-styling-of-ion-nav-view/12452/4 "2014-11-11T19:37:44Z")

</div>

I have the following class on some of my views:

```
<ion-view class="gray-content">

```

and in my main css file:

```
.gray-content {
    background-color: #e5e5e5;
}

```

This applies the class and css styling to my view. I haven’t tried adding it to the scss.

---

<div class="post-metadata">

**Author:** ![jacobriprap](https://avatars.discourse-cdn.com/v4/letter/j/ba8739/32.png) [@jacobriprap](https://forum.ionicframework.com/u/jacobriprap)\
**Post date:** [November 12, 2014, 8:07pm UTC](https://forum.ionicframework.com/t/custom-styling-of-ion-nav-view/12452/5 "2014-11-12T20:07:03Z")

</div>

Thanks for your answer!

Nothing happens if i uses a class, but as soon as i change it to and id -\> the background-color for the whole page changes, and still not the navigation-bar.

I might have some problems in my index.html that overwrite the class.

But thanks for your try!

---

<div class="post-metadata">

**Author:** ![brandyshea](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/brandyshea/32/148286_2.png) [@brandyshea](https://forum.ionicframework.com/u/brandyshea)\
**Post date:** [November 12, 2014, 8:28pm UTC](https://forum.ionicframework.com/t/custom-styling-of-ion-nav-view/12452/6 "2014-11-12T20:28:54Z")

</div>

Are you using the browser to test? You should be able to inspect the element in the browser and see which class is overriding yours. Also, I’m not sure where your navigation-bar is defined, but mine is an ion-nav-bar above the ion-nav-view, so changing the background-color on the ion-view will not affect the background color of the navigation bar. Here’s a snippet from my index.html:

```
<ion-nav-bar align-title="center" class="bar-balanced">
    <ion-nav-buttons side="left">
        <button ng-hide="$exposeAside.active" class="button button-clear" ng-click="showMenu()" aria-label="Menu"><i class="icon ion-navicon"></i></button>
    </ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>

```

If you put some of your code in a codepen I could help out more. 😄