Changing menu colors

Help Center Get Answers
1

How do I change the color of each of the menu (button/links). I understand it is done via CSS, and I know how to get there, but I can’t seem to get what I enter to work.

For instance, I want my Add a Lead menu to be different than the universal properties set in APP Design.

/* Use to override knack property !important /
/ Set your own color by changing the #feeeee value */
#add-a-lead {
background-color:#0e48b4 !important;
}

What am I missing?

2

Are you referring to this type of menu?

image
image1215×973 88 KB

3

You can use the global settings to manage menu buttons and then use the page level overdies to customise them.

image
image1948×1306 209 KB

4

If you need to change the menu links on the exmaple above using code, you can use the below CSS, update the view from xxx, amend the hex code for the background-color and ensure that you us link-1 and link-2 in the first line of each section to define which button you are targeting.

As the option to set link styles globally is realatively new, you may have all your buttons styled with code, so I appreciate updating the with view level overrides could be time consuming. If however, your app is relatively new, I’d recommend using the Live App Design section and have a look at what can be achived without code. As mentioned, you can then override the style of a link on the page view at the bottom of the toolbox.

/*Add Vet Menu Button*/
#view_xxx a.kn-link.kn-link-1.kn-link-page.kn-button 
{
padding-top: 5px!important;
padding-bottom: 5px!important;
padding-right: 16px!important;
padding-left: 16px!important;
background-color: #7EBB44;
color: white !important;
font-size: 16px !important;
}

/*Map Menu Button*/
#view_xxx a.kn-link.kn-link-2.kn-link-page.kn-button 
{
padding-top: 5px!important;
padding-bottom: 5px!important;
padding-right: 16px!important;
padding-left: 16px!important;
background-color: #2480CE;
color: white !important;
font-size: 16px !important;
}

image
image1526×1286 115 KB

5

Carl, actually I want the tabs in the banner.
In your example, I want different colors for Clients, Pets, Breeds, Summary, Admin, Vets, …
I was hoping I could do it in CSS. I know the identifiers, but it’s just not working as in my code in the beginning example.
Cathy

6

Oooh, I see :blush:…hopefully a coder will jump in on this one for you.