Image behind Nav Link on Hover in Pro Header

I am trying to do this without Uber Menu. I have it all in my PRO Header and have the image in place but I cannot get the secondary image lined up right. I only want the image upon hovering over a link. Maybe also to show on the Active page as well. I am not sure what I am missing. Made a quick video in secure box!

Thank you!!
Noelle

Hi Noelle,

For the background, those images option is not meant to be background but rather an image beside the text. Also if those grapgic are sent to ON, it will look for the image value for both default and hover. It will show a broken image on default if you don’t add one. Unfortunately for menu there’s not enough settings by default that will achieve the background you want. I add sample to use background image CSS on Customize TAB > INLINE CSS. See how it is added. You may adjust the padding on top links to see how the background image behaves. It might require more adjustment but that would be outside the scope of our support. Please try to inspect the element to see how it is added and to adjust how it looks.

You have added this custom CSS to hide featured image:

.single-x-portfolio .entry-featured {
    width: 0%;
}

Then you have added h2 title header. By default, header have top margin. Please reset top margin to zero. You can use our helper classes mtn to reset top margin.

It is not showing but it is still occupying space. Please use display property to hide it instead

.single-x-portfolio .entry-featured {
    display: none;
}

As explained above the custom CSS you add about featured image.

Hope this helps.

Thank you @lely :slight_smile:
I will play with padding ect for the top links.

Can you check and see why the social media links on this page do not work? They are linked up but something is keeping them from working.

You’ll need to login to see. I will add more backup codes to the secure note.
https://rochellegaukel.com/blog/

THANK YOU!
Noelle

Hi Noelle,

The reason behind that is that the Bar or container that you used on the Pro header builder to show the navigation menu overlaps with the other container which contains the social media icons:

I am not sure how you create the header, I suggest that you check the height setting of the Bar or Container and it is a matter of settings of the containers or Bars and not the navigation and social media elements themselves.

If you need to learn more about how to set up the Bars and Containers I suggest that you check the resources below:

Another way of learning the best practices to use Bars and Containers is to install pre-built headers from Design Cloud and check the options to learn the best practices.

Thank you for your understanding.

Thank you, I will take a look at this again. Something is not right.
Thank you!

You’re welcome.

So it was driving me crazy because I knew something was not right. I could see all perfectly inside of working on the header but it never would show that way on the page. It was the assignment of the header! Mercy. I had it set to just Blog. I now moved it to be assigned to Blog, Posts Page and All Posts. Now all is showing correctly.
Thank you! :slight_smile:
Stay well!
Noelle

We are delighted to assist you with this.

Stay safe,

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.