Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] strange behaviour of menu item top border

Home Forums Support strange behaviour of menu item top border

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #341256
    Christoph

    I have added this CSS to my secondary navigation menu:

     .secondary-navigation .current-menu-item {
    	border-top: 3px solid #b0cee8;
    }

    It adds a little line to the top of the current menu item. And it works as expected. The problem is that the hover pseudo class for the non-current menu-items seems to inherit that top border (but not the colour), which makes absolutely no sense.

    In practice, this means that hovering over the menu items will change their colour except for the to border. Like this:

    06.29.2017-11.30.54

    In the screenshot, Home is the current menu item which works as it should and Forum is being hovered over. What I would expect is that there is no dark blue border at the top of the Forum item.

    It is a mystery to me, how my custom CSS code can affect the hover effect of an entirely different item. What am I missing?

    I am obviously getting something completely wrong because even my emergency hack doesn’t fix this:

    .secondary-navigation .menu-item {
    	border-top: 0px;
    }

    I might add as a second question:

    How do I set the menu colour for “Background Current Hover”? You are providing a setting for “Background Current” and “Background Hover” but there is no setting for “Background Current Hover”. The easiest way to fix that might be to give “Background Hover” priority over “Background Current” so that the hover effect works for all menu items, regardless of state, but that may not always be desired. In my case, the issue is with a dropdown menu. When the top item of the dropdown menu is the current page and you open the drop down menu, the background of the dropdown has the “Background Current” colour (perhaps because the items shown are all anchors on the same page) and that is fine but the problem is that the hover over effect is not working on those items. That’s where I need the “Background Current Hover” setting.

    GP Premium 1.3.1
    #341340
    Christoph

    Okay, it is beginning to dawn on me that borderactually adds pixels to the element, in this case making the menu bar 3 pixels higher. But I still can’t figure out how I can make the border of the menu items be styled the same way as the item itself.

    #341526
    Tom
    Lead Developer
    Lead Developer

    You can use an inset box shadow instead: box-shadow: 0 3px 0 red inset;

    #341632
    Christoph

    Thanks, that was one of the things I tried but it didn’t work. I couldn’t get the shadow to show up inside the box. It seemed like it was always under the box.

    #341765
    Tom
    Lead Developer
    Lead Developer
    #341848
    Christoph

    Hm?

    06.30.2017-10.45.40

    This works (but with the caveat described in the OP):

    nav#secondary-navigation .current-menu-item {
    	border-top: 3px solid #b0cee8;
    }

    This doesn’t:

    nav#secondary-navigation .current-menu-item {
    	box-shadow: 0 3px 0 red inset;
    } 
    #342013
    Tom
    Lead Developer
    Lead Developer

    This would be your CSS:

    #site-navigation .main-nav > ul > li.current-menu-item > a {
    	box-shadow: 0 3px 0 red inset;
    } 
    #343271
    Christoph

    I added your snippet to my CSS but with no effect. It looks like your selector is wrong because when I use the browser inspector to check the CSS for that element, it doesn’t even have the box-shadow attribute set.

    Speaking more generally, it doesn’t seem logical to me that changing the selector would solve the problem because my selector (nav#secondary-navigation .current-menu-item) is working. What’s not working is the box-shadow attribute.

    #343510
    Tom
    Lead Developer
    Lead Developer

    Can you add my CSS and then link me to the page where it should be working?

    #343859
    Christoph

    Your CSS is added and the page is kunsido[dot]net

    #344040
    Tom
    Lead Developer
    Lead Developer

    You still have this CSS that you’ll need to remove:

    nav#secondary-navigation .current-menu-item {
        border-top: 3px solid #b0cee8;
    }

    Then adjust mine to work with the secondary nav:

    #secondary-navigation .main-nav > ul > li.current-menu-item > a {
    	box-shadow: 0 3px 0 #b0cee8 inset;
    } 

    And here’s the result: https://www.screencast.com/t/CaZ9iN3f

    #344087
    Christoph

    Thanks a lot. Now it works. If you don’t mind, could you explain why nav#secondary-navigation .current-menu-item works to add the border but not the inner shadow?

    #344097
    Tom
    Lead Developer
    Lead Developer

    It might, my CSS just makes sure it’s adds it to the top level menu items and not drop down menu items.

    #344100
    Christoph

    Well, it doesn’t, that’s the thing. Granted that your selector is more fail-proof, but that’s not what I’m wondering about. It’s that it works to make one modification but not another.

    The way I understood CSS works is that you target an element in step 1 and then, in step 2, you modify it. So if you’re holding the thing in your hand, as it were, after step 1, then it doesn’t matter what selector you used to catch it, right? But apparently that’s not the case…

    Anyway, thanks for your patience and help.

    #344128
    Tom
    Lead Developer
    Lead Developer

    All my CSS does is target the first level of list items – the top level menu items.

    Your CSS will work as well, it will just target every element with that class inside the secondary navigation, including sub-menu items.

    Totally up to you which one you use 🙂

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.