Custom a Menu created in Settings

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.

Hi @Sinem ,

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

Example:

HTML

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

CSS

.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! :slightly_smiling_face:

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