Hello!

How can I change the color of the nav menu for the arrow down and the underline of every menu item?

I noticed in the .less file the .ArrowDown class, but no color is specified.

The class of the arrow seems to be 

ul.menu > li > a::before

but I don't know where to change it.

If I place it with a different color in the custom CSS, that rule is overwritten by the original rule.

Thanks!

Well, I managed the bottom line (I forgot that part in the documentation).

About the arrow down, if I add thi in the custom CSS I can change the arrow color:

.main-navigation ul.menu > li > a::before { border-top: 6px solid #FFCC00;}

But I can see the arrow moving down from the header/logo container, like that arrow has a z-index...

I'm not sure, cause my customer could changed something on the main CSS, so please let me know what do you think about it

(by the way, how can I hide that arrow?)

Thanks

If you look here: http://www.parksadvisor.it you can see the arrow on the menu....

As we changed its colour, we can see it moving down from top... 

Again, I'm not sure if my customer edited the original CSS or not... But do you know if that arrow is "over" any other layer or if it's usually under the div that contains the logo?

Thanks!

Ok, so it's not a z-index problem.

Ok, I'll keep in mind.

Just a little thing I noticed about the arrow: even with the same color of the background, if I place my mouse cursor over the "hidden" arrow (so in the original upper position), it changes to the "hand", as I think it's just a CSS trick for hiding the arrow, but it don't disable the <a> tag when hidden. well, it's just an idea for a future improvement ;)

Ehm... just a last thing: that arrow is still present in this theme? I mean: my customer played with some custom CSS and now he tells me that arrow disappeared.

I think it's strange, cause I remember I changed the color of that arrow after updating the theme.

But he added a background where you can place the banner... maybe that container could break the arrow animation?

the site is always the same: http://www.parksadvisor.it

If you didn't removed the arrow effect, probably he changed something with the custom CSS. But he told me even removing all the custom CSS, arrows still miss... 

Thanks!

LOL

Well, when I noticed the update, as we talked early, I uploaded just the files you mentioned in the changelog.

But I'm almost sure the arrow was still there.

Then my customer edited something to add a background to the div that contains the logo. (you can see it on the above URL).

I think he used some customCSS. And that's broke the animation.

He can confirm that this change removed arrows, but if he tries to turn back, he gets only the arrow on the selected menu, not the animation (but probably it's still something within the CSS).

I noticed too the missing arrow on your demo site, but I was thinking it was an option or a choice to remove it ;)

I'll be try to find what he did, and if I discover something, I'll give you a call here ;)

Hi Marco Callegari,

how did you decrease the height of your (main) nav menu?

Regards

Thanks, but I meant the height of the nav bar. I tried #mgm-navigation {padding: 20px 0;} and #mgm-navigating {padding: 20px 0;} but that did not help.

Regards

@Marco Callegari: Any hints? :)

have you tried to change the min-heigth of .main-navigation ul ?

Hi,

I would like to try this, but my CSS Skils are average. I tried different Codes, but nothing helped.

For example:

.main-nav{min-height:28px !important;}

and

.main-navigation > li > a, .main-navigation-brand {
    padding-top:4px !important; 
    padding-bottom:0 !important;
    height: 28px;
}

and 

.main-navigation ul {
text-align: center;
min-height: 10px;
}

try this instead

#menu-main{min-height:90px;}

But it will change the sticky menu too... So I think you should tweak it a little ;)

Thank you,

but nothing happened, when I pasted your Code. I tried this instead

#mgm-menu {min-height:90px;}

but when I do so, the following behaviour happens: Under the main-nav bar I get another area with the same clolour like the header-area.

I just would like to reduce the the main-nav height so that it is slimmer. :)

Hi there,

this code finally worked, thanks! Which command do I need for changing the height of the submenus below the main-menu items? I tried

#nav-original .sub[and \"secondary\"]-navigation ul {
    min-height: auto!important
}

#nav-original .sub[and \"secondary\"]-navigation ul.menu > li > a {
    padding: 10px;
}

but nothing happened. Sorry for efforts.

Regards