# 관리자 GNB 색상 변경하기

## 📌 요구사항 정의 및 분석

* 상점의 아이덴티티를 나타내는 색상이 존재하여, 해당 색상을 상점 관리자의 GNB에 적용하고 싶음.
* 고도몰 상점 관리자 GNB 영역은 수정이 가능한 부분임을 확인하여 해당 부분 색상을 수정하고자 함.

## 📝 개선안 정리

* 색상을 변경하고자 하는 GNB 범위 선정

<figure><img src="/files/nTIXASHsZRmih2wz8LyQ" alt=""><figcaption></figcaption></figure>

* 영역 별로 다른 색상을 적용하며, ➀번은 <mark style="background-color:blue;">#213D54</mark>으로 ➁번은 <mark style="color:blue;">#5A86CB</mark> 으로 변경

## 🛠️ 커스터마이징 진행

* `admin/header.php` 파일에서 수정하고자 하는 영역의 클래스를 확인합니다.
* 관리자페이지 CSS를 추가할 수 있는 `admin/css/admin-custom.css` 파일을 엽니다.

{% code title="admin-custom.css" %}

```css
@charset "utf-8";

/**
 * custom css 입니다. 추가적인 css는 여기에 작성을 해주세요.
 */
```

{% endcode %}

* ➀번 클래스의 background-color를 <mark style="background-color:blue;">#213D54</mark> 로 지정합니다.&#x20;

{% code title="admin-custom.css" %}

```css
@charset "utf-8";

#header .navbar {
    background-color: #213D54;
}

```

{% endcode %}

* ➁번 클래스의 background-color를  <mark style="color:blue;">#5A86CB</mark> 로 지정합니다.

{% code title="admin-custom.css" %}

```css
@charset "utf-8";

#header .nav.navbar-nav.reform {
    background-color: #5A86CB;
}
```

{% endcode %}

## 🔖 결과 확인

<figure><img src="/files/oC08KHthdLSFDVHa78fN" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://devcenter-help.nhn-commerce.com/guide/tuning-example/modify-admin-gnb.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.