Display custom menu in header widget as horizontal bar

[senordeer]

Hi. I'm sure this is a simple fix but I am struggling with it. I have created a 2 column utility bar above my header area and I added a custom menu to the widget area there. But, as it is not actually in the header, it is above it, when I put the custom menu widget in, it displays as a vertical list, I just want it to display horizontally, like a regular nav menu would.

URL: http://meganestephens.com

Child theme: Agentpress

http://meganestephens.com

[Tom]

It looks like you've got this fixed up!

if yes, please mark this thread 'resolved' - if not please provide additional detail for this problem.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[jbendiner]

I am looking to do exactly the same thing with a custom menu.
Would you be willing to share with me how you did it?
Thank you.
Jerry

[senordeer]

Hey Jerry you know what I think ended up just moving the primary nav menu, but I did have to do something similar (but not quite exact) on another site and used the following css:

<style>
.widget_nav_menu {
	clear: both;
	font-size: 14px;
	line-height: 1;
	width: 100%;
}

.widget_nav_menu .menu-item {
	display: inline-block;
	text-align: left;
}

.widget_nav_menu a {
	color: #FFA291;
	display: block;
	font-size: 14px;
	padding-right: 65px;
padding-left:65px;
padding-top: 20px;
padding-bottom: 20px;
        text-transform: uppercase;
border:2px solid #FFA291;

}

.widget_nav_menu a:hover,
.widget_nav_menu .current-menu-item > a,
.widget_nav_menu .sub-menu .current-menu-item > a:hover {
	color: #1a212b;
}

.widget_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;
}

.widget_nav_menu .sub-menu a {
	background-color: #fff;
	border: 1px solid #eee;
	border-top: none;
	font-size: 12px;
	padding: 20px;
	position: relative;
	width: 200px;
}

.widget_nav_menu .sub-menu .sub-menu {
	margin: -55px 0 0 199px;
}

.widget_nav_menu .menu-item:hover {
	position: static;
}

.widget_nav_menu .menu-item:hover > .sub-menu {
	left: auto;
	opacity: 1;
}
.widget_nav_menu .sub-menu li {
margin-left:0px;
}

</style>

[Author]

Posts