Hi there,
I’ve used the code found here: https://kriesi.at/support/topic/display-product-category-under-title/#post-182523
to display woocommerce product category under title. Is there a way to display it over the title = between the product image and product title?
Best regards
Carsten
Hi guys,
I have added two table elements to my site. One is for desktop the other one for mobile because I need the description col next to every other column on mobile.
So, my mobile table element looks like this in backend:
http://fs5.directupload.net/images/160711/bulwuk2v.png
Normally it should look like this:
http://fs5.directupload.net/images/160711/6vtwan7q.png
As you can see, the buttons on the bottom of the table are switching positions. Don’t know why. Everytime I try to fix it and save it, they just switch their positions. Can you tell me if I am doing something wrong or if you can fix this for me? That’s driving me crazy..
Greetings,
Linda
Hi,
Try this:
#top #header .av-main-nav > li.av-menu-button-bordered > a .avia-menu-text, #top #header .av-main-nav > li.av-menu-button-bordered > a .avia-menu-subtext:hover {
color: red !important;
}
Regards,
Rikard
Avia Layout Builder works without problems.
So is it solved for you finally?
Did you insert the code from here into your functions.php?
Best regards,
Andy
Hi Jerome,
Everything is simple if you know it already :-)
Let us know if you should need any further help on the topic.
Regards,
Rikard
Hi,
Great, glad you found the problem. Please let us know if you should need any more help on the topic.
Best regards,
Rikard
Hi, thanks for quick reply.
Here’s the css for the responsive logo I have now:
@media only screen and (max-width: 767px) {
.responsive .logo a, .responsive .logo img {
display: inline-block;
vertical-align: middle;
margin: 0 auto;
max-width: 100%;
height: 80px !important;
max-height: 80px !important;
width: auto;
top: -7px;
}
.responsive .logo {
position: relative;
display: block;
width: 100%;
}
.logo img {
left: 40% !important;
transform: translateX(-40%) !important;
}
}
It looks the way I want, but on scroll I want only the logo to be relative and scroll away, but that the header is fixed still.
The logo is centered now, but not when I move my mobile to horizontal view it’s not.
This is how it look now which I like: https://www.dropbox.com/s/c74ez1zg67okev5/Bilde%2011.07.2016%2C%2010.59.56.png?dl=0
This is horizontal view that I don’t like: https://www.dropbox.com/s/azh3ovq1jwlnz45/Bilde%2011.07.2016%2C%2011.00.10.png?dl=0
with too much space in header and not centered logo
This is view on scroll where I like the hamburger and white fixed header, but not that the logo is fixed and showing on scroll.
https://www.dropbox.com/s/c8boi9gyhfodzxg/Bilde%2011.07.2016%2C%2011.01.03.png?dl=0
Kindly regards, Mathilde
Hi
I use the zen menu logic plugin and I guess, have the same problem than Koballo:
I don’t speak Spanish and didn’t understand why I repost my problem here:
After installation of zen menu logic (wich works properly as it should), the search button in the menu disappeared (magnifying glass). I tried several configs but nothing could help me out.
Is there any possibility to get the search back into menu? (without too much manipulation in config.php)
thank you!
-
This topic was modified 9 years, 4 months ago by
Schmiddy.
Hi,
As mentioned the logo is already relative. Are you trying to show the logo within the header area? the height of the logo is more than the header so it is bound to extrude. Reduce the logo height to around 55px. If this is not what you want please post us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)
@media only screen and (max-width: 767px) {
.responsive .logo a, .responsive .logo img {
height: 50px !important;
max-height: 50px !important;
top: -20px!important;
}}
Best regards,
Vinay
Hey kirillko,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
.socket_color table, .socket_color tr:nth-child(odd){
background: transparent;
}
tr:first-child th, tr:first-child td {
border-style: none!important;
border-top-width: 0!important;
}
.page-id-126 input[type='text'],.page-id-126 select, .page-id-126 input[type='email'] {
background:#FFF!important;
}
Best regards,
Vinay
Hey webdevsd,
Please try adding the page ID that is available when you right click and inspect the page body tag to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
/* About page */
.page-id-9 {
font-size: 50px!important;
color: #d13d32!important;
padding-top: 10px!important;
}
Best regards,
Vinay
-
This reply was modified 9 years, 4 months ago by
Vinay.
Hi Vinay,
Thanks, now it’s all relative, but it’s only the logo that I wish to be relative, not the header, and the hamburger (which is fixed). And also that the logo still overlaps the content like on desktop view. Is it possible to have the fixed white header still? And also get the content more up? And how to get logo centered fully both in mobile and tablet also while moving the screen horizontal?
Thanks a lot,
Kindly regards, Mathilde
I am using the following:
.about {
font-size: 50px;
color: #d13d32;
padding-top: 10px;
}
I use it in the custom .css field and attempt to add it on http://www.mr-senor.com/about-us/ but it does not work. is there an issue with the custom .css area? My other custom .css works. Please advise
Hi,
The logo is relative already but the header is positioned fixed so logo appears to be fixed since it is inside the header. To make the header relative Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width: 767px){
.responsive #top #wrap_all #header {
position: relative!important;
}}
Best regards,
Vinay
Thank you Ismael,
1. Here is a screenshot of the logo on the example site.
https://dl.dropboxusercontent.com/u/1049926/footer%20with%20logo.png
2. Here is the site to see the logo in the footer. You must look at it on a desktop computer. The logo does not appear on mobile.
https://huckberry.com
3. I don’t want the logo to be in a column next to other columns. I want the logo to be under the columns in the footer of the site below. IS this possible?
a. For future reference, how would I add a logo in a text widget? Would I have to use a link to the logo or could I drag the logo into the text widget?
b. In what way would I have to edit the footer.php file.
I’ve developed several sites with Enfold and I’d like to be able to repeat this process once I figure out the best way to do it. Please talk to me slowly when explaining :)
Thank you Ismael,
Jas
Hi,
We modified the code a bit. The breadcrumb is now located above the single product title. Use the following css code if you want to adjust the position of the breadcrumb:
.yoast_product_breadcrumb {
position: absolute;
right: 0;
top: 20px;
}
Best regards,
Ismael
Hey guys,
I have attached an image for a reference to what I’m talking about.
It’s a simple landing page, with a full page slider, but for some reason there is a thin line of padding on the top that refuses to disappear.
I have tried many solutions as provided by yourselves in various other threads but none seem to be working for my issue.
All ‘padding-top‘ for #main, header, avia-blank are set to 0 but this small line will not disappear, (you can see it between the website slider and the WordPress menu).
Please provide a solution for this problem, (the height of the section is larger on a mobile), it is really effecting the efficiency of the page.
Thanks!
-
This topic was modified 9 years, 4 months ago by
Portfoli0CSG.
Hi Guys.
Our contact page has suddenly stopped working. The page is below
Hi,
The top level pages or menu items do not display because the font color is set to be the same as the background. Can you find this css code in the QuicK CSS field?
#top #wrap_all .header_color.av_header_transparency, #top #wrap_all .header_color.av_header_transparency .phone-info.with_nav span, #top #header.header_color.av_header_transparency .av-main-nav>li>a .avia-menu-text, #top #header.header_color.av_header_transparency .av-main-nav>li>a .avia-menu-subtext {
color: #4670fa;
}
If you can’t find that css code, add this one:
#top #wrap_all .header_color.av_header_transparency, #top #wrap_all .header_color.av_header_transparency .phone-info.with_nav span, #top #header.header_color.av_header_transparency .av-main-nav>li>a .avia-menu-text, #top #header.header_color.av_header_transparency .av-main-nav>li>a .avia-menu-subtext {
color: #ffffff !important;
}
Best regards,
Ismael
Hi!
Did you generate your own api key and specify the http referrers in your google api console? Please create a new thread with the url to the site and the login credentials. Related thread here: https://kriesi.at/support/topic/enfold-google-maps-widget-not-working/#post-659066
Regards,
Ismael
Hey!
@promat: Thank you for the additional info. I don’t know if the extra steps are required because the google maps element worked including the “Fetch Coordinates” button after adding the snippet provided here: https://kriesi.at/support/topic/content-element-google-maps/#post-656399
And make sure that the http referrers are specified correctly in your google project or google api console: https://kriesi.at/support/topic/content-element-google-maps/#post-656399
Cheers!
Ismael
https://developers.google.com/maps/documentation/javascript/get-api-key#get-an-api-key
1. Create or select a project -> Continue -> Credentials -> Accept requests from these HTTP referrers (websites) (Optional) -> create
“Accept requests from these HTTP referrers (websites) (Optional)” – Here you need to key-in 2 URL like below (with your own domain name) :
*.yoursite.com/
*yoursite.com/
2. Add below code into your child-theme functions.php, and replace the “AIzaSyAidX34J-pkIHmOUFdVrt05MpzDHz-VZUk” key below with the key your just create above .(credit to @Ismael) – https://kriesi.at/support/topic/content-element-google-maps/#post-656399
function ava_googlemaps_apikey() {
$prefix = is_ssl() ? “https” : “http”;
wp_deregister_script(‘avia-google-maps-api’);
wp_register_script( ‘avia-google-maps-api’, $prefix.’://maps.google.com/maps/api/js?key=AIzaSyAidX34J-pkIHmOUFdVrt05MpzDHz-VZUk’, array(‘jquery’), ‘3’, true);
wp_enqueue_script(‘avia-google-maps-api’);
}
add_action(‘init’, ‘ava_googlemaps_apikey’);
3. any FTP client (filezilla) browse into /wp-content/themes/enfold/js/. Copy the file shortcode.js to your local computer. Open it in a text editor and locate line 458
src: ‘https://maps.googleapis.com/maps/api/js?v=3.24&callback=aviaOnGoogleMapsLoaded’
Now append your key to that line:
src: ‘https://maps.googleapis.com/maps/api/js?v=3.24&callback=aviaOnGoogleMapsLoaded&key=Put_your_google_api_browser_key_here’
(same key you replace on functions.php = Put_your_google_api_browser_key_here)
The same change must be made to the file /wp-content/themes/enfold/config-templatebuilder/avia-template-builder/assets/js/avia-element-behavior.js on line 55 like above shortcode.js.
Overwrite/replace the change files via FTP client, and remember this file will be overwritten again with the next update.
(credit to @mensmaximus) – https://kriesi.at/support/topic/google-maps-7/
Hi,
A few explanations why this is happening can be found on this thread: https://kriesi.at/support/topic/color-background/#post-420028
If you have more questions, please feel free to create a new thread.
Best regards,
Ismael
Hi,
Glad that demo is working now. For additional questions or inquiries, we kindly ask you to open a new thread.
Related link: https://kriesi.at/support/topic/enfold-google-maps-widget-not-working/#post-657900
Best regards,
Ismael
Hi, we have been losing a lot of time trying to customise the spacing at the top of http://rubicab.com.au
What we want to achieve is:
1. MUCH LESS WHITE SPACE AROUND THE TEXT which says
We Design, Supply & Build Outdoor Decking, Fencing Projects, Granny Flats with Innovative and Low Maintenance Building Materials
I have other issues which might impact on this about the logo but since I was instructed to do one ticket for each issue here it is,
I tried the suggestion from Andy
1.) Try this code inside Quick CSS field:
.container {
padding: 0px;
}
and no change was visible.
I tried the first change. No difference. Please check it yourself. I will repeat just the first part of the problem raised. Make the ticket only about this issue.
Hi, we have been losing a lot of time trying to customise the spacing at the top of http://rubicab.com.au
What we want to achieve is:
1. MUCH LESS WHITE SPACE AROUND THE TEXT which says
We Design, Supply & Build Outdoor Decking, Fencing Projects, Granny Flats with Innovative and Low Maintenance Building Materials
I have attached an image of a header format that I like. I like the idea of being able to add more information above the menu.
I like the format of the logo taking up 50% of the area and then 25% and 25% for the additional info. Having the call to action (schedule an appointment) being so visible with the phone number above it is great.
Is it possible at all to have this type of setup above the navigation menu?
My first guess is perhaps somehow turning the top into the similar function of the footer area where you can have that column type setup?
I am obviously clueless on how this would be created or if it can be accomplished.
Any ideas or solutions would be greatly appreciated, I think this would really be a good option to take advantage of that valuable space.
Thank you.
I’ve created a block of code with hidden content to work as popup.
When working with Avia layout builder noticed that my codeblock regularly simply disappears.
Every time I have to restore it from the previous revision.
Here is the example of my codeblock content:
<div id="test-popup" class="white-popup mfp-hide">[av_slideshow size='gallery' animation='fade' autoplay='true' interval='4' control_layout='av-control-hidden' perma_caption='aviaTBperma_caption' custom_class='']
[av_slide slide_type='image' id='428' video='http://' mobile_image='' video_ratio='16:9' title='' link_apply='' link='lightbox' link_target='']
<span style="max-width: 350px;">THIS IS A TITLE</span>
This is a description. This is a description. This is a description. This is a description. This is a description. This is a description. This is a description. This is a description. This is a description. This is a description. [/av_slide]
[av_slide id='497'][/av_slide]
[av_slide id='548'][/av_slide]
[av_slide id='499'][/av_slide]
[/av_slideshow]
[av_heading heading='TITLE' tag='h2' style='blockquote modern-quote modern-centered' size='50' subheading_active='subheading_below' subheading_size='25' padding='25' color='#000000' custom_font='' custom_class='']
Subtitle
[/av_heading]
[av_button label='Brochure' link='manually,http://domain.com/wp-content/uploads/2016/07/file.pdf' link_target='' size='x-large' position='center' icon_select='yes' icon='ue84e' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff' custom_class=''] [av_button label='Press Article' link='manually,http://domain.com/wp-content/uploads/2016/07/file2.pdf' link_target='' size='x-large' position='center' icon_select='yes' icon='ue84d' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff' custom_class='']
</div>
Maybe, it is neccessary to check some options http://imgur.com/22fDJQq
@jonmnight
As a BBQ fan, I was interested in checking out the site you posted. However, I don’t get the site at all. What is that URL? A store #? Maybe it’s just that I need to see the full site. Clicking on Classic does nothing. Also, there is an icon/image broken at the top.