Diff Nav on home page

brandofamily · August 12, 2013

How can I EASILY have one nav bar on my homepage and a different one on the rest of the site?

In OLD SM I could hide the div then make it visible on homepage only... how do I do this in NEW SM?

Allen · August 12, 2013

brandofamily wrote: »

How can I EASILY have one nav bar on my homepage and a different one on the rest of the site?

In OLD SM I could hide the div then make it visible on homepage only... how do I do this in NEW SM?

Each nav should have an ID. Homepage has a class name. I been looking in the page source to find the nav id's but seems to change on every page. I'll keep looking.

brandofamily · August 12, 2013

Allen wrote: »

Each nav should have an ID. Homepage has a class name. I been looking in the page source to find the nav id's but seems to change on every page. I'll keep looking.

I tried

/*Different Nav Bar For Homepage*/
.sm-page-widget-nav {
  display: none;
}

.sm-user-ui .sm-page-home .sm-page-widget-nav {
  display: block;
}

That will hide the one on all but the home page, but I have not worked it out further.
The hompage nav will be very simple, but the other nav will be quite detailed and I do not want to have to produce it multiple time.
The code I came up with will hide and all site wide navs except for the homepage.
I hoped to put 2 on the site, then hide the more complicated one on the homepage. Unfortunately the code I came up with hides both site wide them shows both on homepage.

Allen · August 12, 2013

I see it this way, I added site wide a nav, actually two, and every page I look at the nav has different ID's on it.
This makes no sense, you'd think something created once and shown site wide would have the same ID everywhere.

brandofamily · August 12, 2013

Allen wrote: »

I see it this way, I added site wide a nav, actually two, and every page I look at the nav has different ID's on it.
This makes no sense, you'd think something created once and shown site wide would have the same ID everywhere.

Even 2 on the homepage show have different div or class names.

Allen · August 13, 2013

brandofamily wrote: »

Even 2 on the homepage show have different div or class names.

Yes they do and I can with WebDev hide both or one a time. Trouble is they have different ID's on every page.

brandofamily · August 13, 2013

Allen wrote: »

Yes they do and I can with WebDev hide both or one a time. Trouble is they have different ID's on every page.

Well if you can give me the way to determine the names of each I can hide Nav #1 only one the home page, hide Nav #2 site wide, then use code to display Nav #2 on only the home page.

Allen · August 13, 2013

Look at the page source for your homepage for the <body ...... you might be able
to use the yellow. Seems each page has a different one of these.

<body class="sm-user-pro sm-user-loggedin sm-user-owner sm-page sm-page-node sm-page-node-zsB4B sm-page-home">

Then way down for the menu ID's and names.
You also could right click the menu to view the element.

brandofamily · August 13, 2013

Allen wrote: »

Look at the page source for your homepage for the <body ...... you might be able
to use the yellow. Seems each page has a different one of these.

<body class="sm-user-pro sm-user-loggedin sm-user-owner sm-page sm-page-node sm-page-node-zsB4B sm-page-home">

Then way down for the menu ID's and names.
You also could right click the menu to view the element.

I thought I had a break thru, but the code changes every time you load the page.

aschendel · August 13, 2013

Ideally we should be able to set the ID and Classes for anything we drag onto our pages... in the meantime, can you restate what the primary problem is and how far you got towards solving it? I assume you don't want to have an independent homepage, and I assume you are using 2 of the Menu content blocks, right? Are you adding both to the Entire Site or do you have 1 on the Entire Site and the extra 1 on the Home Page?

Thanks,

Andy

brandofamily · August 13, 2013

aschendel wrote: »

Ideally we should be able to set the ID and Classes for anything we drag onto our pages... in the meantime, can you restate what the primary problem is and how far you got towards solving it? I assume you don't want to have an independent homepage, and I assume you are using 2 of the Menu content blocks, right? Are you adding both to the Entire Site or do you have 1 on the Entire Site and the extra 1 on the Home Page?

Thanks,

Andy

2 menu content blocks
I want one on homepage only
and a 2nd for the rest of the site.

I have not gotten far. I know I can add one to homepage only. I am not sure how to EASILY add the 2nd to all the other pages.

aschendel · August 13, 2013

Can you make the simpler version in an HTML block, then you could specify the class / id to be whatever you wanted...

Just as an example, I did this in an HTML block in Entire Site (right under my Menu content block, I copied the HTML generated by the 2nd Menu I was originally playing with and just removed the ID's).

<div id="simple_nav" style="text-align:center;" class="sm-page-widget-nav-popover sm-page-widget-nav-horizontal sm-page-widget-nav-color-default sm-page-widget-nav-m sm-page-widget-nav-center sm-page-widget-nav-toplinks-capitalize sm-page-widget-nav-sublinks-regular">
  <ul>
    <li class="sm-page-widget-nav-toplink yui3-u">
      <a href="http://aschendel.smugmug.com/search">Search</a>
    </li>
    <li class="sm-page-widget-nav-toplink yui3-u">
      <a class="sm-page-widget-nav-contact" href="#">Contact Me</a>
    </li>
  </ul>
</div>

** note that the Contact Me link actually doesn't work in my example, not completely sure why nor do I really care.

And then in my Theme's CSS (didn't work in the CSS of the HTML block)... The menu doesn't have a great hook, but I think the class "horizontal" might work (it did for me).

#simple_nav {
  background-color: blue;
}
.sm-page-home #simple_nav {
  background-color: red;
}

.sm-page-home horizontal {
  background-color: pink;
}

brandofamily · August 13, 2013

aschendel wrote: »

Can you make the simpler version in an HTML block, then you could specify the class / id to be whatever you wanted...

The simple homepage version is really not the problem. I can add a menu to just the home page using the NEW SM interface.

It's the 2nd menu. If I add that to the entire site, like I want to, I then have to hide it on the home page. Do such will hide all the menus on the homepage... using the code I came up with.

aschendel · August 13, 2013

I agree, and, like you, I don't see a way to target just one of the Menus given the markup that is generated by SM when using 2 Menu content blocks (via the new SM interface). So I suggested doing the simple one in HTML (for simplicity sake). Then you can set it up to be targeted on the other pages (via a class name or id of your choosing), and on the home page you can target the main one (via the "horizontal" class).

It's not ideal - there may be extra maintenance time required down the road if you change the formatting or layout of your navigation - but it should work, as demonstrated on my site (using background colors instead of display: nones).

What links do you plan to have on your simple version? I am a little concerned that my idea won't support the native Contact Me popup, but I think all other links should work ok.

Andy

brandofamily · August 13, 2013

aschendel wrote: »

I agree, and, like you, I don't see a way to target just one of the Menus given the markup that is generated by SM when using 2 Menu content blocks (via the new SM interface). So I suggested doing the simple one in HTML (for simplicity sake). Then you can set it up to be targeted on the other pages (via a class name or id of your choosing), and on the home page you can target the main one (via the "horizontal" class).

It's not ideal - there may be extra maintenance time required down the road if you change the formatting or layout of your navigation - but it should work, as demonstrated on my site (using background colors instead of display: nones).

What links do you plan to have on your simple version? I am a little concerned that my idea won't support the native Contact Me popup, but I think all other links should work ok.

Andy

OK. I have am html menu on the homepage only.
I also placed a 2nd menu using the SM interface.
Now I cannot figure out how to hide that 2nd menu on the home page. Any ideas.

aschendel · August 13, 2013

Try this (just educated-guessing though - what theme are you using?):

.sm-page-home horizontal 
{
  display: none;
}

brandofamily · August 13, 2013

aschendel wrote: »
Try this (just educated-guessing though - what theme are you using?):
.sm-page-home horizontal 
{
  display: none;
}

Sierra theme

brandofamily · August 13, 2013

aschendel wrote: »
Try this (just educated-guessing though - what theme are you using?):
.sm-page-home horizontal 
{
  display: none;
}

Got it.

./*Remove SM Nav Bar from Homepage*/
.sm-user-ui .sm-page-home .sm-page-widget-nav {
  display: none;
}

aschendel · August 13, 2013

That'll do nicely. Are you're getting close to unveiling?

a.s.

Allen · August 13, 2013

I tried to find a specific ID or class for my entire site menu and it looks like it's different on ever page.
I would think that any created site wide widget would carry a specific ID or at least a static class name.
Basically referring the a menu and banner.

I have not found a way to place a different banner for say my family folder/category and have it flow
down to all below.

brandofamily · August 13, 2013

aschendel wrote: »

That'll do nicely. Are you're getting close to unveiling?

a.s.

Not even close. I didn't get my site migrated during the 1st wave and had to get backdoored into the migration.
I just started on my site. Been doing the others 1st and learning along the way.
I did not want to start customizing pages until I got this nav thing figured out as I am not sure what will show up on the customized pages after they are taken off the regular gallery grid so to speak.
Will site wide changes show up?

aschendel · August 13, 2013

brandofamily wrote: »

Not even close. I didn't get my site migrated during the 1st wave and had to get backdoored into the migration.
I just started on my site. Been doing the others 1st and learning along the way.
I did not want to start customizing pages until I got this nav thing figured out as I am not sure what will show up on the customized pages after they are taken off the regular gallery grid so to speak.
Will site wide changes show up?

I haven't played with much more than Custom Pages, but yeah, it appears the Entire Site stuff flows down to custom pages, folders, etc... Unless you have specifically overridden the thing you are changing. The Independent Homepage setting is the only thing that really breaks out of the mold (just the homepage of course, as that's what it's made for)...

a.s.

Diff Nav on home page

Comments