Menu icon Foundation
Problem with menus ignoring settings in settings.scss

I am having issues getting most browsers (except Chrome) to pay attention to rules set in settings.scss for accordion menu and dropdown menu. Chrome is displaying this properly. All others are showing arrows for the dropdown menu which I set to false and are not displaying the proper colors. Can anybody see what I am doing wrong? Thank you!

 

www.midians.com/newsite/index.php

menuresponsive toggleResponsivedropdownaccordion

I am having issues getting most browsers (except Chrome) to pay attention to rules set in settings.scss for accordion menu and dropdown menu. Chrome is displaying this properly. All others are showing arrows for the dropdown menu which I set to false and are not displaying the proper colors. Can anybody see what I am doing wrong? Thank you!

 

www.midians.com/newsite/index.php

Ryan Patterson about 2 years ago

I can't say for sure why the options set in _settings.scss aren't working on all browsers, but you could hide these arrows manually in css using: 

.dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a::after {
    display: none;
}

You may want to use css media queries if you only want to apply this to certain screen sizes. 

as far as changing the color, it's same thing, you can do manually in css/sass using: 

.dropdown.menu.medium-horizontal > li > a {
    color: [insert rgb, hex or color variable];
}

*Note - your link color is set to red. But if you wanted to set the navigation links to a different color. I would add a unique ID or class to the navigation menu, then use that to target with CSS. 

Just as a side note, I see you're not using many html5 semantic tags. I would suggest putting your header content inside a header tag <header> and putting the navigation menu's code inside a nav tag <nav>. Then use landmark roles for better accessibility. 

HTML5 Semantic Tags: https://www.w3schools.com/html/html5_semantic_elements.asp

Landmark Roles: https://www.w3.org/TR/wai-aria-practices/examples/landmarks/HTML5.html