Custom a Menu created in Settings

Highlighted
Occasional Contributor

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.

 

 

Reply
0 Upvotes
2 Replies 2
Regular Advisor | Platinum Partner

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! Smiley Happy

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