Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Trouble with Navigation menu

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #191392
    iizag
    Participant

    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.

    #191417
    Paulie_D
    Member

    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;
    }
    
    #191419
    Paulie_D
    Member

    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.

    #191441
    iizag
    Participant

    @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;
    }
    
    #191448
    Paulie_D
    Member

    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.

    #191450
    iizag
    Participant

    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 ?

    #191459
    iizag
    Participant

    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;
    }
    
    #191475
    Paulie_D
    Member

    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.

    #191476
    Paulie_D
    Member

    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

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.