Community Forums › Forums › Archived Forums › Design Tips and Tricks › Styling the Menu for current page
- This topic has 4 replies, 2 voices, and was last updated 8 years, 5 months ago by SchneiderS.
-
AuthorPosts
-
October 31, 2015 at 9:50 am #169725SchneiderSMember
Hey,
i am currently working on an webproject, but i have an problem: i wanna style the actual menu.
When a specific site ist visited, then it should be get an other color. I have tried different things, but no one is working. for example:
.genesis-nav-menu a:hover, .genesis-nav-menu .sub-menu .current_page_item > a:hover { color: #fff; }
So i don't no where is the problem. so please: if you have any idea how to fix this problem: thank you very much!
http://gerner.yaseed.net/October 31, 2015 at 9:53 am #169726SchneiderSMemberHey i'm sorry. Here is the code:
/* Site Navigation ---------------------------------------------------------------------------------------------------- */ .genesis-nav-menu { clear: both; color: #222; line-height: 1.5; width: 100%; } .genesis-nav-menu .menu-item { display: inline-block; text-align: left; } .genesis-nav-menu a { border: none; color: #9a999a; display: block; line-height: 1; font-size: 14px; padding: 22px 18px; position: relative; text-decoration: none; } .genesis-nav-menu a:hover, .genesis-nav-menu .sub-menu .current_page_item> a:hover { color: #fff; } .genesis-nav-menu .sub-menu { left: -9999px; opacity: 0; position: absolute; -webkit-transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -ms-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out; width: 200px; z-index: 99; } .genesis-nav-menu .sub-menu a { background-color: #666766; border-top: none; font-size: 14px; padding: 20px; position: relative; width: 200px; } .genesis-nav-menu .sub-menu a:hover { background-color: #666766; color: #fff; } .genesis-nav-menu .sub-menu .sub-menu { margin: -56px 0 0 199px; } .genesis-nav-menu .menu-item:hover { position: static; } .genesis-nav-menu .menu-item:hover > .sub-menu { left: auto; opacity: 1; } .genesis-nav-menu > .first > a { padding-left: 0; } .genesis-nav-menu > .last > a { padding-right: 0; } .genesis-nav-menu > .right { display: inline-block; float: right; line-height: 1; list-style-type: none; padding: 24px 0; } .genesis-nav-menu > .right > a { display: inline; padding: 0; } .genesis-nav-menu > .right > a:hover { background: none; color: #0069b4; } .genesis-nav-menu > .rss > a { margin-left: 20px; } .genesis-nav-menu > .search { padding: 6px 0 0; } .genesis-nav-menu li.highlight-menu-item a { background-color: #222; color: #fff; margin-left: 20px; } .genesis-nav-menu li.highlight-menu-item a:hover { background-color: #0069b4; color: #fff; }
October 31, 2015 at 10:02 am #169727Jamaluddin RahmatMemberAdd new custom body class for your current page.
https://my.studiopress.com/snippets/custom-body-class/Then you can use the new custom body class + native genesis css.
Eg:
.name-your-current-page .genesis-nav-menu
October 31, 2015 at 10:49 am #169729SchneiderSMemberHey Jamal,
thank you for your support. But it do not work.
I have include the custom body class for one page: http://gerner.yaseed.net/ueber-uns/
And i have this style:
.genesis-nav-menu a:hover, .genesis-nav-menu .sub-menu .current-menu-item > a:hover { color: #222; } .genesis-nav-menu a:active, .genesis-nav-menu .sub-menu .current-menu-item > a:active { color: #222; }
Uff, my brain...Can you help where my problem is?
October 31, 2015 at 11:13 am #169734SchneiderSMemberOk hey guys, i find this solution:
.genesis-nav-menu .page_item a:hover, .genesis-nav-menu .current_page_item a { color: #fff; }
now it work fine. i don't need any custom class.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.