Submenu Customization

yozo556 · September 15, 2014

Hi,

I'm wondering how to change the look of the submenu on the navigation menu. I would like it so that when a primary menu link is clicked, the submenus appear below the primary link and indented (not on separate tag).
Site: oftedahlphoto.com

Thanks!

herojosie · September 22, 2014

Hi,

You can change the menu layout via the site customizer. Go to to customize>customize site. Then hover over that menu content block and click the wrench icon. From there, go to the line that says 'layout style'. You should see several options there. In this case, the accordion style might be more of what you are looking for.

leftquark · October 1, 2014

I have some sub-menu customizations here: http://www.aaronmphotography.com/Customizations/Navbar/Change-Submenu-Colors
You should be able to adapt these for doing what you want.

I also use this to move my sub-menu up a bit. You could use this code to move it down as well, I think:

/* The 7px padding causes the sub-menu to not align properly. 
   Move it 7px up */
.sm-page-layout-region-left .yui3-menu-children {
  margin-top: -6px !important;
}

SmugSam · October 16, 2014

Sheesh - after spending (insert embarrassing length of time here) poking around inspecting elements trying to narrow down how to alter the flyout menu colour, I decide to look here and find Aaron's link! Thank you!

I do have a related issue though. I am trying to use a submenu on my site, but when viewed on a mobile/smallscreen device this menu:
(a.) switches to an accordion style, no matter if I have set it as vertical with flyout
(b.) takes the entire width of the screen (the menu item at left and the '+' at right), again no matter what I do with margins/percentage

Both of which make it look terrible on said device. The menu in question is on the lefthand navbar, the menu item is "More".

Any ideas out there as to how I can make the menu follow consistency with how I have set it under my customisation?? Seems arbitrary that the smallscreen version just ignores everything and does it's own thing.

(Bonus subquestion - Assuming I can get the smallscreen version to display the flyout submenu, ideally I would also like to alter the background opacity/alpha for this also, but using a colour reference format of, eg:

background: rgba(0,0,0,0.2);

seems to adopt the chosen colour, but ignore the alpha setting. Any ideas out there of what I could do?)

Sam

leftquark · October 16, 2014

For mobile displays we figure that the content won't fit with a left sidebar. You can see this if you shrink your screen size down to be something quite narrow (like 640 pixels wide). So instead we move your left menu to the top and try to make things fit better. Menu's with fly-out submenus become accordions because there's no way for a mobile device to have a mouse-over action. Mobile devices must click and with the narrow screen width the mobile version works easier in accordion style.

The following code gets added to move your menu to the top:

@media screen and (max-width: 640px)
.sm-page-layout .sm-page-layout-region, .sm-page-layout .sm-page-layout-row, .sm-page-layout .sm-page-layout-row .sm-page-layout-column {
display: block!important;
width: 100%!important;
letter-spacing: normal!important;
word-spacing: normal!important;
float: none!important;
}

You can negate all this by writing the opposite code of that and sticking it in a CSS block, however, your page doesn't really fit anymore.

I think the best option would be to customize the look/feel of the mobile version so it looks better but still functions as a mobile site. I discuss how to do that here: http://www.aaronmphotography.com/Customizations/Sitewide/Screen-Width-Customizations. I'd also be more than glad to help teach you / assist with creating the CSS code to do this.

Lastly, you use 2 menu content blocks to create your menu, one that just has "Photography". You probably don't want to do this. Use 1 menu block and then we can throw together some CSS to space it out and put the separator (in this case it would be a bottom border) where you want them.

-Aaron

SmugSam · October 16, 2014

Thanks for the super-fast response, Aaron! Really impressed. Just happened to look through the responses to recent questions on dgrin - you seem to have hit the ground running!

Last things first - the reason I used individual, single-item menu blocks was actually to get around another mobile limitation. On smaller screens any menu with more than 1 item gets lumped into a big, ugly black box with "Menu" as its title, and put in the middle of the screen. Multiple menus result in multiple big "Menu" blocks in the middle of the screen. The seperator was not the reason for my approach - I originally had 3 other menu blocks (each with one item) beneath that seperator. It may seem counter-intuitive, but it has served its purpose! The menus looked right, and behaved right(ish). But I am happy to learn a better way!

Those 3 menu items are what I am now trying to put into a submenu under a single item "More", in a nice way, to further minimalise the look of my site.

For the ideas you have suggested for this question - thank you so much. I am going to give them a go and see where I get to. I will advise if I get it right or not, back here in case others have this question.

I assumed there was probably a screen space issue that was driving forcing the menu to accordion on small screens regardless. But it then ignoring any attempts to alter margins, etc was messing things up. Some feedback for the team - if the sidebar cannot translate well to mobile screens, then it seems strange to offer SM themes with sidebars playing such a central role (I really haven't diverged from the basic theme much) or at least flag it on the site as being 'less mobile friendly' or something.

I'll let you know how my attempts work out! But thanks again.

Sam

leftquark · October 16, 2014

SmugSam wrote: »

Last things first - the reason I used individual, single-item menu blocks was actually to get around another mobile limitation. On smaller screens any menu with more than 1 item gets lumped into a big, ugly black box with "Menu" as its title, and put in the middle of the screen. Multiple menus result in multiple big "Menu" blocks in the middle of the screen.

Gotcha on the other items! In response to the big "Menu" that gets displayed. If you have the option in your menu content block for "Collapse for mobile" set to ON, then the big "MENU" button gets displayed. If you set that to "OFF" then your menu is open and does not display "MENU" when the user comes to the site. So if you wanted:
"Photography
More +"

All you have to do is set it to OFF and you're set. You can see it on my site if you view www.aaronmphotography.com from a mobile screen:
mobile_version.jpg

That's just 1 menu content block for that entire thing.

SmugSam · October 17, 2014

Sigh. Sorry, Aaron, I realised last night after I posted that that I was getting my history of changes I made mixed up. I knew that this:

leftquark wrote: »

If you set that to "OFF" then your menu is open and does not display "MENU" when the user comes to the site.

was the way it worked. That wasn't why I did the multiple menu blocks with 1 item each - I think I did it because I was originally hiding/showing menus depending on which page was being viewed. (I know - again not very elegant, but it was easier for me to figure that out than how to customise a single menu block on the go with different page views!). Anyway, I have gone to a single menu block as per your suggestion, so moving right along...

I read through your thoughts, code, etc and have managed to get this far:
- Move to a single menu block, accordion style
- Align text center, and figure out how to change the colour/opacity of the bottom border lines:

.sm-page-widget-nav .sm-page-widget-nav-accordion.sm-page-widget-nav-m .sm-accordion-item-label {
text-align: center;
border-bottom-color: rgba(222,222,222, 0.1);
}

- Figured out I could show/hide the bottom borders by adding border-bottom-style: none; to the code above
- Figured out the centring didn't work on small screens, but this would fix that:

@media only screen and (max-width: 640px) {
.sm-page-widget-nav .sm-page-widget-nav-mobile .sm-accordion>.sm-accordion-item {
text-align: center;
}

And that has just about got me to the finish line!

There are just a couple of things I haven't figured out that maybe you could point me in the right direction?

Ideally I would like a single line (like the Separator) between 'Photography' and 'Menu'. I don't want any other lines, including between submenu items. Just that one. And I would like to change how long this line is. I figured maybe this could be done by manipulating one of the border lines? As per above, I have figured out how to match colour/opacity of the theme's 'Separator' and how to turn all border lines off/on - but not at an individual item level. (This is my biggest failure with CSS - I understand the class/id theory, but actually targeting the element(s) I want I really struggle with. Seems to be a black magic I can't figure out!)
My questions:

Can I control just one border, just underneath 'Photography', to achieve this? Do you know how i can target it?
If I can turn this border on/off, can I also stop it from dimming with mouseover?
Can I alter the length of the line? I figured how to change the percentage width of the container, but I lose the centre alignment of the text.
(I would also like to control where the submenu links appear under 'More+'. I think your original answer at the top of this thread may help, so I will try with that first.)

Any thoughts?

EDIT: Quick update - I think I've sorted number 4. I've figured out how to change alignment/margins etc for the submenu.

Thanks for your help to date, and for your patience.

Sam

leftquark · October 17, 2014

We can target the nth element of an object by using the "nth-of-element(x)" command. Since the "Photography" menu item is the first element, we can use "nth-of-element(1)" on the first LI.

Try:

/* Hide the border from showing up on the entire menu */
.sm-accordion>.sm-accordion-item>.sm-accordion-item-label {
  border: 0 !important;
}

/* Put a small border below "Photography */
.sm-accordion li:nth-of-type(1) {
  border-bottom: 1px solid rgba(222,222,222, 0.1) !important;
  margin-left: [COLOR="Red"]20%;[/COLOR]
  margin-right: [COLOR="Red"]20%;[/COLOR]
}

Change the % to control how wide the border is. Make sure they're the same # so things are centered.

leftquark · October 17, 2014

SmugSam wrote: »

(I would also like to control where the submenu links appear under 'More+'. I think your original answer at the top of this thread may help, so I will try with that first.)

Is there anything else you'd like to do? We can certainly cook up some CSS!

SmugSam · October 18, 2014

Yeah there is NO WAY I would have come across the "nth of element" approach on my own - THANK YOU!

Although I have since realised it is not quite the magic bullet for me - as this also affects the 1st element of the submenu. And the default, faint bottom borders of the other submenu items are also still there...

All that is to say that you (and some w3schools) have put me onto some good ideas here, which I haven't had a chance to investigate fully myself, but I intend to tomorrow. (Also suffice to say I may have more questions after said investigating...)

As for "cooking up some CSS" for other ideas - aren't you busy enough?!?!

Thank you Aaron.

leftquark · October 19, 2014

SmugSam wrote: »

Although I have since realised it is not quite the magic bullet for me - as this also affects the 1st element of the submenu.

I've cooked up some new code that should fix this issue:

.sm-accordion li[COLOR="Red"].sm-nav-item-toplevel[/COLOR]:nth-of-type(1) {
  border-bottom: 1px solid rgba(222, 222, 222, 0.1) !important;
  margin-left: 15%;
  margin-right: 15%;
}

The slight variation was done by addeding a little identifier to the first menu item ... New part is in red.

SmugSam wrote: »

And the default, faint bottom borders of the other submenu items are also still there...

This should get rid of those:

/* Hide the border from the accordion sub-menus */
.sm-accordion-children > li {
  border: 0px !important;
}

SmugSam wrote: »

As for "cooking up some CSS" for other ideas - aren't you busy enough?!?!

I'm here to help

SmugSam · October 19, 2014

Cheers Aaron!

That nailed it. Plus I was able to use what I have learnt from this little exchange to do a couple of other things - remove the "+" sign beside the top level accordion menu, and set a hover colour change on the links, to name two. Fantastic!

As for other things, I think I will give you a rest for a little while, let someone else get the benefit of your assistance!

I prob want to tweak the mobile view some more at some stage - I am still not super happy with some of the spacing, but it is looking WAY better now than it ever has.

I would like to be become more self-sufficient in CSS, but I still struggle quite a bit in successfully 'targeting' the element I want to adjust. Your intro to "nth-of" etc led me onto the w3schools list of selectors, which is a huge step forward. However when inspecting elements and there is a big long trail of class names showing, I haven't figured out the logic behind honing down to what I am targeting. It may just be a matter of practice, but if there are any other tools/references that you think may be of use to someone like me, then by all means let me know!

Thanks for your invaluable assistance, Aaron. I really appreciate it.

Sam

SmugSam · October 19, 2014

Oh - and if anyone knows a shortcut to get into the CSS editing page on your SM site, rather than all those clicks through Customise Site->Theme->wrench->Advanced->, etc, etc, then I would love to know about it!

Sam

leftquark · October 19, 2014

SmugSam wrote: »

Oh - and if anyone knows a shortcut to get into the CSS editing page on your SM site, rather than all those clicks through Customise Site->Theme->wrench->Advanced->, etc, etc, then I would love to know about it!

That's how I do it now

In terms of figuring out which CSS identifier to use. Chrome does a nice job of highlighting which section is which when you put your mouse over the code. I then always look for the "class= ...". Often times there's multiple identifiers in there. You just need to pick one ... I tend to look for ones that are fairly unique and more specific to exactly what I'm trying to do. You can create a cascade of them by putting a space in between to help be more specific. For example:

<div class="div1">
  <div class="div2">
    <div class = "div2a"></div>
    <div class = "div2b"></div>
  </div>
</div>
<div class = "div4"></div>
  <div class="div2">
    <div class = "div2a"></div>
    <div class = "div2b"></div>
  </div>

If you only wanted to touch the first div2, you could use CSS code:

.div1 .div2b {
  /* do something */
}

so that it would only touch the div2b that's within div1

Hope that helps a bit!

SmugSam · October 20, 2014

Thanks Aaron. That is pretty much how I understood it, and I use the console in Chrome to try and identify the specific identifier I need, but as I say it seems very hit and miss for me! I think I get mixed up on two fronts in particular:

1.) The difference between referencing elements with a space in between (so like your .div1 .div2b example above) and referencing elements with '>' in between as you did in a piece of your code you gave me above (.sm-accordion>.sm-accordion-item>.sm-accordion-item-label). I understand the latter is to refer to child elements? But not sure the difference that clearly.

2.) What to do when an attribute you try and change gets overwritten by another setting. Example: I tried to reduce spacing on some widgets at the bottom of my screen for smallscreen devices, I figured out a command that would work by entering it in the console, then put this into my CSS as follows:

@media only screen and (max-width: 640px) {
/*Reduce space around Contact widgets at bottom*/
.sm-page-widget-5292343 .sm-page-widget-content {
padding: 0!important;
}
}

Then I publish that, but it doesn't work and when I go to the console I can see it there but it is crossed out as something has precedence over my setting. But is there a way to identify what, and maybe overcome it?

I sometimes think I have it clear, then it goes awfully confused again!

Hmmm...didn't mean to turn this into CSS 101...

Sam

Allen · October 20, 2014

I use WebDev in Firefox to open the edit CSS window. Then I temporary chunk delete each CSS tab to see what
happens. Once I find the tab with the CSS I delete about 50%, then the other 50%. After each hitting "undo". This
way I can march in to find the exact CSS causing the problem.

leftquark · October 21, 2014

I don't know if lack of a space before !important matters but I usually do things with a space: "padding: 0px !important;"

The way things work is that SmugMug always loads your CSS content blocks or Theme's CSS AFTER their own. So anything you enter with !important should get overwritten with your own CSS. The only thing that would overwrite your own is if you then add a second case somewhere else that overwrites it.

SmugSam · October 21, 2014

Allen wrote: »

I use WebDev in Firefox to open the edit CSS window. Then I temporary chunk delete each CSS tab to see what
happens. Once I find the tab with the CSS I delete about 50%, then the other 50%. After each hitting "undo". This
way I can march in to find the exact CSS causing the problem.

Cheers Allen! I haven't tried using FF for this. Good idea. Might have to install it and give it a go, see if it helps cover my inadequacies better....

Sam

SmugSam · October 21, 2014

leftquark wrote: »

I don't know if lack of a space before !important matters but I usually do things with a space: "padding: 0px !important;"

The way things work is that SmugMug always loads your CSS content blocks or Theme's CSS AFTER their own. So anything you enter with !important should get overwritten with your own CSS. The only thing that would overwrite your own is if you then add a second case somewhere else that overwrites it.

Hmmm. It seems that other commands I have used are working without the space before !important, and I just gave it a go with those problem ones with the space - still no luck.

So if the only other option is that I am overwriting it myself somewhere else, I will investigate that possibility tomorrow. I don't think that is it, as I keep all the CSS under the main area under the Theme customisation (rather than by page, etc). But still, perhaps I put something in the wrong place a loooong time back.

Good idea, as always, Aaron. Ta.

Sam

leftquark · October 22, 2014

SmugSam wrote: »

So if the only other option is that I am overwriting it myself somewhere else, I will investigate that possibility tomorrow. I don't think that is it

Let me know how it goes. If you are still stumped I'll pop on over and see if I can find the culprit.

SmugSam · October 25, 2014

leftquark wrote: »

Let me know how it goes. If you are still stumped I'll pop on over and see if I can find the culprit.

Seeing as you asked for it!

I had a look through and the conflicting code isn't coming from me. I tried a few things, but my attempts to set margins/padding always get overwritten. I did some digging and you can see from the photo where things are going wrong:
Screen Shotx.jpg

The red arrow is pointing to the style overwriting mine (which has the green arrow). Other commands work here to affect the widget, but not margin/padding. I had a look at the code providing this styling (by clicking on it to the left) and it seems to be some fairly generic stuff given the comments in there. Certainly not my code. Must be coming from SM somewhere?

So it is not a big issue for me anymore as I have figured out a workaround. It is not my 'ideal' solution - the repositioning approach of elements doesn't let me add a background (with alpha) to these elements as I start to get gaps or overlaps with the background. Hence my preference to control it with padding/margins. But I am happy with the way it works.

There you are - in case you were interested/had any thoughts!

Sam

leftquark · October 28, 2014

Which section of your page are you trying to change with the above code? Your menu bar? The submenu links?

Have you tried placing a CSS block at the bottom of your page and seeing if it will overwrite the code? If there's multiple !important's, CSS will take whatever the last code is.

SmugSam · October 29, 2014

Sorry Aaron - I missed that you had replied to this. The elements I am trying to adjust are the 3 at the bottom of the left nave bar (social icons, the menu with About/Contact, and the Copyright message). I was looking to adjust their padding/margins on small (<640px) screens.

I tried your suggestion of adding CSS blocks to Entire Site and also to the Homepage, but neither seemed to work. (In fact, couldn't even see them being 'overwritten' as per the earlier examples above). Not sure what is happening, but think I will put this one to bed now as it is taking up more time (both mine AND yours!) than it is worth. Thanks for your help.

Sam

leftquark · February 11, 2015

We released an update to the menu block today that allows you to use CSS to emphasize the parents of sub-links. You may now use "sm-page-widget-nav-hasactivepage" to target the parent link. No need to use the tricky :nth-of-type hack I created a few months ago.

To emphasize the parent link in the navbar, you can use CSS code similar to this. You may read more here: http://www.aaronmphotography.com/Customizations/Navbar/Emphasize-Active-Page

/* Make the Customizations link in the navbar always white */
.sm-page-widget-nav-hasactivepage > a {
   color: #E3E3E3 !important;
}

/* Make the Customizations link in the navbar always have a white hover color */
.sm-page-widget-nav-hasactivepage  > a:hover {
  color: #FFFFFF !important;
}

SmugSam · February 11, 2015

Fantastic! Will take a look and see if I can put that to use.

Submenu Customization

Comments