• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Prose menu to the right of the header logo?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

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

This topic is: not resolved

Tagged: background, header logo, menu, Prose

  • This topic has 9 replies, 3 voices, and was last updated 8 years, 1 month ago by munguti.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • November 1, 2013 at 2:23 am #70272
    aaron1728
    Member

    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/
    November 1, 2013 at 10:16 am #70313
    nutsandbolts
    Member

    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+

    November 8, 2013 at 1:19 pm #71744
    aaron1728
    Member

    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

    November 12, 2013 at 10:00 pm #72626
    aaron1728
    Member

    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.

    November 12, 2013 at 10:54 pm #72633
    nutsandbolts
    Member

    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+

    November 12, 2013 at 11:21 pm #72636
    aaron1728
    Member

    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

    November 12, 2013 at 11:22 pm #72638
    nutsandbolts
    Member

    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+

    November 12, 2013 at 11:37 pm #72642
    aaron1728
    Member

    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%;
    }
    November 13, 2013 at 12:00 am #72646
    aaron1728
    Member

    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' );
    February 18, 2015 at 6:06 am #141184
    munguti
    Member

    How do you manage to achieve it Aaron?

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble