Image in menubar

[christiaanakkermans]

Hi, I have two questions. I hope you can help me.

1. I want an image in my menubar (instead of text or an icon), just like how Apple has its ‘apple’ in the menubar… How do I do this?
2. How do I change the color of the footer?

Thanks, Chris

[ruenel]

Hello Chris,

Thanks for writing in!

1.) You can add the Image Tag to the label of the menu item:
Uploading…

For Example:

<img src="http://localhost/x/wp-content/uploads/2017/11/client_dark.png">

In the case above you can find the URL of the image from the Media menu in WordPress. You may need a little bit of styling after you add the images.

2.) To change the color of your footer contents, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-colophon.bottom .x-colophon-content,
.x-colophon.bottom .x-social-global a {
    color: #fff !important;
}

We would love to know if this has worked for you. Thank you.

[christiaanakkermans]

Thnx! It al worked.

But about question 1: how do I make a hover effect for this image (with an other image)? And that when you clicked on the image, it stays white just like the other items in the menu?

Thnx!

[jade]

Hi @christiaanakkermans,

@christiaanakkermans

1: how do I make a hover effect for this image (with an other image)

You can do so by adding this code in the Global CSS:

.x-navbar .desktop .x-nav>li#menu-item-49 a:hover img {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

Please replace the URL in the code above with the URL of the image you are trying to use.

@christiaanakkermans

And that when you clicked on the image, it stays white just like the other items in the menu?

The other menu items are text and their active state is set to white color. This works differently if you will use an image. If the hover image will be the same as the active image, you can update the code above to:

.x-navbar .desktop .x-nav>li#menu-item-49 a:hover img,
.x-navbar .desktop .x-nav>li#menu-item-49.current-menu-item img {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.