How to have different navbars display on different pages

**kasey** · 03-10-2011, 12:30 AM

I think this is probably a Wordpress question, not a Catalyst or Dynamik question ...

I'm building out a membership site for a client. Simplistically, there are two "sections" to the site -- the section where non-members can view material, and the section for members-only. Each section needs to have it's own primary navbar that has links to different pages.

For instance, in the non-members section, the primary navbar needs to have links to pages such as "Join Now," "Meet the Experts," "Free Resources," etc.

Then, in the members-only section, the primary navbar needs to link to different pages such as "Blog," "Your Resources," "Members-Only Services," etc.

Does anyone know how to create two different navbars like this and have them display on different pages?

**eric** · 03-10-2011, 04:19 PM

Hey Kasey,

I went ahead and created a video tutorial and the following CSS code snippets to show you how to do this.

You can Check Out The Video Tutorial Here:
http://vimeo.com/20892937

********
CSS Code To Accompany The Video Tutorial
********

This CSS will style ALL of your Custom Menus in the Default Catalyst Styling:

Code:

.widget_nav_menu {
	background: #F6F6F6;
	border-top: 1px solid #E8E8E8;
	border-bottom: 1px solid #E8E8E8;
	height: 32px;
	margin: 0 auto;
	padding: 0;
	color: #333333 !important;
	font-size: 12px;
	line-height: 1em;
	float: none;
}
.widget_nav_menu ul {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
}
.widget_nav_menu li {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
}
.widget_nav_menu li a, .widget_nav_menu li a:link, .widget_nav_menu li a:visited {
	background: #F6F6F6;
	border-right: 1px solid #E8E8E8;
	margin: 0;
	padding: 10px 15px;
	color: #333333 !important;
	text-decoration: none !important;
	display: block;
}
.widget_nav_menu li a:hover, .widget_nav_menu li a:active {
	background: #FFFFFF;
	color: #333333 !important;
	text-decoration: none !important;
}
.widget_nav_menu li li a, .widget_nav_menu li li a:link, .widget_nav_menu li li a:visited {
	background: #F6F6F6;
	width: 150px;
	border-top: 0 solid #E8E8E8;
	border-right: 1px solid #E8E8E8;
	border-bottom: 1px solid #E8E8E8;
	border-left: 1px solid #E8E8E8;
	margin: 0;
	padding: 10px 10px;
	color: #333333 !important;
	text-decoration: none !important;
	float: none;
}
.widget_nav_menu li li a:hover, .widget_nav_menu li li a:active {
	background: #FFFFFF;
	color: #333333 !important;
	text-decoration: none !important;
}
.widget_nav_menu ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.widget_nav_menu li ul {
	width: 150px;
	height: auto;
	margin: 0;
	padding: 0;
	z-index: 9999;
	left: -999em;
	position: absolute;
}
.widget_nav_menu li ul ul {
	margin: -33px 0 0 171px;
}
.widget_nav_menu li:hover ul ul, .widget_nav_menu li:hover ul ul ul {
	left: -999em;
}
.widget_nav_menu li:hover ul, .widget_nav_menu li li:hover ul, .widget_nav_menu li li li:hover ul {
	left: auto;
}
.widget_nav_menu li.current-menu-item a {
	background: #FFFFFF;
	color: #333333 !important;
	text-decoration: none !important;
}

This CSS is the same as above, but with no values so you can add your own custom styling if you want to start with a clean slate:

Code:

.widget_nav_menu {

}
.widget_nav_menu ul {

}
.widget_nav_menu li {

}
.widget_nav_menu li a, .widget_nav_menu li a:link, .widget_nav_menu li a:visited {

}
.widget_nav_menu li a:hover, .widget_nav_menu li a:active {

}
.widget_nav_menu li li a, .widget_nav_menu li li a:link, .widget_nav_menu li li a:visited {

}
.widget_nav_menu li li a:hover, .widget_nav_menu li li a:active {

}
.widget_nav_menu ul li {

}
.widget_nav_menu li ul {

}
.widget_nav_menu li ul ul {

}
.widget_nav_menu li:hover ul ul, .widget_nav_menu li:hover ul ul ul {

}
.widget_nav_menu li:hover ul, .widget_nav_menu li li:hover ul, .widget_nav_menu li li li:hover ul {

}
.widget_nav_menu li.current-menu-item a {

}

This CSS is what you will want to use if you need to focus your styling on a specific Custom Menu. As you can see with this particular example, this will style a Custom Menu with an ID of #nav_menu-1. The 1 is the ID, so just change this to the Custom Menu ID that you're working on and it should style ONLY that Custom Menu. You can use Firebug to determine the actual number:

Code:

#nav_menu-1 {
	background: #F6F6F6;
	border-top: 1px solid #E8E8E8;
	border-bottom: 1px solid #E8E8E8;
	height: 32px;
	margin: 0 auto;
	padding: 0;
	color: #333333 !important;
	font-size: 12px;
	line-height: 1em;
	float: none;
}
#nav_menu-1 ul {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
}
#nav_menu-1 li {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
}
#nav_menu-1 li a, #nav_menu-1 li a:link, #nav_menu-1 li a:visited {
	background: #F6F6F6;
	border-right: 1px solid #E8E8E8;
	margin: 0;
	padding: 10px 15px;
	color: #333333 !important;
	text-decoration: none !important;
	display: block;
}
#nav_menu-1 li a:hover, #nav_menu-1 li a:active {
	background: #FFFFFF;
	color: #333333 !important;
	text-decoration: none !important;
}
#nav_menu-1 li li a, #nav_menu-1 li li a:link, #nav_menu-1 li li a:visited {
	background: #F6F6F6;
	width: 150px;
	border-top: 0 solid #E8E8E8;
	border-right: 1px solid #E8E8E8;
	border-bottom: 1px solid #E8E8E8;
	border-left: 1px solid #E8E8E8;
	margin: 0;
	padding: 10px 10px;
	color: #333333 !important;
	text-decoration: none !important;
	float: none;
}
#nav_menu-1 li li a:hover, #nav_menu-1 li li a:active {
	background: #FFFFFF;
	color: #333333 !important;
	text-decoration: none !important;
}
#nav_menu-1 ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#nav_menu-1 li ul {
	width: 150px;
	height: auto;
	margin: 0;
	padding: 0;
	z-index: 9999;
	left: -999em;
	position: absolute;
}
#nav_menu-1 li ul ul {
	margin: -33px 0 0 171px;
}
#nav_menu-1 li:hover ul ul, #nav_menu-1 li:hover ul ul ul {
	left: -999em;
}
#nav_menu-1 li:hover ul, #nav_menu-1 li li:hover ul, #nav_menu-1 li li li:hover ul {
	left: auto;
}
#nav_menu-1 li.current-menu-item a {
	background: #FFFFFF;
	color: #333333 !important;
	text-decoration: none !important;
}

And here is a "clean slate" version of the ID specific CSS:

Code:

#nav_menu-1 {

}
#nav_menu-1 ul {

}
#nav_menu-1 li {

}
#nav_menu-1 li a, #nav_menu-1 li a:link, #nav_menu-1 li a:visited {

}
#nav_menu-1 li a:hover, #nav_menu-1 li a:active {

}
#nav_menu-1 li li a, #nav_menu-1 li li a:link, #nav_menu-1 li li a:visited {

}
#nav_menu-1 li li a:hover, #nav_menu-1 li li a:active {

}
#nav_menu-1 ul li {

}
#nav_menu-1 li ul {

}
#nav_menu-1 li ul ul {

}
#nav_menu-1 li:hover ul ul, #nav_menu-1 li:hover ul ul ul {

}
#nav_menu-1 li:hover ul, #nav_menu-1 li li:hover ul, #nav_menu-1 li li li:hover ul {

}
#nav_menu-1 li.current-menu-item a {

}

**UPDATE**

With the above CSS your Custom Navbar may not fill the entire width of the area you add it to.

If this is the case you can just add a Width to it by either doing a width: 100%; or a width: 960px (or whatever the width of that area is).

You would add this Width style to either the .widget_nav_menu class or the #nav_menu-1 ID like so:

Code:

.widget_nav_menu {
	width: 100%;
}

or

Code:

#nav_menu-1 {
	width: 100%;
}

**UPDATE #2**

The following CSS should give you a solid starting point for styling a WP Custom Menu Widget when added to a Widget Area in Appearance > Widgets.

This particular snippet of CSS is specifically suited for a stock 280px width Sidebar 1, so if you add it to a widget area with a different width then you'll need to adjust accordingly. Also note that this will style ALL of your Custom Menu Widgets so if you only want to style a particular one you'll have to specify the specific Custom Menu ID as mentioned above.

Code:

.widget_nav_menu {
	background: #F6F6F6;
	border-top: 1px solid #E8E8E8;
	border-bottom: 1px solid #E8E8E8;
	height: 32px;
	margin: 0 auto;
	padding: 0;
	color: #333333 !important;
	font-size: 12px;
	line-height: 1em;
	float: none;
}
.widget_nav_menu ul {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
}
.widget_nav_menu li {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
}
.widget_nav_menu li a, .widget_nav_menu li a:link, .widget_nav_menu li a:visited {
	background: #F6F6F6;
	border-bottom: 1px solid #E8E8E8;
	margin: 0;
	padding: 10px 15px;
	color: #333333 !important;
	text-decoration: none !important;
	display: block;
}
.widget_nav_menu li a:hover, .widget_nav_menu li a:active {
	background: #FFFFFF;
	color: #333333 !important;
	text-decoration: none !important;
}
.widget_nav_menu li li a, .widget_nav_menu li li a:link, .widget_nav_menu li li a:visited {
	background: #F6F6F6;
	width: 230px;
	border-top: 0px solid #E8E8E8;
	border-right: 0px solid #E8E8E8;
	border-bottom: 0px solid #E8E8E8;
	border-left: 0px solid #E8E8E8;
	margin: 0;
	padding: 10px 25px;
	color: #333333 !important;
	text-decoration: none !important;
	float: none;
}
.widget_nav_menu li li a:hover, .widget_nav_menu li li a:active {
	background: #FFFFFF;
	color: #333333 !important;
	text-decoration: none !important;
}
#sidebar-1 .widget_nav_menu ul, #sidebar-2 .widget_nav_menu ul, #ez-home-sidebar-1 .widget_nav_menu ul {
	border-top: 1px solid #E8E8E8;
	padding: 0;
}
#sidebar-1 .widget_nav_menu ul li, #sidebar-2 .widget_nav_menu ul li, #ez-home-sidebar-1 .widget_nav_menu ul li {
	width: 280px;
	margin: 0;
	padding: 0;
	list-style: none;
	clear: both;
}
#sidebar-1 .widget_nav_menu ul ul, #sidebar-2 .widget_nav_menu ul ul, #ez-home-sidebar-1 .widget_nav_menu ul ul {
	border-top: 0;
	margin-top: -1px;
	padding: 0;
}
.widget_nav_menu li ul {
	border-bottom: 1px solid #E8E8E8;
	width: 280px;
	height: auto;
	margin: 0;
	padding: 0;
	z-index: 9999;
	left: -999em;
	position: absolute;
}
.widget_nav_menu li ul ul {
	margin: -33px 0 0 171px;
}
.widget_nav_menu li:hover ul ul, .widget_nav_menu li:hover ul ul ul {
	left: -999em;
}
.widget_nav_menu li:hover ul, .widget_nav_menu li li:hover ul, .widget_nav_menu li li li:hover ul {
	left: auto;
}
.widget_nav_menu li.current-menu-item a {
	background: #FFFFFF;
	color: #333333 !important;
	text-decoration: none !important;
}

Enjoy!

Eric

**kasey** · 03-10-2011, 04:50 PM

Eric,

Simply brilliant! Loved the video and thank you for creating it! And, it's the exact answer to my question. My client is going to be wowed beyond Wow that this is possible! I hope you plan on adding this to the Catalyst video resource page because it's fantastic and really demonstrates the superior flexibility of Catalyst.

You and the rest of the Catalyst team have really put a lot of thought into Catalyst, and I haven't found anything, yet, that I've tried to do with it that it can't do. This has to be the best Wordpress theme framework I've ever used. Stellar work. Seriously stellar work!

**eric** · 03-10-2011, 05:02 PM

Thanks Kasey, for the kind words (I hope you don't mind, I tweeted the last sentence...I couldn't help myself

).

Eric

**kasey** · 03-10-2011, 05:48 PM

Not at all, Eric.

Tweet away to your heart's content! I'm happy to be quotable, and every word I said was true.

**catalyst_convert** · 03-10-2011, 07:38 PM

That is just great. Thanks very much for setting this out so clearly.

**catalyst_convert** · 03-11-2011, 06:12 PM

I have implemented this on a site and it works great! In combination with different header images, I can very easily silo my content. Great flexibility.

My only concern is that the background bar for the navigation does not stretch across the page - it only provides background underneath the nav links. As I only have three short ones it only appears towards the left of the page. Is there a quick fix that I could add to the custom CSS above? (I am using Impression in dynamic).

Thanks

**eric** · 03-11-2011, 06:27 PM

Could you provide a link to the page in question?

Thanks,

Eric

**catalyst_convert** · 03-11-2011, 07:06 PM

http://www.awiderview.com/travel-pillow-buying-guide/

**eric** · 03-11-2011, 07:22 PM

Try adding a width of 880px to your widget-nav-menu class. So it would look like this (but with the rest of your widget-nav-menu styles, of course):

Code:

.widget_nav_menu {
	width: 880px;
}

Eric

Thread: How to have different navbars display on different pages

Thread Tools

Display

How to have different navbars display on different pages

How To Create, Display and Style Different Navbars on Different Pages

Posting Permissions