Jump to content

Archived

This topic is now archived and is closed to further replies.

brianr

Navi MegaMenu Layout Changes

Recommended Posts

brianr

I've been working on some tweaks to your awesome new MegaMenu in DMS2. Here is a screen shot of where I'm at now.

megamenu-tweak-start.jpg

This is a screen shot of the design mockup where I want to be.
megamenu-tweak.jpg

(Note these translucent white columns are just guides. Not color requirements.)

I'm most of the way there. What's confounding me now is positioning of the submenu items in such a uniformed way. I believe the designers goal is to force neat columns.    

Could someone give me some pointers? Things like which CSS/Less I should look at modifying and possibly which files this code is in. I found nav.less. Is that the core file? Or what CSS is creating the columns and wrapping from one to the other?

Thanks!
-BrianR
 

Share this post


Link to post
Share on other sites
Danny

Hi Brian,

 

What you will want to do is, use a child theme instead of editing the core files directly, as this is not recommended nor supported. Then create a less directory and copy the nav.less file to your child themes less directory. Then you can override the default styling with your own.

 

You're free to use my advanced child theme which already contains the necessary directories, you will just need to copy/paste the nav.less file.

 

http://dannyholt.github.io/skeleton

 

Also, please be aware that what you're doing is considered user created code, so we will not be able to provide additional support should you encounter some styling issues. As far as I can remember, you will most likely want to edit the code starting from line 131 I think.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
brianr

Thanks Danny! I am using a child theme. I've poked around the nav.less but will add it to my child theme and look more closely.

 

Cheers,

-BrianR

Share this post


Link to post
Share on other sites
Danny

Cool, don't forget to share your code as others may find it useful.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×