Conditional Hidden

gatoruss

Is it possible to have an menu item that is hidden when I am not logged in - so that visitors wouldn't see it or be able to click on it, But if I was logged in, I could see it and click on it?

Allen

Put this in "entire site" CSS. Replace the XXXXXXX with the widget number.

.sm-page-widget-XXXXXXX {display:none}
.sm-user-loggedin.sm-user-owner .sm-page-widget-XXXXXXX {display:block}

In this post explains how to get widget number using "Inspect Element".
http://www.dgrin.com/showpost.php?p=2009781&postcount=16

gatoruss

Allen wrote: »

Put this in "entire site" CSS. Replace the XXXXXXX with the widget number.

.sm-page-widget-XXXXXXX {display:none}
.sm-user-loggedin.sm-user-owner .sm-page-widget-XXXXXXX {display:block}

In this post explains how to get widget number using "Inspect Element".
http://www.dgrin.com/showpost.php?p=2009781&postcount=16

Thank you, Allen.

I assume that I am looking for the widget number of the menu item that I want hidden when not logged in, correct?

Richard

Are those widget numbers stable or do they change when SM updates things?

Allen

Widget numbers are unique. Every widget has a different number.

gatoruss

Allen wrote: »

Put this in "entire site" CSS. Replace the XXXXXXX with the widget number.

.sm-page-widget-XXXXXXX {display:none}
.sm-user-loggedin.sm-user-owner .sm-page-widget-XXXXXXX {display:block}

In this post explains how to get widget number using "Inspect Element".
http://www.dgrin.com/showpost.php?p=2009781&postcount=16

I added a menu item (for testing purposes called "Test Link"). But when I use the "inspector Element," the new menu item ("Test Link") is not assigned a class with ".sm-page-widget_XXXXXXX." Instead, it is contained in a <a> that is nested in a <li> (see bolded red text in code snippet below). The parent element with a ".sm-page-widget_XXXXXXX" class is the entire navigation block containing all the menu items (see bolded blue text in code snippet below).

In order to do what I have in mind, do I need to create a custom nav block with custom html and custom css?

[B][COLOR=Blue]<div id="sm-page-widget-WfWmNfmP" class="sm-page-widget sm-page-widget-nav sm-page-widget-12334915" data-typeid="12334915">[/COLOR][/B]<div class="sm-page-widget-content">
<div class="sm-page-widget-header"></div>

<div id="sm-page-widget-LNTj9zcB" class="sm-page-widget-body">
<div class="sm-page-widget-nav-popover  sm-page-widget-nav-vertical sm-page-widget-nav-color-default  sm-page-widget-nav-l sm-page-widget-nav-left  sm-page-widget-nav-toplinks-lowercase  sm-page-widget-nav-sublinks-regular  sm-page-widget-nav-sublinks-separator">
<ul class="vertical">
<li class="sm-page-widget-nav-toplink sm-page-widget-nav-activepage">

<li class="sm-page-widget-nav-toplink">

<li class="sm-page-widget-nav-toplink">

[B][COLOR=Red]<li class="sm-page-widget-nav-toplink">[/COLOR][/B]
[B][COLOR=Red]<a href="http://www.google.com">Test Link</a>[/COLOR][/B]


[B][COLOR=Red]</li>[/COLOR][/B]


</ul>


</div>


</div>

Allen

gatoruss wrote: »

I added a menu item (for testing purposes called "Test Link"). But when I use the "inspector Element," the new menu item ("Test Link") is not assigned a class with ".sm-page-widget_XXXXXXX." Instead, it is contained in a <a> that is nested in a <li> (see bolded red text in code snippet below). The parent element with a ".sm-page-widget_XXXXXXX" class is the entire navigation block containing all the menu items (see bolded blue text in code snippet below).

In order to do what I have in mind, do I need to create a custom nav block with custom html and custom css?

[B][COLOR=Blue]<div id="sm-page-widget-WfWmNfmP" class="sm-page-widget sm-page-widget-nav sm-page-widget-12334915" data-typeid="12334915">[/COLOR][/B]<div class="sm-page-widget-content">
<div class="sm-page-widget-header"></div>

<div id="sm-page-widget-LNTj9zcB" class="sm-page-widget-body">
<div class="sm-page-widget-nav-popover  sm-page-widget-nav-vertical sm-page-widget-nav-color-default  sm-page-widget-nav-l sm-page-widget-nav-left  sm-page-widget-nav-toplinks-lowercase  sm-page-widget-nav-sublinks-regular  sm-page-widget-nav-sublinks-separator">
<ul class="vertical">
<li class="sm-page-widget-nav-toplink sm-page-widget-nav-activepage">
<li class="sm-page-widget-nav-toplink">
<li class="sm-page-widget-nav-toplink">
[B][COLOR=Red]<li class="sm-page-widget-nav-toplink">[/COLOR][/B]
[B][COLOR=Red]<a href="http://www.google.com">Test Link</a>[/COLOR][/B]
[B][COLOR=Red]</li>[/COLOR][/B]
</ul>
</div>
</div>

There's always a way Maybe some version of this?

.sm-page-widget-12334915 .sm-page-widget-nav-toplink li:nth-child(4) {display:none}

.sm-user-loggedin.sm-user-owner .sm-page-widget-12334915 .sm-page-widget-nav-toplink li:nth-child(4) {display:block}

EDIT: If you are in sandbox and have not went public you can not test this because you can not see a logged out version.

gatoruss

Allen wrote: »

There's always a way Maybe some version of this?

.sm-page-widget-12334915 .sm-page-widget-nav-toplink li:nth-child(4) {display:none}

.sm-user-loggedin.sm-user-owner .sm-page-widget-12334915 .sm-page-widget-nav-toplink li:nth-child(4) {display:block}

EDIT: If you are in sandbox and have not went public you can not test this because you can not see a logged out version.

I figured out a way! clap

From the "Add Content" section of the fly-out in Customize Mode, I created a "one item" nav block and then I dragged that to the existing nav block and it allowed me to add it to the existing nav block (prompting me with arrows to add it "above," "right," "below" or "left"). I added it below and it looks like just another item in the existing nav block. But since it is its own widget, it has a ".sm-page-widget_XXXXXXX" class and can be separately styled.

Works just as I had hoped!

Thanks for helping me think this thru.

BTW - Not sure what the "sandbox" is?

Allen

gatoruss wrote: »

...
BTW - Not sure what the "sandbox" is?

Have you converted your site to the NewSmug? In the transition period between OldSmug (Legacy) and
NewSmug, before the NewSmug site is Publish the site is in "sandbox".

Allen

gatoruss wrote: »

...

I see the "Test Link" on your site. Did you not add the CSS to hide it?

gatoruss

Allen wrote: »

Have you converted your site to the NewSmug? In the transition period between OldSmug (Legacy) and
NewSmug, before the NewSmug site is Publish the site is in "sandbox".

I didn't have an active "OldSmug." At one time I had had one, but it lapsed years ago. I recently signed up for a new account. So, although my dgrin membership dates back a few years, SmugMug treats me as a new user.

Allen wrote: »

I see the "Test Link" on your site. Did you not add the CSS to hide it?

The "Test Link" that was showing on my site (I just removed it) is the first one that I added to my existing nav block -- the one that I was having trouble applying CSS to independently of the rest of the menu items in that nav block. When I added the new, one item nav block that I dragged into the existing nav block (as described in my prior post), I created a new "Test Link" and applied to it the CSS to hide it. I had forgotten to remove the original "Test Link."

gatoruss

Allen wrote: »

There's always a way Maybe some version of this?

.sm-page-widget-12334915 .sm-page-widget-nav-toplink li:nth-child(4) {display:none}

.sm-user-loggedin.sm-user-owner .sm-page-widget-12334915 .sm-page-widget-nav-toplink li:nth-child(4) {display:block}

EDIT: If you are in sandbox and have not went public you can not test this because you can not see a logged out version.

I tried your language as well. It didn't work as written, but the following does work:

.sm-page-widget-12334915 [COLOR=Red][B][I]li:nth-child(4).sm-page-widget-nav-toplink[/I][/B][/COLOR]  {display:none}

.sm-user-loggedin.sm-user-owner .sm-page-widget-12334915 [I][B][COLOR=Red]li:nth-child(4).sm-page-widget-nav-toplink[/COLOR][/B][/I] {display:block}

I guess this is because the <li> element isn't a "child" of an element with a class of ".sm-page-widget-nav-toplink", but has a class of ".sm-page-widget-nav-toplink".

EDIT: Probably don't need ".sm-page'widget-nav-toplink", as "sm-page-widget-12334915" only contains 1 set of <li> elements (all of which have the "sm-page'widget-nav-toplink" class). I will test that tonite.