- This topic has 11 replies, 2 voices, and was last updated 4 years, 2 months ago by
.
Hello,
This issue is in regards to my top bar. I have it styled the way I want it as shown in the first screenshot. But when I add an “<a href….” with a link to my location address (linking to a google map) –then it messes up the phone number styling and the container padding. As shown in the second screenshot. I cannot figure out why this is happening. Can you please help?
Thanks,
Derek
Hi Derek,
I hope you are well today and thank you for your question.
This is happening because normal text is changed to hyperlink.
You can style it using Yellow Pencil editor as described in the below page.
https://support.shufflehound.com/how-to-change-almost-any-element/
Best regards,
Shufflehound teamHello,
I haven’t changed anything for the phone number, yet it still gets bigger and messes up the padding. The phone number was already a hyperlink to call the number. And the “Spec Data Sheets” is already a hyperlink too and doesn’t mess up anything. Even if I style the address using CSS to make it white, the phone number has still been altered somehow, and the padding of the container is still messed up because of the phone number, not the address.
How can I fix this?
Thank you.
Does it display the same for you using the Jevelin theme instead of its child theme?
Have you tried using Yellow pencil editor as described above to style it?
I haven’t altered any theme files except custom css. Are you telling me to try activating the jevelin theme and deactivate the child theme? Why would using the child theme be an issue?
And no, I don’t use Yellow Pencil. I use custom css. I have already altered the container and have everything styled the way I want it. But the problem occurs only when I add a hyperlink to the ADDRESS. The problem is that when I add a hyperlink to the ADDRESS, the PHONE NUMBER text gets bigger, which I don’t want the phone number size to change. And it messes up my container padding that I’ve already edited using CSS.
I’m trying to explain this the best I can. I’ve been looking through the source code for hours and hours and cannot figure out why adding a hyperlink to the ADDRESS would change the PHONE NUMBER size and mess up the container when there are already other hyperlinks in the container that do not mess it up.
Can you please help me fix this? I don’t use YellowPencil.
Thanks.
I am providing you the below custom CSS code solution as you don’t want to use Yellow Pencil editor and don’t want to troubleshoot the issue activating the jevelin theme.
To resolve the issue, please add 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-contacts a { font-size: 14px; color: #FFF; }Hello, thank you for the attempt! But as you can see, it doesn’t fix my problem. The first picture I attached is the desired look I want. With your supplied code, the padding on top is still messed up, AND the phone number has been pushed down. It is no longer in line with the other elements of the top bar.
Again, everything looks great without adding a hyperlink to the ADDRESS, as shown in my first attached picture. But when I add a hyperlink to the address, it messes up the PHONE NUMBER, which I am not trying to change. This makes no sense to me, and I cannot figure out why this is happening.
Please help me fix this problem and I will be forever grateful. Thank you!
Please try using the below custom CSS code instead of the CSS code shared above.
#page-container .header-contacts a { font-size: 14px; color: #FFF; display: inherit; } #page-container #header-contacts i { vertical-align: middle; }Close! But if you look at my site now, the phone number is still slightly below the other elements in the container. And it also messed up the clickable area for the phone number as well as the “Spec Data Sheets” clickable area. Please advise. Thanks!
I have tested it on my test site and it’s working fine for me using the latest version of Jevelin theme as displayed in the attached screenshot.
Please update the theme on your site to the below latest version as described here https://support.shufflehound.com/updating-theme/
Also, please remove all the customizations that you have made on topbar including the CSS code shared above.
This can be a child theme issue used on your site so to confirm it just temporarily use the Jevelin theme on your site. If everything works fine then it’s your site child theme issue.
Thanks, but that didn’t work either.
Usually, it tells me when a Jevelin update is available in my wordpress dashboard. This time, there was no update available. So, I manually deleted my old theme version and uploaded the new 4.6.0.2 version to my FTP. However, it’s still not showing that it’s the updated version in my wordpress>appearance>themes page.
Anyway, with this new theme version, it didn’t fix or change my topbar issue at all. The PHONE NUMBER is still larger than the other elements in the container, and has been moved down, ONLY when a hyperlink is added to my ADDRESS. If I take away the hyperlink from my ADDRESS, then the PHONE NUMBER goes back to normal.
I also tried activating the Jevelin theme and deactivating the Child Theme as you suggested, and the issue still prevails. So it is not a child theme issue.
I have attached some screenshots to try to help you figure out this issue with your theme. When using inspector, you can see that the div for each element in the top bar is similar, EXCEPT the phone number element. Each element shows the “span” while the phone number does not. Just wanted to point this out in case it helps you figure out the problem.
Again, everything looks great without adding a hyperlink to the ADDRESS. But when I add a hyperlink to the address, it messes up the PHONE NUMBER, which I am not trying to change.
Please advise.
As said above it is working fine for me on my test site.
I am not sure why it is not working on your website.
Would you mind if I log in to your site and do some troubleshooting? If this is ok then could you please temporarily share me your site admin login details privately by adding them in the box having text “Enter your private content here (only you and forum moderators will be able see it)”?
