Trouble with Navigation menu

[iizag]

Hi I am having trouble figuring this out my site is http://iamoptics.com/

Hi , so when I am on a page, what ever page I am on my menu item top border is visible and colored blue.

1. ) How can I make the hover of the menu turn the menu top border pink ? Right now when I try it shows a top border pink but it shows it above the blue border. I want it to show on the same line as the blue border ( so on HOVER the pink border will over-right the blue border not show both).

2.) Once the above code works, I want to make the current page menu item stay with the pink top border.

[Paulie_D]

Did you want to retain the top border on the ‘nav’? It’s controlled by

.ubermenu-skin-white {
border-color: #2cbfd9 -moz-use-text-color #eee;
border-style: solid none;
border-width: 2px medium 1px;
}

[Paulie_D]

Right now when I try it shows a top border pink but it shows it above the blue border.

I’m not seeing this at all.

[iizag]

@Paulie_D ,
Hi, Yes I want to retain the blue border. I tried this in firebug but the blue border on hover is still showing rather then being over written with the pink border :

.ubermenu-menu-50 .ubermenu-item-type-post_type:hover {
    border-top: 2px solid #ed008c;
}

[Paulie_D]

Assuming we’re looking at the same thing the top menu li are in a ul

ul id="ubermenu-nav-main-50-primary" class="ubermenu-nav"

So I’m guessing that your above code is incorrect as to the parent selector.

Note that this will put a border on the li which will be directly below the border on the ul.

[iizag]

This works the same and is a smaller code but it has the same issue

.ubermenu-menu-50 li:hover {
    border-top: 2px solid #ed008c;
}

Would you like me to implement it so you could see it active?

So if its Ul i want how could I target it ?

[iizag]

I implemented it so you could see. but its not what I want. I want the pink to overwrite the blue on hover not show under.

@Paulie_D

Is adding Margin-top , which does what I want, the right way to go about this or will it break on different screen sizes or browsers?

.ubermenu-menu-50 li:hover {
    border-top: 2px solid #ed008c;
    margin-top: -2px;
}

[Paulie_D]

I want the pink to overwrite the blue on hover

The blue border, as I understand it, is on the nav so you can’t override that on any particular li only cover it up by playing with margins as you have found.

The margins shouldn’t be a huge issue at other screen sizes but the effect is quite odd looking at mobile size.

[Paulie_D]

What you could do is use a pseudo element on the ul and a border on the li that changes on hover.

I’ve exaggerated it here.

http://codepen.io/Paulie-D/pen/ZYpbLL

[Author]

Posts