Making an image appear in the navbar when scrolling

[Jeypolitan]

Hi there,

On my other website (Jeypolitan), you helped me with a code which made a logo/image appear on the navbar when scrolling down. It is exactly like on this website: https://thrivemdvail.com/ . A logo appears when you scroll down. It is a little bit different than from Jeypolitan, as on Jeypolitan the logo appears in the middle of the navbar (not wanted for this site).

How can I achieve this please?

Thank you so much!

[mldarshana]

Hi There @Jeypolitan

Thanks for writing in! Basically you can add the following CSS rule into your X -> Theme Options -> CSS area to hide your normal logo in the left hand side.

.x-brand.img {
    display: none;
}

Then you can add the logo into your menu item, so that it will be on the center of the navigation. For that, head over to Appearance -> Menus section and add a custom menu item with the image path to your logo.

If you require further customizations on this, I suggest you to contact a developer or a service.

Thanks!

[Jeypolitan]

Hello,

I do not wish to have the logo in the centre of the navigation.

Please do help me with the CSS code, as another Theme X person helped me with the same exact code for my other website (Jeypolitan.com).

I just want an image to appear in the navbar when you scroll down please?

Thank you so much

[jade]

Hi there,

Please note that any functionality or feature that is not available out of the box with X and Cornerstone would involve customization which usually goes beyond the scope of our support though we try to go above and beyond by providing some minor custom codes and references so that you could possibly apply it to other sites just like your previous site.

This code should help you get started:

.x-navbar-fixed-top .x-brand:before {
    content: 'url(URL_OF_THE_SMALL_ICON)';
    width: 40px;
    height: 40px;
    display: inline-block;
}

Here are some reference links related to the suggestions above:

• CSS Introduction - https://www.w3schools.com/css/css_intro.asp
• How to get CSS Selectors using Chrome - https://stackoverflow.com/questions/4500572/how-can-i-get-the-css-selector-in-chrome

Hope this helps.