Community Forums › Forums › Archived Forums › Design Tips and Tricks › Custom Menu with Genesis Sample Theme
- This topic has 3 replies, 2 voices, and was last updated 7 years, 9 months ago by
Susan.
-
AuthorPosts
-
September 13, 2015 at 6:39 pm #165377
Tbnk
MemberHi,
I know I could go to any CSS forum. But I thought it was easier there because I use Genesis Sample Theme and I would like to deeply customize the menu.
Here's the original CSS :
/* # Site Navigation ---------------------------------------------------------------------------------------------------- */ .genesis-nav-menu { clear: both; font-size: 16px; font-size: 1.6rem; line-height: 1; width: 100%; } .genesis-nav-menu .menu-item { display: inline-block; text-align: left; } .genesis-nav-menu a { color: #333; text-decoration: none; display: block; padding: 30px 24px; } .genesis-nav-menu a:hover, .genesis-nav-menu a:focus, .genesis-nav-menu .current-menu-item > a, .genesis-nav-menu .sub-menu .current-menu-item > a:hover, .genesis-nav-menu .sub-menu .current-menu-item > a:focus { color: #c3251d; text-decoration: underline; } .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: #fff; border: 1px solid #eee; border-top: 0; font-size: 14px; font-size: 1.4rem; padding: 20px; position: relative; width: 200px; word-wrap: break-word; } .genesis-nav-menu .sub-menu .sub-menu { margin: -55px 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 { color: #fff; float: right; list-style-type: none; padding: 30px 0; } .genesis-nav-menu > .right > a { display: inline; padding: 0; } .genesis-nav-menu > .rss > a { margin-left: 48px; } .genesis-nav-menu > .search { padding: 10px 0 0; } /* ## Accessible Menu --------------------------------------------- */ .menu .menu-item:focus { position: static; } .menu .menu-item > a:focus + ul.sub-menu, .menu .menu-item.sfHover > ul.sub-menu { left: auto; opacity: 1; } /* ## Primary Navigation --------------------------------------------- */ .nav-primary { background-color: #333; } .nav-primary .genesis-nav-menu a { color: #ccc; text-decoration: none; } .nav-primary .genesis-nav-menu a:hover, .nav-primary .genesis-nav-menu a:focus, .nav-primary .genesis-nav-menu .current-menu-item > a { color: #fff; text-decoration: underline; } .nav-primary .genesis-nav-menu .sub-menu a { color: #333; } .nav-primary .genesis-nav-menu .sub-menu a:hover, .nav-primary .genesis-nav-menu .sub-menu a:focus, .nav-primary .genesis-nav-menu .sub-menu .current-menu-item > a { color: #c3251d; text-decoration: underline; }
I would like a menu with round corners (on the sides), even when "hover" and a border between each item (= a line, nothing top or bottom).
And I'm very close !
Here's what I have so far (I just paste what I changed or add) :
.genesis-nav-menu { clear: both; font-size: 14px; line-height: 1; width: auto; background-color: #aa1482; } .genesis-nav-menu .menu-item { display: inline-block; text-align: left; border-right: 1px solid #bf43a2; } .genesis-nav-menu a { color: #333; display: block; padding: 17px 17px; } /* ## Primary Navigation --------------------------------------------- */ .nav-primary .genesis-nav-menu a { color: #fff; } .nav-primary .genesis-nav-menu .sub-menu a { color: #333; } .nav-primary .genesis-nav-menu a:hover, .nav-primary .genesis-nav-menu .current-menu-item > a, .nav-primary .genesis-nav-menu .sub-menu .current-menu-item > a:hover { background-color: #5d094e; }
I've some problems with the responsive design and the submenus styles (didn't try to solve anything), but now I've to problems I'm not able to solve :
1) Where can I add the border-radius ?border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px;
I'm just not able to add this for the first child (and not a different one for the last child).
2) Between each item there's a margin. When hover or current, it's messy : border / regular background / current or hover background ; rather than border / current or hover background.
Thanks for your help.
December 12, 2015 at 9:06 am #173619Susan
ModeratorAs you posted this a while ago, I’m hoping that you were able to get your issue resolved 🙂 – if not, report back here, so it can be escalated.
December 12, 2015 at 9:36 am #173621Tbnk
MemberYes it's resolved : I use a third party plugin for the menu and it's possible to customize the css.
December 12, 2015 at 9:43 am #173622Susan
ModeratorGreat! I will close this as "resolved".
-
AuthorPosts
- The topic ‘Custom Menu with Genesis Sample Theme’ is closed to new replies.