Adapt Learning Community: Customising the box menu

Hi, I am trying to change the layout of the boxes on the menu screen - I want to change the .menu-item width to 30% instead of 50% so I can have 2 rows of 3 boxes on my menu.

I can see that styling is defined within the file: adapt-contrib-boxMenu/less/boxmenu.less and have tried to override some of these settings from within my theme.less file but this isn't working. My overridden style of 30% is being written to the adapt.css file OK but my changes are before another set of css .menu-item styles (which states 50%), therefore they are being ignored. As a test I tried to change the boxmenu.less file directly, and again, the new style is being written to the adapt.css file OK, but another set of css styles for the .menu element are written after my changes, so they are still being ignored.

I hope this makes sense. To summarise, it seems that no matter where I apply my style changes, there is always another set of .menu-item elements defined within the adapt.css after my style changes, so and I am at a loss as to where this second set of style definitions are coming from.

I hope there is someone who can shed some light on this for me. I am familiar with web-page design etc but I am new to Adapt and .less files so I am sure there is something (usually obvious!) I am missing.

Thanks in advance for any help.

Julie

Hi Julie,

The first thing i would check is that there in only one menu plugin in the src/menu folder, if there was another menu plugin installed that would cause you to have multiple .menu-item styles in your resulting adapt.css file.

If there is only one folder (adapt-contrib-boxMenu) then i would check that there are no extra copies of boxmenu.less hanging around in the adapt-contrib-boxMenu/less folder.

The way the build works is scans for *any* .less files in anywhere under src and compiles them into adapt.css so duplicate less files will give you duplicate styles.

If you still can't locate where the style is coming from you can workaround it in your theme by overrding it with a more specific rule for instance:

.location-menu .menu .menu-item {
width: 30%
}

Show parent | Reply

Hey Julie,

Just to add to Chris's comment. Menus inherit from the theme - this means that they can inherit the colours and styles. So the load order of the '.less' files goes like this:

core less files > theme less files > menu less files > components less files > extension less files

We see menus as being pluggable modules that are individual to theming. So the menu lives and acts by itself but inherits the theme colours and other padding attributes. You'll see this in the menu file like this:

.menu-container-inner {
padding:@content-padding;
}

To edit the menu you should be working in the menu folder. Maybe there's a chance you could create a new menu with 3 column layout as I see the benefit of having such a layout - this could then be pushed back to the community site.

Have you also thought about what you might do when you hit a size of around 700px and you have two elements and one drops down. Maybe the first one could become bigger and stretch the whole width whilst the other two sit underneath? Would be interested in your approach to this.

Thanks,

Daryl

Show parent | Reply

Thanks Chris and Daryl,

I will go through all of the .less files with a fine-toothed comb and hopefully I'll find these extra style elements.

With regards to the menu with the 3 column layout and how it is displayed when you hit 700px - I will have to give this some more thought. I was definately going to go down the line of displaying each menu box at 100% as a list on top of each other for the phone screen size. I intend to work on this some more over the weekend and yes, of course I will be happy to share the new menu layout to the community site when its finished.

I am also thinking of another menu layout, which has a large image at the top with a horizontal row of medium-small boxes along the bottom - again, when it's done I'll share - presuming one like this has not already been done.

Thanks again for your help and advise :)

Julie

Show parent | Reply