- This topic has 13 replies, 2 voices, and was last updated 5 years, 1 month ago by
.
Hello. At the top of my page is a row for my logo and main menu. I would like to ensure that the height of this row decreases to a smaller size when the user begins scrolling down my page (as in this example). Does the theme have an easy way to do this via Theme Options? I know other themes have this feature in theme options (e.g. they give you the option of setting a smaller logo size, and smaller text size, during scroll).
Thanks.
Hi @cagross,
I hope you are well today and thank you for your question.
Yes, by default the theme menu works like that which you can see on the below demo site.
https://jevelin.shufflehound.com/
Best regards,
Shufflehound teamThanks for the reply.
>> Yes, by default the theme menu works like that which you can see on the below demo site.
I looked at that demo site. I have two follow-up questions:
1. How do I enable that behavior on my site (https://www.jewelsbyaron.com/)? As you can see, my site does not exhibit it.
2. On your demo site, I see how the height of the header decreases slightly as you scroll down. But I don’t see that the size of the logo decreases, or that the menu font size decreases. Does the theme allow me to easily do both of those?
Thanks.
1. How do I enable that behavior on my site (https://www.jewelsbyaron.com/)? As you can see, my site does not exhibit it.
It is not working on your site because of the custom CSS code that you have used using Yellow Pencil Plugin so to make it work please remove the custom CSS code from your site.
You can reset the Yellow Pencil Editor CSS as described in the following pages.
https://waspthemes.com/yellow-pencil/documentation/#reset-css-styles
https://waspthemes.ticksy.com/ticket/1058734/
2. On your demo site, I see how the height of the header decreases slightly as you scroll down. But I don’t see that the size of the logo decreases, or that the menu font size decreases. Does the theme allow me to easily do both of those?
There isn’t any option to do this so you have to achieve it developing custom CSS code.
>> It is not working on your site because of the custom CSS code that you have used using Yellow Pencil Plugin so to make it work please remove the custom CSS code from your site.
OK thanks for that.
>> You can reset the Yellow Pencil Editor CSS as described in the following pages.
OK. But I’m not looking to reset the CSS in YelloW Pencil. For now, I would just like to edit it temporarily. But how do I edit the code? If I open Dashboard–>Yellow Pencil–>Customizations, I can view the custom CSS (see attached screenshot jba-yp-code), but I cannot edit it. If I click the ‘edit’ icon, I am taken to a front-end editor (see attached screenshot jba-yp-edit). But now how do I edit the custom CSS code that I see in the ‘Customizations’ screen?
I had a look at the two links you posted, but neither of them explain how to edit the existing custom CSS.
>> There isn’t any option to do this so you have to achieve it developing custom CSS code.
OK thanks for confirming that.
Thanks.
OK. But I’m not looking to reset the CSS in YelloW Pencil. For now, I would just like to edit it temporarily. But how do I edit the code? If I open Dashboard–>Yellow Pencil–>Customizations, I can view the custom CSS (see attached screenshot jba-yp-code), but I cannot edit it. If I click the ‘edit’ icon, I am taken to a front-end editor (see attached screenshot jba-yp-edit). But now how do I edit the custom CSS code that I see in the ‘Customizations’ screen?
I had a look at the two links you posted, but neither of them explain how to edit the existing custom CSS.
You can only delete the CSS code in the admin area.
To edit the CSS code, you have to use Yellow Pencil editor in the site front end as shown in the attached screenshots.
OK thanks for that. I’ve removed all the custom CSS from Yellow Pencil. I have two follow ups:
1. The header on my site still does not exhibit the behavior as your demo site. Any ideas why?
To see this, you can login to my staging site at: https://staging-e43sehju.versionpress.com/?root, using the credentials:
U/N: dev-guest
P/W: 3T-MF`de4u2. I see on your demo site that the default header height is 100 px, but when a user starts scrolling down, it reduces to 70 px in height. Is there a way in Theme Options to control the height of the scroll header, i.e. can I easily change it from 70 px to 50px? If not, how would I best approach that?
In other words, how and where is that 70 px set? Is it set in Theme Options? Or does it get set automatically by the browser, according the the content in the header (e.g. perhaps the 70 px is set by the height of the logo)?
Thanks!
OK thanks for that. I’ve removed all the custom CSS from Yellow Pencil. I have two follow ups:
1. The header on my site still does not exhibit the behavior as your demo site. Any ideas why?
To see this, you can login to my staging site at: https://staging-e43sehju.versionpress.com/?root, using the credentials:
Please don’t share sensitive information on the forum as this is public forum so the information shared can be misused by others.
Please change the shared credentials ASAP.
If you want to share anything privately then you can do so by adding them in the box having text “Enter your private content here (only you and forum moderators will be able see it)”.
I logged into your site to troubleshoot the issue and it seems this is happening because of the logo title.
You can resolve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.sh-sticky-header-active .header-logo { padding: 0; }2. I see on your demo site that the default header height is 100 px, but when a user starts scrolling down, it reduces to 70 px in height. Is there a way in Theme Options to control the height of the scroll header, i.e. can I easily change it from 70 px to 50px? If not, how would I best approach that?
In other words, how and where is that 70 px set? Is it set in Theme Options? Or does it get set automatically by the browser, according the the content in the header (e.g. perhaps the 70 px is set by the height of the logo)?
There isn’t any theme option for it so to change it you have to develop custom code.
>> Please don’t share sensitive information on the forum as this is public forum so the information shared can be misused by others.
My mistake, I thought this was a private ticket. I’ll remember that in the future.
>> Please change the shared credentials ASAP.
I have deleted the account.
>> I logged into your site to troubleshoot the issue and it seems this is happening because of the logo title.
>> You can resolve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.OK, I added that custom CSS and it resolved the issue. But to be clear, the issue was from parent theme deficiency, not from any custom code I added–is that correct? Theme CSS sets padding-left: 15 px and padding-right: 15px on this particular element. The code you gave me sets them to zero. I’m asking only because if so, will you be sure to include this new CSS in an upcoming theme update? That way I can remove my own custom code.
>> There isn’t any theme option for it so to change it you have to develop custom code.
OK got it. But it looks like the change in header height as you scroll is the result of JS code–can you at least confirm that? If so, I’ll probably go with a pure JS approach on my end.
I have another related question. In your demo site, and when I switch to my parent theme, the height of the header is 100 px (see attached screenshot jba-height-parent). But in my child theme, the height of the header is 111 px (see attached screenshot jba-height-child; also see the page here: https://www.jewelsbyaron.com/). Why is there a discrepancy? I have not added any custom CSS to directly change the height of the header. But, in my child theme, the logo title is in a different, and larger font.
Thanks.
OK, I added that custom CSS and it resolved the issue. But to be clear, the issue was from parent theme deficiency, not from any custom code I added–is that correct? Theme CSS sets padding-left: 15 px and padding-right: 15px on this particular element. The code you gave me sets them to zero. I’m asking only because if so, will you be sure to include this new CSS in an upcoming theme update? That way I can remove my own custom code.
We can’t reproduce this issue on the test site as it is specific to your site and the ‘Tangerine’ font used for the logo title text so not fixable in the theme.
OK got it. But it looks like the change in header height as you scroll is the result of JS code–can you at least confirm that? If so, I’ll probably go with a pure JS approach on my end.
Yes, it is JavaScript code.
I have another related question. In your demo site, and when I switch to my parent theme, the height of the header is 100 px (see attached screenshot jba-height-parent). But in my child theme, the height of the header is 111 px (see attached screenshot jba-height-child; also see the page here: https://www.jewelsbyaron.com/). Why is there a discrepancy? I have not added any custom CSS to directly change the height of the header. But, in my child theme, the logo title is in a different, and larger font.
The height is dynamically added by JavaScript code and on your site it is different because of the font used on it.
OK thanks. I was able to do what I want with pure CSS actually, by simply modifying the font size of the header logo font. I didn’t need to edit any JS. For example, in my child style.css file I changed the font size using this rule:
<div>
<div>.sh-sticky-header-active:not(.sh-header-4):not(.sh-header-5):not(.sh-header-6) #header-logo-title .header-logo-title-alignment {</div>
<div> font-size: 28px;</div>
<div>}</div>
</div>
This ensured that the header height decreased as soon as the user began scrolling. Do you see any issue with that?
No, I don’t see any issue in that as you have changes the logo text font size.
OK thanks. We can consider this resolved.
You are most welcome here 🙂
