Using a custom image for active nav bar items

[KimAnn]

Hello-

I was wondering if it is possible to use my own custom line (which is an image) to replace the line above active menu bar items? Here is a screenshot of the desired outcome:

As you can see Under “Merlin & The Masters” there is a gold line. I would like to use this.

My website is https://alisonljames.com/ however it is in maintenance mode. Let me know if you need to see the site.

Thank yoU!

[ruenel]

Hello Kim,

Thanks for writing in!

The current line in the menu item is only a line. If you want to have a custom image, you will be needing a custom css to do it. Would you mind providing us the url of your site with login credentials so we can take a closer look at your menu? Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288
​
Thank you.

[KimAnn]

Thank you I sent a secure note. While you are in there one more issue- I can’t get my header background image to cover the width of the site. Here is my CSS for that, can you tell me why it is not working?

TY

.x-navbar-inner {
background-image: url(“https://alisonljames.com/wp-content/uploads/2019/06/AlisonLJames-header.png”);
background-repeat: no-repeat;
background-size: contain;
}

Just an fyi- i do not want the image to repeat.

[friech]

Hi Kim,

Thank you for the credentials, for the custom underline please add this to Theme Options > CSS

/*custom underline in menu items*/
li.menu-item a:hover span {
	border-bottom: 3px solid transparent;
	padding-bottom: 15px;
	border-image:url(https://alisonljames.com/wp-content/uploads/2019/06/Merlin-page-indicator.png) 30%;
}

More about CSS border-image Property

If you want to remove the default red line above menu items, please add this as well.

/*remove the default red line above the menu items*/
.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
	box-shadow: none !important;
}

Regarding your header background-image, please update your custom CSS code to this:

/*header background-image*/
.x-navbar-inner {
    background-image: url(https://alisonljames.com/wp-content/uploads/2019/06/ALJ_Nav-Bkg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
}

More about background-size and background-position CSS property.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

[KimAnn]

I am seriously blown away by you guys- thank you so much.

One thing- I would like the custom underline to stay visible on active pages. So when I am on the membership page for example the line stays underneath the word membership.

TYTY

[ruenel]

Hello Kim,

To make sure that the active page has also the custom underline, please have this code removed:

/*custom underline in menu items*/
li.menu-item a:hover span {
	border-bottom: 3px solid transparent;
	padding-bottom: 15px;
	border-image:url(https://alisonljames.com/wp-content/uploads/2019/06/Merlin-page-indicator.png) 30%;
}

and replace it using this code instead:

/*custom underline in menu items*/
li.menu-item a:hover span,
li.current-menu-item a span {
	border-bottom: 3px solid transparent;
	padding-bottom: 15px;
	border-image:url(https://alisonljames.com/wp-content/uploads/2019/06/Merlin-page-indicator.png) 30%;
}

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

[KimAnn]

Yes it works great, thank you so much!

[Prasant]

Glad to hear that.