-
Posts
-
Hi there!
Thanks for creating such a great theme and your wonderful support forums. I’ve been able to answer most of my queries by searching other people’s posts, but the below are the few remaining things I am struggling with. I’m a total newbie to WP so really appreciate your help.
1) Header image as logo
I’ve tried a few options, but my logo works best as an image as I want it to be full-screen. I have uploaded my logo as a full-width easy slider on every page to get this effect. But there are a couple of problems with this.a) Firstly, I also want to use a transparent header but this means the transparency logo is duplicated over the image
Basically I just want the logo to show when the user scrolls down and no transparency logo to be visible. Is this possible?b) Secondly, there is an issue on mobile devices.
Because of using the logo as a full width easy slider (maybe that’s not the best thing to do??) on mobile devices both the transparent logo and the logo I’ve added as a full width easy slider shows at the top of the page (one under the other). Can I make the full width image with logo disappear on mobile devices?
Or is there a better way to achieve what I’m trying to achieve (full width logo and transparent header) that doesn’t cause this issue?2) Iconlist – space under heading
Is there a way to add in a space between the heading and the list itself in the icon list?3) Border colors to form fields only
I want to remove the borders around the colour sections but when I change the border colours to white in the general styling tab it also removes the borders around the form fields which makes the fields disappear as they’re white too. Is there a way to add a light grey border to the form fields only via quick CSS?4) Icons as bullets – alignment
I’ve managed to use a custom icon as a bullet based on this advice #429401 which worked perfectly. But when I have used it with text styled as H4 the icon alignment goes out. See top of http://www.thehealthtohappinessproject.com/you-me/ How can I fix this?5) Form Title and Success message – size/font
I’ve tried to find a solution for this, but couldn’t seem to find anything that worked. What CSS would I need to add to change the form title and success message font size? I would like to make the form title look like the special heading (H4) styling (to tie in with the rest of the page). Also, I would like the form success message to be H6 and be able to change the colour please.6) Change specific button hover colour and border
I have buttons on a variety of colour sections throughout the site and so in one instance the button hover colour is also the background colour.
Is it possible to change the hover colour and border colour for this button only? I have activated custom cc class so familiar with using that.7) Button text has underline
I’m not sure why, but one of the buttons in a table has the button text underlined (but not the others). I’ve deleted it and added it back in numerous times, but can’t seem to get it to disappear!8) Menu hover colour on transparent header
Because the menu sits on a background image, I want the hover colour to be white. However when the transparent header disappears once the user scrolls down the white hover makes the menu items invisible as the background changes to white. Is there a way to keep the hover colour white when the transparent header is active, but change it to another colour once the normal menu is visible?
9) Own social media icons in footer
I have added my own social media icons into the footer via a text widget. I’m just not sure how to link them through to the actual sites. This is the code I am using for each icon:
<a Also how do I center them in the footer?
Thank you so much for your help. I’ve loved using your theme!
Hey Taryn!
please use different tickets for different questions, because then we are able to answer simultaneously your questions and you would get a faster reply. Also it does not get too confusing for us and for other people searching for help in the forum.
I will answer as much as possible in this thread. For more questions please us more tickets.
1.)
a) Which transparency logo do you mean? Can you add screenshots to your explanations, so we can see clearly what you mean? you can use imgur.com or dropbox to add screenshots here. I am not sure what you want to achieve exactly, as I see different behaviors of your header/logo on different pages:
So do you want to use only one logo? or both? please add a mockup showing want you want to achieve.
Maybe you want to use custom header images on your website? in this case these plugins could be useful to you:
https://wordpress.org/plugins/custom-header-images/
https://wordpress.org/plugins/custom-header-extended/2.) You can add space using “Separator/Whitespace” element in Content Elements of Avia Layout Builder. If this does not help then please show us exactly where you need to add space using a link+screenshots.
3.) Do you mean your contact form under “Contact Taryn”? if es use this code:
#top .input-text, #top input[type="text"], #top input[type="input"], #top input[type="password"], #top input[type="email"], #top input[type="number"], #top input[type="url"], #top input[type="tel"], #top input[type="search"], #top textarea, #top select { border: 1px solid red !important; }and choose any other color than “red” if needed, your default color is #e1e1e1.
Best regards,
AndyHi Andy,
Thanks for your help. Ok, sorry I will open up the rest of my questions as separate tickets.
1) As for the headers I’m not sure what happened, all the pages should have the same header. I have now fixed this.
Every page should look like this:
but they look like this:
I want the white header to be visible once the user scrolls down only. Like this:
The rest of the time the transparent heading should not show.2) Oh of course, thank you. I didn’t realise I could do that. All fixed.
3) Thanks this also worked perfectly!
Thanks again Andy.
Hi!
please refer to this possible solution for your logo: https://kriesi.at/support/topic/change-logo-in-scrolled-header/#post-301671
Glad the other things are working for you.
Cheers!
AndyHi Andy,
Thanks, but that doesn’t seem to solve the problem. The scrolled header is fine, it is the transparency header than is causing the problem. Because I am using a full-width easy slider on every page to get the effect of a large, full width transparent logo I can’t upload a logo in the transparent logo field in the enfold theme options without it duplicating the image and giving me 2 logos! (see second screenshot above).
Perhaps there is a way to get my transparent logo to be as large as the easy-width slider so I can remove the image completely? Dimensions need to be 2600px x 350px
If that can’t be done, can I stop the transparent logo being shown altogether?
Thanks for your help,
Taryn
Hey Taryn,
The following code will disable the logo when the header is transparent:
.av_header_transparency .logo { display: none; }Regards,
JosueThanks so much Josue – that worked beautifully! The problem is that on mobile devices this is showing up like this:
So both the logo and full width easy slider image I’m using instead of the transparent logo show underneath each other – meaning the logo is duplicated. It seems to work fine on tablets and desktops.
This makes me think I’ve made a mistake by trying to create a full width transparent logo with an easy slider image. Do you recommend I change this approach? Or is there a way to fix the issue on mobile devices?
Thanks again,
Taryn
Hey Taryn!
Add this:
@media only screen and (max-width: 767px) { #top #wrap_all .av_header_transparency { position: absolute !important; background-color: transparent !important; } #top .av_header_transparency .logo { visibility: hidden !important; } }Cheers!
Josue
- The topic ‘Full-width logo image, form title font size, social media icons in footer + more’ is closed to new replies.