# Custom a Menu created in Settings

**URL:** <https://community.hubspot.com/t/custom-a-menu-created-in-settings/19334>\
**Category:** CMS Development\
**Tags:** design-manager, navigation, css\
**Created:** [March 10, 2020, 11:35am UTC](https://community.hubspot.com/t/custom-a-menu-created-in-settings/19334 "2020-03-10T11:35:43Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sinem](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sinem/32/98997_2.png) [@Sinem](https://community.hubspot.com/u/Sinem)\
**Post date:** [March 10, 2020, 11:35am UTC](https://community.hubspot.com/t/custom-a-menu-created-in-settings/19334/1 "2020-03-10T11:35:43Z")

</div>

Hello everybody,

I am coding a website where there is a menu. I do this _ **Settings\>Website\>Navigation** _ and there I do _ **+Add menu.** _

In the design manager I create a module and use this method to use my menu in my page :

**{% menu “my\_menu” ,**  
**site\_map\_name=‘MenuSinemTest’,**  
**overrideable=False,**  
**root\_type=‘site\_root’,**  
**flyouts=‘true’,**  
**max\_levels=‘2’,**  
**flow=‘horizontal’,**  
**label=‘Advanced Menu’ %}**

**HERE IS MY QUESTION:**

How can I customize this menu in my CSS file? Can I give it a class name or an Id to custom it ? When I look at the preview I can see my menu but it is a list and I want the menu items to be inline. I am struggling since 5 days and I can’t find any answer.

Thanks for your answers,

Sinem.

---

<div class="post-metadata">

**Author:** ![DanielSanchez](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/danielsanchez/32/48193_2.png) [@DanielSanchez](https://community.hubspot.com/u/DanielSanchez)\
**Post date:** [March 10, 2020, 12:28pm UTC](https://community.hubspot.com/t/custom-a-menu-created-in-settings/19334/2 "2020-03-10T12:28:22Z")

</div>

Hi @Sinem ,

You can place your menu code, inside a DIV with a class, to be able to customize it.

Example:

**HTML**

```auto
<div class = "my-menu">
 Menu code here
</div>

```

**CSS**

```auto
.my-menu ul {
  background:#fff;
}

.my-menu ul li {
 margin:10px;
 display:inline-block;
 position:relative;
}

.my-menu ul li a{
 background:#d00;
 color:#fff;
 padding:10px;
 text-decoration:none;
}

```

Did this post help solve your problem? If so, please mark it as a solution.

Best regards! 🙂

---

<div class="post-metadata">

**Author:** ![Sinem](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sinem/32/98997_2.png) [@Sinem](https://community.hubspot.com/u/Sinem)\
**Post date:** [March 13, 2020, 6:13am UTC](https://community.hubspot.com/t/custom-a-menu-created-in-settings/19334/3 "2020-03-13T06:13:40Z")

</div>

Hi Daniel !  
Thanks for replying I will try it !  
Best regards, Sinem.