Multiple navbars

wizardry · October 2, 2014

Hiya everyone,
Is it possible to use multiple navbars on a site? In other words, use a particualr navbar for 1 set of pages but use a different one for a different set?

I tried using the css code to hide my original navbar so i could enter a different one but that particular css removes all navbars from the page. This is the code i used.

.sm-page-widget-nav {
  display: none;
}

Thanks.

Hikin' Mike · October 2, 2014

If you want to hide your nav on just one page, you need the node number. Look at the source code (Cltrl+U) and find the <bod> tag:

<body class="sm-user-portfolio sm-page sm-page-node sm-page-node-[COLOR=Red]Cz3F3[/COLOR] sm-page-home">

The number in red is that page's number. If you want to hide that page (your home page) you want something like this:

.sm-page-node-Cz3F3 .sm-page-widget-nav {
    display: none;
    }

Allen · October 2, 2014

Find the widget number of each navbar. Then you can hide/show what you want where.
I use inspect element in WebDev or Firebug.

<div id="sm-page-widget-97cvNPDr" class="sm-page-widget sm-page-widget-nav sm-page-widget-375144" data-typeid="375144">

I have two navbars in my header on every page and each has a different widget number.

Add the 2 site wide in the header then on each page use the sm-page-node-_____ to hide one of them.
or hide both everywhere after adding site wide and show specific one on pages wanted.

wizardry · October 2, 2014

Guys,
Thanks for the info. Perhaps you can dumb it down some..lol...I just use the site wide navbar normally but now i want to use a different one for a specific set of pages. I tried Allans method but there are lots of entries that you listed (<div id="sm-page-widget) , so I'm not sure what specifically has to be done. I am not a coding guy at all so anything you can provide to make it easier would be a huge help. If need be i can provide a link to the specific page that I want to have a different navbar on. Thanks as always for your help!

Hikin' Mike · October 2, 2014

wizardry wrote: »

Guys,
Thanks for the info. Perhaps you can dumb it down some..lol...I just use the site wide navbar normally but now i want to use a different one for a specific set of pages. I tried Allans method but there are lots of entries that you listed (<div id="sm-page-widget) , so I'm not sure what specifically has to be done. I am not a coding guy at all so anything you can provide to make it easier would be a huge help. If need be i can provide a link to the specific page that I want to have a different navbar on. Thanks as always for your help!

That would be helpful.

Allen · October 2, 2014

This is the widget class name of your current site wide menu.
<div id="sm-page-widget-DMZMjhMB" class="sm-page-widget sm-page-widget-nav sm-page-widget-2419789" data-typeid="2419789">
.sm-page-widget-2419789

As an example using your About page.
This is the class name of your about page. Look for the <body ...> towards the top of the page source.
<body id="yui_3_8_0_1_1412258044652_167" style="" class="sm-user-portfolio sm-page sm-page-node sm-page-node-xpdCP sm-page-initialized">

Using CSS you can hide that site wide menu for this specific page, here for About page.
.sm-page-node-xpdCP .sm-page-widget-2419789 {display:none}

If you add a 2nd site wide menu just below your current menu. i.e. .sm-page-widget-'new name'
Then in CSS you'd hide it everywhere.
.sm-page-widget-'new name' {display: none} << placed in "entire site" CSS

Then turn the new menu back on for specific pages. Using About for example.

.sm-page-node-xpdCP .sm-page-widget-2419789 {display:none} << site wide menu hide this page
.sm-page-node-xpdCP .sm-page-widget-'new name' {display:block} << show new this page

Smugmug forces us to address every page specifically, so every page wanting this menu change has
to be addressed with this CSS. I change my banner on every page for my bird category/folder
(1000's of galleries, sub-folders, pages). See http://www.dgrin.com/showthread.php?t=239444

Allen · October 2, 2014

We can help you with every step.
On your home page add a basic menu just below your site wide menu. Reply back here.
We'll get the new menu widget number.
Then add this to your "entire site" CSS. The new menu widget number will be used in this.
.sm-page-widget-'new name' {display: none} << placed in "entire site" CSS

Then it's just a matter of you providing a link for each specific page you want the menu change and we'll show you the new CSS.

wizardry · October 2, 2014

I think I got it. Thanks so much you guys. I wish they had some kind of donate button for everyone who helps on here that doesn't get paid to do so

wizardry · October 2, 2014

OK...apparently i'm still having issues....i can't seem to figure out the widget number for this page...i thought it was 2419790 but when i try putting that on the gallery page it doesn't seem to work...i have already removed the initial menu from the gallery page so i know i have the correct node...any idea of what I am doing wrong?

http://www.scapeshots.com/Cheyenne-Wedding

Allen · October 2, 2014

Try this.
<body id="yui_3_8_0_1_1412291345424_348" style="" class="sm-user-portfolio sm-page sm-page-node sm-page-node-6crXd sm-page-initialized">

wizardry · October 2, 2014

OK i'm confused now...i could follow where to put the css for the menus to show and block them for various pages...but where do i put the above code you typed? I was hoping just to figure out the widget number for that page and do it that way...but if not...i can try this new mehtod as well...just need to know how to implement it...thx

BTW I'm looking for the navbar widget number that is on this page:
http://www.scapeshots.com/Cheyenne-Wedding

Allen · October 2, 2014

Because of the use of the actual page class name you can put all this menu CSS in "entire site" CSS.

.sm-page-node-6crXd .sm-page-widget-2419789 {} << homepage menu - default entire site?

.sm-page-node-6crXd .sm-page-widget-8198909 {} << Cheyenne-Wedding page menu

Hide default menu on multiple pages.
.sm-page-node-6crXd .sm-page-widget-2419789,
.sm-page-node-(another page) .sm-page-widget-2419789,
.sm-page-node-(another page) .sm-page-widget-2419789 {display:none}

Show new menu on multiple pages.
.sm-page-node-6crXd .sm-page-widget-8198909,
.sm-page-node-(another page) .sm-page-widget-8198909,
.sm-page-node-(another page) .sm-page-widget-8198909 {display:block}

Last line does not get a comma.

wizardry · October 2, 2014

I think i'm still doing something wrong...perhaps its because i want to use a navbar that is used on a "Page" to also be display on a particular "Gallery". So this is in detail what I am trying to do:

Take the navbar on this page:
http://www.scapeshots.com/Cheyenne-Wedding

And make it the navbar on this gallery page:
http://www.scapeshots.com/Cheyenne/

Sorry for being a pain about this...just trying to make it work...as always you're help is highly appreciated!!!

Allen · October 2, 2014

Here's the body tag for the Cheyenne gallery.
<body style="" id="yui_3_8_0_1_1412297761064_201" class="sm-user-portfolio sm-user-loggedin sm-page sm-page-node
sm-page-node-3knWb sm-page-gallery sm-page-gallery-album sm-page-initialized">

Every "page" whether a folder, page or gallery has a unique .sm-page-node-XXXXXX

Remove default site wide menu
.sm-page-node-3knWb .sm-page-widget-2419789 {display:none}

Add new menu. 8198909 is the one now on Cheyenne-Wedding.
.sm-page-node-3knWb .sm-page-widget-8198909 {display:block}

wizardry · October 2, 2014

That is the exact piece of code i put in my CSS on the top line:
.sm-page-node-3knWb .sm-page-widget-2419789 {display:none}
.sm-page-node-3knWb .sm-page-widget-8198909 {display:block}

And it still doesn't work..that's why i'm confused...

Allen · October 3, 2014

I can get the default menu to show by changing none to display but for some reason the new one won't show.
Tried many things but nothing worked.

Edit: did you add another to the gallery? I see one now.
Edit2: looks like you got it to work. What did you figure out?

wizardry · October 5, 2014

I just added a new menu. It's not the best way of doing things but it got the job done. I guess anytime i do a new page i'll have to add new menus

Thanks for following up Allen!

Multiple navbars

Comments