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
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
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
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
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
Thank you! It's working now!
Heather
Heather
Excellent!
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
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
you could try a negative "top" value. For instance:
top: -10px;
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
Thank you!
Heather
One way is to add extra CSS somewhere that loads and overrides a bit of Elemental CSS.
The bit of CSS you need is
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
Modify it to be
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.