Forums

Elemental Theme - Get Navigation to Expand 2nd level on Hover

Permalink
HI Forum,

I'm missing something with the sitewide navigation. What I would like to do is this. When someone hovers on the top level, then then next level shows. This works with level = 1 in the settings.

But then I'd like the next level down to show if someone hovers on that item. I can't get that to work. I either can have it show all the time, or not show at all.

In the attached image, I want the sub-menu for SimModeler to only show when it is hovered or clicked on.

Heather

1 Attachment

HeatherMyers
 
mnakalay replied on at Permalink Reply
mnakalay
There's one tiny modification that will help achieve what you want but because it is not a good idea to modify core stuff (Elemental is a core theme) you have to decide how you want to do that.

One way is to add extra CSS somewhere that loads and overrides a bit of Elemental CSS.

The bit of CSS you need is
div.ccm-page header nav ul li:hover>ul {
    opacity: 1;
    top: 30px;
    visibility: visible;
}

That's taken from Elemental CSS. The only thing I added was the little > betwwen li:hover and ul

Another thing you could do is download my free Elemental cloner and make a clone of Elemental to use instead of Elemental. The advantage of using that tool is you can modify your clone to your heart's content and not fear to lose everything when you update Concrete5. Also, that tool allows you to package the theme as well if you want which makes it very convenient.

You can find the tool here:http://www.concrete5.org/marketplace/addons/elemental-cloner...

If you use that way what you will need to do is create your clone then modify its file css\build\header.less

At line 85 you will find
&:hover {
          ul {
            opacity: 1;
            top: 30px;
            visibility: visible;
          }
        }

Modify it to be
&:hover {
          & > ul {
            opacity: 1;
            top: 30px;
            visibility: visible;
          }
        }

Notice only the line where you had the ul is changed

Once that is done, apply your new theme to your site instead of Elemental and you're done.
HeatherMyers replied on at Permalink Reply 2 Attachments
HeatherMyers
mnakalay,

Thank you very much for taking the time to help me with this.

I do have a copy of Elemental that I've been using to make changes, and that theme is currently applied to my site.

I tried just changing header.less as you indicated, but I do not see the change for the dropdown menu, I still see only 1 level.

Do I need to change the settings for the block? I've attached an image of my current settings and also the header.less file (renamed so it would upload)

Thanks,
Heather
mnakalay replied on at Permalink Reply
mnakalay
yes you need to set that bottom box to 2 instead of 1 in the block's setting and you have to empty your cache to force C5 to regenerate your CSS
HeatherMyers replied on at Permalink Reply
HeatherMyers
Thank you! It's working now!

Heather
mnakalay replied on at Permalink Reply
mnakalay
Excellent!
HeatherMyers replied on at Permalink Reply 1 Attachment
HeatherMyers
I have another related question.

I am trying to get the second level menu to move to the right but also up. See attached image of what it was, and what I've been able to do.

I moved it to the right by adding this block to header.less, inserted at line 143:
ul {
left:100px;
padding-top: 0px;
margin: 0px;
}

but I'm a bit stumped as to what I can change so that is higher.

Any helps is appreciated,
Heather
mnakalay replied on at Permalink Best Answer Reply
mnakalay
you could try a negative "top" value. For instance:
top: -10px;
HeatherMyers replied on at Permalink Reply
HeatherMyers
I had to add !important to get it to work. Otherwise it would start at the setting then move back to the default.

Thank you!

Heather