Logo change when scrolling

Support
#1

Hi there,

I hope you could help.

I currently have a fixed nav bar, so when scrolling the logo disappears but the menu stays at the top of the page… is it possible to show a logo inline to the left of the menu?

My domain is sitesample.co.uk and I am using X with Integrity

Thanks
Tony

#2

Hi There,

The logo is still appearing on my end when scrolling down.

At this time I am not entirely certain what it is you would like to accomplish based on the information given. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks.

#3

Hi Sorry I have been trying some of the suggestions found in the forum… but i haven’t manged to get any to work.

Originally my logo was stacked… I would like it to change to being inline and smaller when scrolling down the page… but I think this is only possible in Pro using header builder.

So as an alternative I am using the inline logo but I don’t wan the menu to but at the top of the page… I would like this to be move about 40px from the top with the top border approx 15px from the top of the text.

Then would it be possible to have a widget for text under the menu (or social media icons… or both)?

#4

Hello There,

To make your logo smaller as you scroll down, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-navbar .x-brand img {
    transition: all 0.5s ease;
}

.x-navbar.x-navbar-fixed-top .x-brand img {
    width: 100%;
    max-width: 240px;
}

A widget for text or social icons under the menu can only be achieve if you are using Pro theme. With X theme, it will require custom development which is beyond the scope of our support.

Thanks for understanding.

#5

Thanks for that, works great… is it possible for the header height to change as well though? - Can this be acheived with a stacked layout?

Also how would I move the menu to be vertical aligned (including the active and hover line above the text)

Thanks
Tony

#6

Hi There,

Please also add this custom CSS:

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
    height: 137px;
    padding-top: 68.5px;
}
.x-navbar.x-navbar-fixed-top .x-navbar-inner {
    min-height: auto;
}

To make the menu vertical aligned, please navigate to Theme Options > Header > LINKS – ALIGNMENT > change the NAVBAR TOP LINK ALIGNMENT (PX):

Hope that helps and thank you for understanding.

#7

Hi thanks for that looks good, just one problem when I scroll the logo shrinks but the gap between the menu and the line above the tex increases

Thanks for your help

#8

Hi Tony,

That happens because in your previous post, you have asked:

And the suggestion was given which is to add the code:

Which adjusts the height of the menu items when you scroll through the page.

If you want the alignment of the menu items to be the same, you can remove the padding-top in the code above.

Hope this helps.

#9

Hi,
I like the position of the menu items… it is the position of the box shadow that I need to move as that is anchored to the top of the page

Thanks
Tony

#10

Hey Tony,

It would be best that you use Pro for this project so you can configure different header setups. Pro was built to accommodate users’ demand for a flexible header layout. With X, you would need additional custom CSS which as you now know, is outside the scope of our support.

If you wish to continue using X and proceed with your specific design requirements, please consult with a third party developer.

Thank you for understanding.

#11

Hi,
That is disapointing just to move the box shadow in keeping.

Is it possible to convert to Pro without losing the work that has been done already?

Thanks
Tony

#12

Hi Tony,

Yes, that is possible. Please follow the following article:

X To Pro Conversion

Remember to clear all caches (plugin, server-side, CDN, and browser’s cache) after updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Thanks,

#13

HI There,

I have a small problem with this.
When I load the site I have a larger image to the left, when I scroll the image shrinks… great just what I need, but when I scroll back up I am left with white space at the top of the page.

How can I resolve this anomolly?

Thanks for your help

Tony

#14

Hey Tony,

Please add the following code in the Theme Options > CSS:

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto !important;
}

Hope this helps!

#15

Hih
Thanks but that has stopped me being able to scroll…

Strange but some pages work well (Home page, utopia…), but then others don’t (Gallery, Contact)
Thanks
Tony

#16

Hi again,

I checked your site and the issue you’re having is due to the custom header customization i.e logo shrinking effect as the height of the header is calculated initially including your initial logo height but you’re changing the height of the logo on scroll which is disturbing the layout. As Christian suggested above that It would be best that you use Pro for this project so you can configure different header setups. Pro was built to accommodate users’ demand for a flexible header layout, in this case you’ll need custom Javascript and CSS to fix the disturbed layout which cannot be a good solution and can be the cause of potential issues in future.

As a temporary solution you can add the following code in the Theme Options > JS:

function stop_jumps() {
	jQuery('header.masthead').css('height', jQuery('.x-topbar').height() + jQuery('.x-navbar').height());
}
jQuery(document).ready(function(){
	stop_jumps();
});
jQuery(window).resize(function(){
	stop_jumps();
});

As you see it requires custom development and it serves as a guide only so we’ll not be able to support any issue arise from the above customization.

Thank you for understanding!

#17

Perfect!

Thank yo for your help

Tony

#18

You’re welcome.

#19

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