Prose menu to the right of the header logo?

Community Forums Forums Design Tips and Tricks Prose menu to the right of the header logo?

This topic is: not resolved

This topic contains 8 replies, has 2 voices, and was last updated by  aaron1728 8 months, 3 weeks ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #70272

    aaron1728
    Participant
    Post count: 23

    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/
    #70313

    nutsandbolts
    Moderator
    Post count: 3113

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #71744

    aaron1728
    Participant
    Post count: 23

    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

    #72626

    aaron1728
    Participant
    Post count: 23

    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.

    #72633

    nutsandbolts
    Moderator
    Post count: 3113

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #72636

    aaron1728
    Participant
    Post count: 23

    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.

    Firebug picture of what I'm trying to get

    • This reply was modified 8 months, 3 weeks ago by  aaron1728. Reason: clarity
    • This reply was modified 8 months, 3 weeks ago by  aaron1728. Reason: clarity
    #72638

    nutsandbolts
    Moderator
    Post count: 3113

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #72642

    aaron1728
    Participant
    Post count: 23

    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%;
    }
    • This reply was modified 8 months, 3 weeks ago by  aaron1728.
    • This reply was modified 8 months, 3 weeks ago by  aaron1728.
    #72646

    aaron1728
    Participant
    Post count: 23

    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' );
Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.