acParticipant
I have the G+ logo showing in the top header which is fine on desktop but doesn’t look right on mobile as it takes up a whole extra line – can I make it not show at the top on mobile
Yes it does, but without the custom css the logo appears without any padding on the desktop version which doesn’t look great as it sits right on top of the navigation. I’ve adjusted the custom header height and made the very top bar white which helps a bit. Would it be a good solution to add some white space on the logo jpg above and below, it seems that any use of padding makes the logo smaller or disappear on mobile version.
thanks
Hi!
1- You can edit your columns and change alignment to top instead of middle as it currently is.
2- Please try using a plugin such as this one – https://wordpress.org/plugins/wordpress-seo/ to have more control over title tags
Best regards,
Yigit
Hi!
Replied you here – https://kriesi.at/support/topic/elements-shift-on-load/
Let us continue there :)
Cheers!
Yigit
Hi Ghuddi
I don’t know if you already fixed your problem but this seems to fix it for me:
1. Set the colorsection to: at least 75% height of browser window (instead of 100%)
2. Add the following to the custom CSS (replace ID-OF-MY-COLORSECTION with the ID you have set for your colorsection):
#top #ID-OF-MY-COLORSECTION .av-section-video-bg video {
top: 0px !important;
}
#top .av-section-with-video-bg {
position: inherit !important;
}
hope this helps you too!
Hi!
this is a question for WPML support. The answer is here: https://wpml.org/forums/topic/changing-the-language-names/#post-117673
Best regards,
Andy
Hi!
try to add an !important:
#header {
top: 50% !important;
transform: translateY(-50%) !important;
}
Clear browser cache and hard refresh a few times.
Best regards,
Andy
Hey!
as far as I know it’s not restricted by the vendors of those devices, that’s why you need to use a fallback image on mobile devices. However, maybe this will work for you: https://kriesi.at/support/topic/video-background-mobile/#post-252474
Cheers!
Andy
I think I found a solution….
1. Set the colorsection to: at least 75% height of browser window
2. Add the following to the custom CSS (replace ID-OF-MY-COLORSECTION with the ID you have set for your colorsection):
#top #ID-OF-MY-COLORSECTION .av-section-video-bg video {
top: 0px !important;
}
#top .av-section-with-video-bg {
position: inherit !important;
}
Looks like this is working for me, hopefully this could be useful for someone else too
Okay I seem to have resolved the iPad/tablet issue.
Please can you still help me with the mobile menu issue?
Should I put @media only screen and (min-width: 767px) {
}
above the whole menu element…so above
ul#avia-menu { position: relative; top: -120px; }
#header_main_alternate { z-index: 4; }
li#menu-item-117 .avia-menu-text, li#menu-item-117 .avia-menu-fx { opacity: 0; }
ul#avia-menu {
left: 27px;
}
or do i need to place it after this…before the different menu bits?
Greetings from Vienna!
Sorry to start up an old topic, but I found out, that the css for the banner which worked good, does not work now!
I changed the header image and all of sudden it does not work any more. the header is still small whatever size I try to give.
Can you please have a look -> see private content
best regards
Gerhard
Hi Josue
I have tried that but it doesn’t seem to work?
Also when I view on a tablet (iPad and google), the main menu is running over the logo – it hasn’t split as per the view on desktop. I have tried in responsive and non responsive mode and it still looks the same???
Below is the complete CSS I am now using – without the new @media only screen…. code
I thought it might be best to check that this was right, before doing anything else.
Many thanks for your help
Faye
ul#avia-menu { position: relative; top: -120px; }
#header_main_alternate { z-index: 4; }
li#menu-item-117 .avia-menu-text, li#menu-item-117 .avia-menu-fx { opacity: 0; }
ul#avia-menu {
left: 27px;
}
li#menu-item-2286 {
left: -160px;
}
li#menu-item-573 {
left: -160px;
}
li#menu-item-574 {
left: -160px;
}
li#menu-item-572 {
right: -90px;
}
li#menu-item-1175 {
right: -90px;
}
li#menu-item-1214 {
right: -90px;
}
Hi Vinnie, I’ve tried it… but as the layerslider is then still on the same page as the background video (allthough in different colorsections) it still causes the black bars to appear…
One thing I did notice is that when I add to my custom CSS the following:
#top .av-section-with-video-bg {
position: inherit !important;
}
the black bars become less wide…. I’m still trying to figure out a solution/workaround
Hi!
Wrap your code with this:
@media only screen and (min-width: 767px) {
}
That way it will only run on desktop.
Cheers!
Josue
Hey!
you are using this code:
#top .avia-menu li:last-child .avia-menu-fx {
width: 100% !important;
}
Change it to a different value, something like:
#top .avia-menu li:last-child .avia-menu-fx {
width. 72% !important;
}
and adjust as needed.
Best regards,
Andy
Hey!
ich habe in deinem Quick CSS Feld jetzt noch einen padding-top Wert hinzugefügt und nun scheint es für mich gut auszuschauen. Kannst du das bitte bestätigen? oder sagen, wenn du dabei noch Hilfe brauchst?
Gruß,
Andy
Hi!
versuche es mit diesem Code im Quick CSS Feld zu kontrollieren:
.hr.hr-custom.hr-left {
margin-top: 5px !important;
margin-bottom: 5px !important;
}
Gruß!
Andy
Hey!
hiermit kannst du es eckig machen:
.avia-testimonial-image {
border-radius: 0px;
}
.avia-testimonial-image img {
border-radius: 0px;
}
Die Größe kannst du hiermit verändern:
#top .av-large-testimonial-slider .avia-testimonial-meta .avia-testimonial-image {
width: 100px;
height: 138px;
}
Gruß,
Andy
Hello Support,
I have a Problem. One of my pages don’t load anymore in the Editor. It Keeps showing the loading wheel. But its only on this page. On the other it works.

Then i want a space between the top and the Header. The same under the Footer, so i can see a bit from the Background and it not suck to the top and the button of the browser:

Thanks and Greetings
Jannis
Hi everybody,
when I press the Cart button in the top Main menü there will be opne a Pop Up menü.
In this Pop Up menü I want to delete the “Kasse” button.
Please see the attached picture.
Thanks a lot !!
Hey!
Sorry for the delay in response.
I actually noticed that you have asked that question here as well https://kriesi.at/support/topic/woocommerce-my-account-and-shopping-cart-button-not-seen-through-out-website/
I will look into that issue there in that thread so that we can better keep a track of the issues and to avoid answering you twice as well. And since you also already posted your login credentials in that thread as well.
Regards,
Jordan
Hi,
Sorry for the late reply. Not sure what you mean by your last reply, are you looking to hide the top bar on this page (private)? Looks like you managed to do it already?
Thanks,
Rikard
Hi,
Sorry for the late reply. Glad you got it working, please let us know if you should need any more help on the topic.
Best regards,
Rikard
Hi!
That is the perfect way to show the LS on mobile version only. You can use the css below to hide the desktop version in mobile and hide the mobile version in desktop…
/*Show only in mobile or desktop*/
@media only screen and (min-width: 769px) {
.only_mobile { display: none !important; }}
@media only screen and (max-width: 768px) {
.only_desktop { display: none !important; }}
Cheers!
Vinay
Hi,
Sorry for the late answer. I couldn’t see anything like that on a minimised desktop browser or on iphone 6 both using Chrome. In what browser are you getting this error? Or maybe you managed to get it fixed?
Best regards,
Rikard
Hey!
Please refresh the browser cache and review the site now we have added the below css
/* Fullwidth Insta */
.responsive #top #wrap_all .fullwidth-insta .container {
width:100%!important;
max-width:100%!important;
}
Regards,
Vinay
Hey tanssu!
Please take a look here
https://kriesi.at/support/topic/move-featured-image-below-post-title-date-etc/
let us know if that works out for you properly
Regards,
Basilis
Hey!
Meaning you wish to have a another class added to the logo with the class .third-logo? You can add the extra class to the code by putting it next to third-logo.
$sub .= "<a class='third-logo only_desktop' href='#'><img src=' _IMAGE_URI_HERE_' /></a>";
Assuming that you have a media query call using the only_desktop class then it should also apply to the logo since it now has that class as well.
Let me know if we are still misunderstanding what you are trying to achieving.
Cheers!
Jordan
Hi BetuwePC!
Thank you for using Enfold and we are very sorry for the delay.
1.) Please add this in the Quick CSS field:
#header_meta .container {
min-height: 50px;
}
2,.) Disable the search icon then add this in the functions.php file:
add_filter( 'avia_meta_header', 'avia_append_search_nav_mod');
function avia_append_search_nav_mod()
{
ob_start();
get_search_form();
$form = htmlspecialchars(ob_get_clean()) ;
$items = '<div id="menu-item-search" class="menu-item-search-mod menu-item menu-item-search-dropdown">
<a href="?s=" rel="nofollow" data-avia-search-tooltip="'.$form.'" '.av_icon_string('search').'><span class="avia_hidden_link_text">'.__('Search','avia_framework').'</span></a>
</div>';
echo $items;
}
3.) I’m sorry but you can’t remove the portfolio slug in the url. However, you can change it in the Settings > Permalinks >
Portfolio Items Base field.
4.) Add this in the Quick CSS field:
body .column-top-margin {
margin-top: 20px;
}
5.) Use the button element of the advance layout builder.
6.) I’m sorry but this will require modification on the theme. Please contact codeable: http://kriesi.at/contact/customization
If possible, please open a single thread or post for each inquiry. You will usually get a faster response that way.
Best regards,
Ismael