- This topic has 11 replies, 3 voices, and was last updated 8 years, 2 months ago by Tom.
-
AuthorPosts
-
February 11, 2016 at 11:40 pm #172226Sven
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 8 years, 2 months ago by Tom.
February 12, 2016 at 8:48 am #172309TomLead DeveloperLead DeveloperHi 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.
February 12, 2016 at 2:24 pm #172385SvenHi 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
February 12, 2016 at 2:29 pm #172386Sven.main-navigation:hover {
border-bottom: 5px solid #222222;
}Got it… sorry for asking too fast!
Sven
February 12, 2016 at 2:36 pm #172387Svenwith 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
February 12, 2016 at 3:22 pm #172401TomLead DeveloperLead DeveloperTo get rid of the jump you could do this:
.main-navigation { border-bottom: 5px solid transparent; } .main-navigation:hover { border-bottom: 5px solid #222222; }
February 13, 2016 at 2:08 pm #172561TonyHi 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?
February 13, 2016 at 2:52 pm #172569TomLead DeveloperLead DeveloperYou could do something like this:
.main-navigation li a:hover { box-shadow: inset 0px -5px 0px 0 red; }
February 13, 2016 at 3:41 pm #172580TonyThat works.
Is there a possibility to leave it on when you’re on the page related to that menu item?February 13, 2016 at 11:09 pm #172616TomLead DeveloperLead DeveloperFor sure:
.main-navigation li.current-menu-item a, .main-navigation li a:hover { box-shadow: inset 0px -5px 0px 0 red; }
February 14, 2016 at 4:36 am #172650TonyThanks 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;
}February 14, 2016 at 10:56 am #172714TomLead DeveloperLead DeveloperNo problem! Glad you like it π
-
AuthorPosts
- You must be logged in to reply to this topic.