Docs

[christiaan p]

Hi guys,
Is it possible change the colours of the nav buttons individually,
to give you an example, a client wants a bunch of buttons in the nav area,
but then the last two needs to be a solid colour to stand out?
how do i manipulate this via the theme or cornerstone?

thanks

[Rahul]

Hey there,

It is definitely possible. Please share the link where you need to make the changes and we’ll be happy to assist!

Thanks

[christiaan p]

Hi, I have not build the site yet,
but lets take my own website for example.
lets say i want the “get in touch section in red”
I want the area around the text of the nav button red and the text white?

I’am later going to create a register and login button that links to an external link, so that is why it need to stand out.
but it needs to be on the nav bar.

Hope you understand? If you can show me how to manipulate my own site , then i can apply it later. Does it matter what stack i use? ingetrity, renew etc.?

http://visualrender.co.za/

[Christopher]

Hi there,

It doesn’t matter which stack you use, you should target menu items ID, see the attachment.

Please add following code in Customize -> Custom -> CSS :

li#menu-item-55 a {
    background-color: red;
    color: #fff;
}

Hope it helps.

[christiaan p]

Great thanks,
Is there also a way to customize this completely? like to make an jpeg or png image the button?

[Christopher]

Hi there,

Please try this code :

li#menu-item-55 a {
    background-image:url("add image URL here");
 text-indent:-9999px;
}

Hope it helps.

[christiaan p]

Hi, thanks for the help,
the first one worked to just change the colour, but it did not work on another site?

http://playersinvest.com/

The second option to change the button with an image did not work on both sites?
Any idea why?

[Christian]

Hey Christian,

That is because the code given is for a specific menu with the ID of #menu-item-55. Please duplicate that code and change the ID. To get the menu ID, right click on the menu and select Inspect Element. Here’s a video tutorial https://www.youtube.com/watch?v=dlQrFFwAC_A

Thanks.

[christiaan p]

I did use the correct id and it still does not work? 176
perhaps you can assist? will it change the code if its a custom menu item? link that goes outside the site.

[Joao]

Hi There,

If you would like to a color to the background you can use this code below:

li#menu-item-176 {
    background-color red !important;
}

If you would like to use an image you can follow the example given by christian like

li#menu-item-176 {
    background-image:url("add image URL here");
 text-indent:-9999px;
}

If you still cannot achieve that and you think you are facing an abnormal issue, please provide us your WP-Admin Credentials in a private message so we can have a look.

Thanks,

Joao

[christiaan p]

This reply has been marked as private.

[Nabeel A]

Hi there,

There is a syntax error in your Customizer, please replace this code:

body a:focus,
body a:hover {
     outline:none !important;
     border:0 !important;
li#menu-item-176 {
    background-image:url("http://playersinvest.com/wp-content/uploads/2016/05/app-store.png");
 text-indent:-9999px;
}

with this:

body a:focus,
body a:hover {
     outline:none !important;
     border:0 !important;
}
li#menu-item-176 {
    background-image:url("http://playersinvest.com/wp-content/uploads/2016/05/app-store.png");
 text-indent:-9999px;
}

This will fix the issue. Let us know how this goes!

[christiaan p]

This reply has been marked as private.

[Joao]

Hi There,

To Change the color of the background:

li#menu-item-176 {
    background-color: red !important;
}

To Use a image instead of a menu item let´s use another Technic.

You can add the img link on your menu name and it will work.

I have used on your this link as your navigation label:

<img src="http://playersinvest.com/wp-content/uploads/2016/05/app-store.png">

Please see img 1

Please see img 2

To use a image as a background on your navbar link you can use the code below as before, but I believe for the purpose of creating buttons the first option will be better.

li#menu-item-176{
    background-image:url("http://playersinvest.com/wp-content/uploads/2016/05/app-store.png");

I have tested all codes at your page and they are working.

Hope that helps,

Joao

[christiaan p]

Hi, sorry can you spell out the steps to do option one a bit better?
step by step stuff, not sure where you are putting the codes

[Author]

Posts