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

[Resolved] highlighting menu idea

Home Forums Support highlighting menu idea

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #172226
    Sven

    Hi Tom,

    I just fell over a theme, that has a nice feature and I wonder how to implement that in GP…

    With Accesspress Lite you click on a menu item and then there’s a lightweight, colored (same as active link) line below the menu.

    Is there an easy way to implement that via CSS?

    I appreciate your answer!

    Sven

    P.S.: Perhaps you can add that in your theme as a selectable feature?

    • This topic was modified 4 years, 9 months ago by Tom.
    #172309
    Tom
    Lead Developer
    Lead Developer

    Hi Sven,

    A borders add-on is in the works 🙂

    To do this for now, try this:

    .main-navigation {
        border-bottom: 5px solid #222222;
    }

    Just adjust the color to match your site.

    #172385
    Sven

    Hi Tom,

    border add-on… great to hear that! 🙂

    Is it possible to have the menu border only shown by hovering the menu? How do I have to change the css-code you posted above?

    Regards, Sven

    #172386
    Sven

    .main-navigation:hover {
    border-bottom: 5px solid #222222;
    }

    Got it… sorry for asking too fast!

    Sven

    #172387
    Sven

    with this code there’s a line of 5px added when hovering the menu, that wasn’t there before and also hides again when one leaves the menu… so that way anything below the menu kind of “drops/jumps”…

    If you haven’t already taken care or thought about that, you should with the add-on… perhaps by adding a line of n px with the same colors as the menu and only change that line when hovering!? But you’re the master of development!

    Kind regards, Sven

    #172401
    Tom
    Lead Developer
    Lead Developer

    To get rid of the jump you could do this:

    .main-navigation {
        border-bottom: 5px solid transparent;
    }
    .main-navigation:hover {
        border-bottom: 5px solid #222222;
    }
    #172561
    Tony

    Hi Sven/Tom – I have added this to my css and get a line under the full length of the menu bar on hover.
    It’s nice but on twitter you get a coloured bar under the menu item when you hover – not the whole menu.

    Have I got it wrong in my css? Is the twitter method possible?

    #172569
    Tom
    Lead Developer
    Lead Developer

    You could do something like this:

    .main-navigation li a:hover {
        box-shadow: inset 0px -5px 0px 0 red;
    }
    #172580
    Tony

    That works.
    Is there a possibility to leave it on when you’re on the page related to that menu item?

    #172616
    Tom
    Lead Developer
    Lead Developer

    For sure:

    .main-navigation li.current-menu-item a,
    .main-navigation li a:hover {
        box-shadow: inset 0px -5px 0px 0 red;
    }
    #172650
    Tony

    Thanks Tom – that’s a nice effect. Combining them you can get a colour on hover and then have a different colour when you arrive at the page – if you want to. Even have a full bar and then just on the current menu. So many options – mix and match.

    .main-navigation li a:hover {
    box-shadow: inset 0px -3px 0px 0px colour_here;
    }
    .main-navigation li.current-menu-item a {
    box-shadow: inset 0px -1px 0px 0px colour_here;
    }

    #172714
    Tom
    Lead Developer
    Lead Developer

    No problem! Glad you like it 🙂

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