Archived topic

Change logo on sticky navigation

3 replies · Started by Greg on June 9, 2022

Viewing posts 1–4 of 4

June 9, 2022 at 12:23 pm #2248655

I'm trying to change the logo when the site is scrolled away from the top. I have sticky navigation turned on and the sticky navigation logo set, but when I scroll I don't see it.

https://share.cleanshot.com/yW9LXf

I think I must have some other CSS interfering, but I haven't had any luck tracking it down.

Ideally I'd like the logo to change and then have the navigation bar shrink down to about 100px (from the 160px that it is when at the top of the page).

Any suggestions?

Generate Press Theme 3.1.3
GP Premium 2.1.2

Thank you

June 9, 2022 at 1:24 pm #2248683

Hi Greg,

It looks like you did a lot of customization on your site, the navigation is added to the sidebar, the entire structure has been changed.

You can try this CSS to make the sticky logo visible:

.inside-right-sidebar .stuckElement.is_stuck .navigation-branding {
    display: block !important;
    margin-right: 0;
    width: 100%;
}
.inside-right-sidebar .stuckElement.is_stuck .navigation-branding img {
    width: 100px;
    height: auto;
}

June 10, 2022 at 2:44 am #2249059

Thank you Ying.

I have. Is there a better way to have the navigation in the right sidebar?
If I remove the external CSS file that has most of my customizations I still don't see the sticky logo.

I've added that CSS and I don't see any change.

The navigation currently looks like this:
https://share.cleanshot.com/QOwCxR

I'm looking for this after scrolling:
https://share.cleanshot.com/vKXkHm

Any other suggestions or directions to look?
Thank you

June 10, 2022 at 3:19 am #2249093

Hi there,

you would need to use the Themes Sticky Navigation, not the CSS position: fixed; method you currently are using.
If you enable Sticky Navigation in the Customizer, there is an option to add its own logo.

This archived topic is closed to new replies.

Start building better websites today.