fbpx
Welcome, Guest
Username: Password: Remember me

TOPIC: (SOLVED) Background color of main menu item

Background color of main menu item 5 years 6 months ago #1103

  • svherpen
  • svherpen's Avatar
  • Offline
  • New Member
  • Posts: 16
  • Thank you received: 2
  • Karma: 0
I tried to specify a color for only 1 of my mainmenu items, by going in the main menu editor, select the specific menu-item and then on tab Helix Page Title specify the background color of choise. But unfortunately, nothing changes,
Maybe I'm doing something wrong and is the feature not what I do expect, so if you can please explain what is possible?

Kind regards,
Sjaak
The administrator has disabled public write access.

Background color of main menu item 5 years 6 months ago #1105

  • chandandeep
  • chandandeep's Avatar
  • Offline
  • Administrator
  • Posts: 4614
  • Thank you received: 652
  • Karma: 116
Maybe you are doing it wrong. Open the specify menu item and Click on "Dropdown Menu Options" and add class in "Custome CSS Class" and add the below code in menu.less file

[code].gf-menu li.yourclass {
    background:COLORCODE;
}
[/code]

Screenshot:
screencast.com/t/q7LV9lS7Qa
screencast.com/t/q4zZkoBuUyg

Path: templates/TEMPLATENAME/less/menu.less

Thanks
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.

To know more about products check out the their documentation.
The administrator has disabled public write access.

Background color of main menu item 5 years 6 months ago #1106

  • svherpen
  • svherpen's Avatar
  • Offline
  • New Member
  • Posts: 16
  • Thank you received: 2
  • Karma: 0
Thanks for your prompt response Chandandeep, I appriciate that!

But sorry to say, I've posted the question in the wrong formum as I'm using the jd_chicago template. :(
Can you move it to the correct forum please?

And is my question then still valid for the jd_chicago template as I don't see the 'dropdown menu options' you mention.
Is there a manual available somewhere where I can try to find these answers myself, rather than having to disturb you for all kind of questions ? (As I do have more, the option to include a module in the Helix menu does not seem to work for me either.......)

Regards,
Sjaak
The administrator has disabled public write access.

Background color of main menu item 5 years 6 months ago #1113

  • chandandeep
  • chandandeep's Avatar
  • Offline
  • Administrator
  • Posts: 4614
  • Thank you received: 652
  • Karma: 116
Hi,
I moved or i will update you shortly.
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.

To know more about products check out the their documentation.
The administrator has disabled public write access.

Background color of main menu item 5 years 6 months ago #1135

  • svherpen
  • svherpen's Avatar
  • Offline
  • New Member
  • Posts: 16
  • Thank you received: 2
  • Karma: 0
How does this work in the jd_chicago template ?
There is no menu.less, instead it's megamenu.less, but there I cannot find the class structure you mention.
I added the css class, but don't know what the code should be to define the color for the background of that particular menu-item
Attachments:
The administrator has disabled public write access.

Background color of main menu item 5 years 6 months ago #1158

  • svherpen
  • svherpen's Avatar
  • Offline
  • New Member
  • Posts: 16
  • Thank you received: 2
  • Karma: 0
Any progress to report on my question about megamenu background color?

I'd like to move on with the styling of the menu and I'm getting good results with the submenus, menu-icons and menu-images, but are in need for applying color to the mainmenu items. Any suggestion how to achieve this would it greatly appriciated.

Regards,
Sjaak
The administrator has disabled public write access.

Background color of main menu item 5 years 6 months ago #1190

  • rahulahluwalia
  • rahulahluwalia's Avatar
Okay, Sounds great!!

Just for the records do you mind if you can provide us with the screenshot of the section, where you want us to make the following edit? By that way, we can list you back with the perfect solution.

Thanks
The administrator has disabled public write access.

Background color of main menu item 5 years 6 months ago #1196

  • svherpen
  • svherpen's Avatar
  • Offline
  • New Member
  • Posts: 16
  • Thank you received: 2
  • Karma: 0
Dear Rahu,

In my post, a screenshot is already posted.
I want to change the background color of the leftmost menu item to green, so I know that I can define an extra class as shown in the screenshot, BUT I do not know where to define the class in the template files. So please provide the correct name(s) of the template file I need to add my custom class and also which syntax I need to use.
Thanks!

Sjaak
The administrator has disabled public write access.

Background color of main menu item 5 years 6 months ago #1226

  • rahulahluwalia
  • rahulahluwalia's Avatar
Hello,

In the above screenshot you;re doing right. Just write CSS in the template.less file.

Path: templates/TEMPLATENAME/less/template.less

Screenshot:
Thanks
The administrator has disabled public write access.

Background color of main menu item 5 years 6 months ago #1235

  • svherpen
  • svherpen's Avatar
  • Offline
  • New Member
  • Posts: 16
  • Thank you received: 2
  • Karma: 0
Thanks for the info Rahu, that worked for me.

Once done with the styling (while running in development mode and using the less/template.less file), I copied the information to css/template.css and it's showing the style layout as I want it.

So thanks again for your help.
The administrator has disabled public write access.
The following user(s) said Thank You: rahulahluwalia
Moderators: chandandeep
Time to create page: 0.463 seconds
Cron Job Starts