Custom Menu with Genesis Sample Theme

[Tbnk]

Hi,

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.

[Susan]

As 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.

[Tbnk]

Yes it's resolved : I use a third party plugin for the menu and it's possible to customize the css.

[Susan]

Great! I will close this as "resolved".

[Author]

Posts