Prose menu to the right of the header logo?

[aaron1728]

Two parts to this. I'd like the nice pull-down Primary menu move to the right of the header logo.

I'd like to have a different color behind the header (where the logo and menu would be) but changing background in the #header isn't doing it.

http://www.grossweb.com/mg/

[nutsandbolts]

To put a menu to the right of the logo, go to Appearance > Widgets and drag the Custom Menu widget into the Header Right widget area. It will let you choose which menu appears there. If you want to take it out of the primary position, be sure to uncheck the Primary Navigation box under Appearance > Menus.

As for the header, since you uploaded your logo in Appearance > Header, that will override any CSS you try to put in place. You could remove the logo from there, then add the following to your CSS:

#header {
background: #545454 url(http://www.grossweb.com/mg/wp-content/uploads/2013/10/mg3.png) no-repeat !important;
}

However, you'll still have a white border because the wrap/padding is set to white.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[aaron1728]

That helped. I'm trying to get rid of the Title and Description in the header now and to restore the attractive horizontal pull-down menu with the arrow beneath them so they look like: http://melrose-gardens.moodio.me/amenities/wellness-program.html

[aaron1728]

Using the Custom Menu widget didn't work. You'll see the original primary menu under the header. I added a second copy of it into the Header Right widget but NONE of the styles worked. It became a vertical menu. No lovely superfish stuff.

Take a peek, now.

[nutsandbolts]

It just needs some CSS to tell it how to look. You can use Firebug on the old version of the site to get an idea of what fonts, style rules, etc. were used, then search your stylesheet for rules related to the header right widget area.

Looks like changing the width of header-right to 598px instead of 600px will allow the header to come back onto one line instead of splitting in half.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[aaron1728]

The split in half was fixed. It was broken for a moment... probably when you looked at it.

The issue is trying to move the existing Primary Nav menu, with its current attributes, to the header-right area.

Sticking a Custom Menu widget in the header right area gets the pink drop-down you see, now, not the nice Primary Nav menu. There is a text widget with the line of text showing what I want and a Custom Menu widget below it.

[nutsandbolts]

Right, because the header right widget area is styled differently than the primary nav area. You can use the same menu items there, but you have to use CSS to make them look like they do in the primary nav part of the site.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[aaron1728]

Seems like a lot of code copying and no real way to make the Header Right "inherit" what's already been coded. Worse, because Prose tucks settings all over the place, it's not easy to extract only what's needed.

Sometimes, old-school "cut and copy" code can be a lot more efficient than superimposing object-oriented programming , without exception.

#nav {
	background:  #f5f5f5  
	border: 1px solid #ddd;
	box-sizing: border-box;
	clear: both;
	color: #666;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 13px;
	margin: 0 auto;
	overflow: hidden;
	text-transform: uppercase;
	width: 100%;
}

#nav .wrap {
	border: 1px solid #fff;
	box-sizing: border-box;
	overflow: hidden;
	width: 100%;
}

#nav ul {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

#nav ul ul {
	border: none;
}

#nav li {
	float: left;
	list-style: none;
}

#nav li a {
	color: #666;
	display: block;
	margin: 0;
	padding: 7px 10px 6px;
	position: relative;
	text-decoration: none;
}

#nav li a:active,
#nav li a:hover,
#nav .current_page_item a,
#nav .current-cat a,
#nav .current-menu-item a {
	background: #444;
	color: #fff;
}

#nav li a .sf-sub-indicator {
	display: block;
	height: 10px;
	overflow: hidden;
	position: absolute;
	right: 5px;
	text-indent: -9999px;
	top: 14px;
	width: 10px;
}

#nav li li a,
#nav li li a:link,
#nav li li a:visited {
	background: #444;
	border-right: 1px solid #fff;
	border-top: 1px solid #fff;
	color: #fff;
	margin: 0;
	padding: 7px 10px 6px;
	position: relative;
	text-transform: none;
	width: 148px; 
}

#nav li li a:active,
#nav li li a:hover {
	background: #444;
	color: #fff;
}

#nav li li a .sf-sub-indicator {
	top: 10px;
}

#nav li ul {
	height: auto;
	left: -999em;
	margin: 0;
	padding: 0;
	position: absolute;
	width: 170px;
	z-index: 9999;
}

#nav li ul a {
	width: 140px;
}

#nav li ul ul {
	margin: -34px 0 0 169px;
}

#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li.sfHover ul ul,
#nav li.sfHover ul ul ul {
	left: -999em;
}

#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li.sfHover ul,
#nav li li.sfHover ul,
#nav li li li.sfHover ul {
	left: auto;
}

#nav li:hover, #nav li.sfHover {
	position: static;
}

/* Primary Navigation Extras
------------------------------------------------------------ */
	
#nav li.right {
	float: right;
	margin: 0;
	padding: 7px 10px 6px;
}

#nav li.right a {
	background: none;
	border: none;
	color: #666;
	display: inline;
	font-weight: normal;
	text-decoration: none;
}

#nav li.right a:hover {
	background: none;
	color: #666;
	text-decoration: underline;
}

#nav li.rss a {
	background: url(images/rss.png) no-repeat left center;
	margin: 0 0 0 10px;
	padding: 3px 0 3px 16px;
}

#nav li.rss a:hover {
	background: url(images/rss.png) no-repeat left center;
}

#nav li.date {
	color: #666;
}

#nav li.search {
	padding: 0 5px 0;
}

#nav li.twitter a {
	background: url(images/twitter-nav.png) no-repeat left center;
	padding: 3px 0 2px 20px;
}

#nav li.twitter a:hover {
	background: url(images/twitter-nav.png) no-repeat left center;
}

The current header widget area is modified in the Prose custom code as:

#header .widget-area {
    background-color: #545454 !important;
    height: 100px !important;
    padding-top: 0px !important;
}

Do I basically repeat all the lines from the first section of copied code and add "#header .widget-area " before each section? Here's a sample:

#header .widget-area nav {
	background:  #f5f5f5  
	border: 1px solid #ddd;
	box-sizing: border-box;
	clear: both;
	color: #666;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 13px;
	margin: 0 auto;
	overflow: hidden;
	text-transform: uppercase;
	width: 100%;
}

[aaron1728]

What would be nifty is something to the effect of

/** Reposition the primary navigation */
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_header_widget', 'genesis_do_nav' );

[munguti]

How do you manage to achieve it Aaron?

[Author]

Posts