- This topic has 15 replies, 2 voices, and was last updated 5 years, 5 months ago by
.
I’m having some issues with my header
- I have turned on sticky header in the “customize” settings, however, when I view the site, my header is not sticky.
- When viewing the homepage, my logo is the correct size (pic 1), however, on all my other pages, the logo is much smaller (pic 2). I had used Yellow Pencil to edit the logo size previously, so I was wondering if this might be an issue with Yellow Pencil.
- I changed the text color on my drop-down menu, but after I did this, it changed the drop-down background color to off-white, rather than the default off-black which I wanted to keep (pic 3)
Hoping y’all could help, thanks.
Hi @smart_alec,
Sorry to hear of the problem you are having.
Could you please share me your site URL where it’s happening so that I can troubleshoot it?
Best regards,
Shufflehound teamAt the moment I am working on a local install of WordPress, so I’ll send you the URL as soon as I transfer it to my domain. Thank you.
Ok Thank you
Ok here’s the URL
I have turned on sticky header in the “customize” settings, however, when I view the site, my header is not sticky.
It displays sticky for me on the scroll.
Please test it using different browser.
When viewing the homepage, my logo is the correct size (pic 1), however, on all my other pages, the logo is much smaller (pic 2). I had used Yellow Pencil to edit the logo size previously, so I was wondering if this might be an issue with Yellow Pencil.
You can increase its height 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
#page-container .header-logo img { height: auto; max-height: 100px; }I changed the text color on my drop-down menu, but after I did this, it changed the drop-down background color to off-white, rather than the default off-black which I wanted to keep (pic 3)
Do you want to remove the white background of mobile menu?
If yes then which color do you want to apply there?
- Ok yes, the sticky header does in-fact work when I look on another device. Must just be an issue with this computer.
2. The code you gave me did fix the logo size, thank you.
3. Yes I do want to change the background color of the mobile menu to the same off-black color as the border is around the drop area (snippet 1)
I also would like the hamburger icon to not have the white space between the lines (snippet 2). I’d like for it just to be the magenta against the grey I’ve chosen for the header.
3. Yes I do want to change the background color of the mobile menu to the same off-black color as the border is around the drop area (snippet 1)
I also would like the hamburger icon to not have the white space between the lines (snippet 2). I’d like for it just to be the magenta against the grey I’ve chosen for the header.
You can change it by using Yellow Pencil editor as described in the below page to achieve this.
https://support.shufflehound.com/how-to-change-almost-any-element/
Alright. All issues are solved, except now – after having used Yellow Pencil to fix the sizing and coloration issues on the header – when I start to scroll down the page and the sticky header is activated, the regular logo stays and the sticky logo is bumped below the header.
Thank you for your help thus far.
This is happening because of the below custom CSS code that you are using on your generated by Yellow Pencil editor plugin.
.sh-header .sh-table .sh-standard-logo { display: inline-block; min-height: 85px; position: relative; top: -9px; left: 0px; }To resolve the issue please remove the above CSS code on your site or just use below custom CSS code that will overwrite above CSS code.
.sh-sticky-header-active .sh-table .sh-standard-logo { display: none; }Where is this CSS? How do I find it to change it?
You have created it using Yellow Pencil Editor so you have to reset the changes to remove it.
You can reset the CSS and the changes made using Yellow Pencil Editor as described in the following pages.
https://waspthemes.com/yellow-pencil/documentation/#reset-css-styles
This solved one problem and created another. I located the area where the code you previously mentioned was in the Yellow Pencil CSS editor, and I added the overwrite code you gave me. I then made some more sizing changes, but afterward, when I look at the site, the first thing that appears in the header is the sticky logo, not the main logo. The main logo can only be seen when I scroll down and back up.
What’s more, when I go back into Yellow Pencil, I am no longer able to adjust the height of the header, and I can’t even select to edit the sticky header it only lets me edit the main header.
I tried contacting Yellow Pencil directly, but their support ticket form won’t accept my purchase verification code (which is the code I got from ThemeForest for Jevelin).
I’m really hoping I can get this fixed because I absolutely need this site finished by end of day tomorrow.
Please take the backup of CSS code you have generated using Yellow Pencil editor and then remove that CSS code as it seems the custom CSS code you have created using Yellow Pencil editor is conflicting and causing this issue.
Then please tell me what you are trying to achieve so that I can help you.
Maybe there is a mixup.
Part of my problem with fixing things using Yellow Pencil, is Yellow Pencil is unresponsive
I don’t have any “backup of CSS code” I don’t know what that means
I never wrote any custom code, all I have done is insert the overwrite code I was given.
I want:
- the main header with my company name to appear first
- When user starts to scroll, I want the header to get a little smaller and my logo to change to just the little crawdad icon
That’s it.
Part of my problem with fixing things using Yellow Pencil, is Yellow Pencil is unresponsive
Yes it is responsive and you have to make changes in responsive mode as described in the following page.
https://waspthemes.com/yellow-pencil/documentation/#responsive-tool
I don’t have any “backup of CSS code” I don’t know what that means
Backup means creating copy of the chages made using Yellow Pencil editor which you can do as described in the following page.
https://waspthemes.com/yellow-pencil/documentation/#export-css-data
I never wrote any custom code, all I have done is insert the overwrite code I was given.
Actually, when you make any changes on your site using Yellow Pencil editor then in the background it generates custom code.
I want:
the main header with my company name to appear first
When user starts to scroll, I want the header to get a little smaller and my logo to change to just the little crawdad icon
That’s it.
To achieve this, you have to develop custom code in the child theme of Jevelin theme.
Developing custom code for custom functionality is beyond the scope of support that we provide here. Please see https://themeforest.net/item/jevelin-multipurpose-premium-responsive-wordpress-theme/14728833/support
If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Shufflehound recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5
