Menu icon Foundation
F6 top bar customization

Hi

What are the classes that should be modified to change the properties of the menu arrow (blue colour and shape) , as well as the  submenu's highlighting colour, when hovering the mouse (both blue). I don't think that can be done with the additional CSS. Probably in the main CSS style sheet, but I don't know where.

Thanks!

http://zurb.com/building-blocks/f6-top-bar

Coralie

F6navigationbarmenu

Hi

What are the classes that should be modified to change the properties of the menu arrow (blue colour and shape) , as well as the  submenu's highlighting colour, when hovering the mouse (both blue). I don't think that can be done with the additional CSS. Probably in the main CSS style sheet, but I don't know where.

Thanks!

http://zurb.com/building-blocks/f6-top-bar

Coralie

Rafi Benkual about 3 years ago

It's made with a CSS triangle. I used the inspector to get the selector and styles

So you can change it with CSS:

.dropdown.menu > li.is-dropdown-submenu-parent > a:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: 5px inset;
    border-color: #fff transparent transparent;
    border-top-style: solid;
    border-bottom-width: 0;
    right: 5px;
    margin-top: -2px;
}

 

coralie diatkine about 3 years ago

Thank you Rafi

 

I have been able to modify parameters such as the margin successfully, but not the color. 

Besides, on small device mode, the triangle overlaps the menu item text...

See screen captures.

 

Is there anything else that should be modified, and where should I look to change the triangle margin in small device mode? 

Thanks!

Coralie

Rafi Benkual about 3 years ago

It's hard to tell without seeing your code.

Here is a blank codepen http://codepen.io/rafibomb/pen/XKpbdB