Pinning menu and related questions

Richard · September 21, 2015

I want to pin my horizontal menu, and in fact did so at one point but I'm unable to recreate it. The pinning option on All Site offers only pinning the header. I can't figure out how to create a header from the customize panel and put the menu into it. Is it somewhere else?

Next question: assuming I manage to get the menu pinned, I want to make its background opaque, not transparent. I'm guessing that it would only take a single line of CSS, but I haven't been able to figure it out.

Final question: Are there any recommendations for learning CSS in general and using browser developer tools to reverse engineer a page and make the kind of CSS tweaks I need here?

Edit: I seem to have managed to pin the menu site-wide. Don't ask me how I did it, because I really don't know. I had a site-wide menu which scrolled. I then set the homepage to independent (which is the only way I could see a header section), dragged a new menu widget into it and pinned the header. It didn't seem to behave right, so I set independent homepage to off and deleted the menu I had put in the header. Now things are back to the way they were, except the menu is pinned, which is what I wanted. None of this makes any sense at all to me. It makes me nervous to think that I might be relying on a bug, not a feature. :scratch :dunno

Anyway, I still need to make the menu background non-transparent, but I can't figure out what its widget name is. :bash

Cygnus Studios · September 21, 2015

Go into customize, site-wide, theme, advanced. The ability to make sections transparent are in there.

Richard · September 21, 2015

Thanks, Steve. I think I've got it working now with a couple of CSS tweaks, but I suspect whatever I did is fragile, at least the pinning part. As I thought, changing the background of the menu was trivial once you figure out that it's not called "menu" but ".sm-page-widget-nav-horizontal"

. I don't have a header at the moment, only a site-wide menu. I don't see an option to create a header unless I set the homepage to be independent, and I don't have a clue as to what the implications of that might be. Since I've never seen an option to explicitly pin the menu, I'm not sure what's keeping mine pinned. Which makes me uneasy. It also seems to be a little flakey--it sometimes doesn't stay in place the first time the display scrolls, but then pops into place and stays there on subsequent scrolls. In addition, CSS changes to the menu don't show in the preview at all, but do take effect after you apply the change. I'm hoping that the preview in the live site works better than the one in the sand pile.

Cygnus Studios · September 21, 2015

Definitely some odd non-obvious css names with the new smugmug.

What I found to be easiest was plug in the various blocks first, then tweak with css. There is a lot of customization that can happen before you begin adding code (which I feel is a vast improvement), it just takes some time to figure out how it all meshes together.

Richard · September 21, 2015

I'm all for avoiding code whenever possible. I just couldn't find a site wide header block. This is what my customize screen looks like at the moment:

There doesn't seem to be an option to add a header block. There's also no option to pin the menu in the layout panel. I suspect that somehow my menu is being treated as a header (which I set to be pinned). But I don't know why.

denisegoldberg · September 21, 2015

Richard wrote: »

I'm all for avoiding code whenever possible. I just couldn't find a site wide header block. This is what my customize screen looks like at the moment:

There doesn't seem to be an option to add a header block. There's also no option to pin the menu in the layout panel. I suspect that somehow my menu is being treated as a header (which I set to be pinned). But I don't know why.

I just did some experimenting on my site - I went into customization, selected entire site, then dragged another content block below the two blocks I have in my header. When I hovered over the new content block it said it was in entire site (but I didn't save....).

I think if you select entire site, anything you drag to the area above the box that says "SITE CONTENT" will be placed in the header, and anything you drag to the area below that box will be in the footer. (I could be wrong about that, but that's the only thing that makes sense to me.)

--- Denise

Cygnus Studios · September 21, 2015

My header is a "logo" block pulled into the entire site.

David_S85 · September 21, 2015

Richard, I pinned my SM header for my site using "Entire Site;" no code necessary.

Richard · September 22, 2015

Thanks all. I did some further experiments and figured out that a menu alone on whole site (with SM header off) will be pinned as a header in the layout panel, but is not affected by the header opacity setting in advanced theme. That slider has no effect and returns to zero after you save it at something else. The opacity setting does work if you turn the SM header on. Interestingly, after putting the SM header on and adding a text box above the menu, the text did not stay pinned while the menu did. Not sure if that's by design or just an artifact of the order in which I did things, but I think the end result could be tweaked to give The New Yorker effect I had asked about in another thread. I think for now, I'm just going to skip the SM header and use CSS for menu opacity. It's close enough for rock 'n' roll and I think it's time to just get it published so I can go back to doing photography again

. I can always tweak it later. Onward!

Pinning menu and related questions

Comments