Hey envis,
Thank you for the inquiry.
That is the default style of the language switcher in the theme. If you need to add the submenu indicator, try to add this css code.
#top #header .menu-item-language .dropdown_available {
content: "";
display: inline-block;
margin-left: 0.6em;
vertical-align: middle;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid rgb(201, 201, 201);
margin-top: 0.2em;
}
Best regards,
Ismael
Hi,
Thank you for the inquiry.
We adjusted the code in the Quick CSS field a bit and temporarily disabled the Performance > File Compressions settings.
@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */
#top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a {
font-size: 32px;
line-height: 0.5em;
}
#top #wrap_all #header #av-burger-menu-ul>li.av-active-burger-items {
opacity: 1;
top: 0;
left: 0;
padding: 0.2em 0;
}
}
View post on imgur.com
Best regards,
Ismael
Perhaps the scrolling problem is not an enfold-issue but an WordPress issue. I did not find the CCS-file yet where that class is defined.
The other thread …
“Problem with scroll bar Advanced Layout Editor”
Unfortunately, another thread dealing with the same topic is closed. Support was unable to reproduce the problem.
It lies in the .edit-post-meta-boxes-main class. There overflow is now set to hidden . If I deactivate this in the browser inspector or change it to ‘scroll’, I can work.
Hi,
Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:
#top .menu-item-search-dropdown > a.avia-svg-icon svg:first-child {
z-index: 0;
}
Best regards,
Rikard
hi… I tried but I didn’t solve it.
2 “problems”
– the arrow to go back up on the page disappears in mobile and tablet mode. how to show it?
– the testimonials section, in the mobile version, becomes long and narrow and the arrows remain at the top, not making usability easier.
how to solve?
thanks!!!
Hi Ismael and thanks for your quick reply.
I’ve added the CSS code you sent me in the Quick CSS panel, but that didn’t make any changes to the mobile menu.
In the Advanced Styling Menu –> Menu Links in overlay/slide out , the font size is set to 90 px and on desktop it looks fine, but it seems to be 90 px on mobile view aswll despite adding the CSS code.
I’ve attached the login credentials in Private Content if you want to take a closer look youself.
Hi and thanks again for your help!
This doesn´t work for me – i need the headlines aligned to the content below.
I changed the slider element to a color-element with a fullscreen image on top.
For the headline i created a column (.headlineOverImage) with a negative margin and a white background-color.
My question now: Would it be also possible to adjust just the white background to 100%. (And keep the headings narrower ?)
Hey Scanmark,
Thank you for the inquiry.
You can use this css code to manually adjust the style of the menu items on mobile view:
@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */
.html_av-overlay-side #top #wrap_all .av-burger-overlay li a {
line-height: 1.3em;
height: auto;
padding: 15px 50px;
display: block;
text-align: left;
text-decoration: none;
font-size: 16px;
}
}
Best regards,
Ismael
Hey solf,
Thank you for the inquiry.
Try to add this css to disable the copyright transition:
.avia_desktop .av-masonry-entry:hover .av-image-copyright.av-copyright-left {
transform: none;
}
Best regards,
Ismael
Hey tsays,
Thank you for the inquiry.
You can use this css code to disable the background image of the color sections on mobile view:
@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */
#top .avia-section {
background-image: none !important;
}
}
Best regards,
Ismael
Hi,
Try to add this css code to remove the menu border:
#top .avia-menu.av_menu_icon_beside {
border: 0;
}
Best regards,
Ismael
Hi,
You can do the following steps to re-assign the posts to a different author:
1. Go to Posts > All Posts.
2. Use the checkboxes to select the posts you want to reassign.
3. At the top of the list, select Bulk actions > Edit, then click Apply.
4. In the bulk edit screen, you’ll see a dropdown for Author.
5. Choose the new author, and then click Update.
Let us know if you need more info.
Best regards,
Ismael2
Hi there
I’ve been searching high and low, but I can’t seem to find an answer to this question.
I’m displaing the menu Items for desktop as a Burger menu. I’ve styled it by using the “Menu Links in overlay/slide out” option in “Advanced Styling”.
So far…so good.
The problem is that when I’m adjusting the font size so it looks good on the desktop, it’s way to big on the mobile. Adjusting it so it fits to the mobile, makes the font to small for the desktop.
Can you provide me with a CSS-code that let’s me adjust the font size for either of these?
Hey,
The copyright notice on the images in a Masonry Gallery moves on hover. (class = av-image-copyright av-copyright-left)
How can I stop this?
Thanks, solf
Hi,
Please try this CSS:
@media only screen and (max-width: 479px) {
.responsive #top #wrap_all .main_menu .social_bookmarks {
display: none;
}
}
You need to adjust this CSS though since it’s using !important:
@media only screen and (max-width: 479px) {
#header .social_bookmarks.icon_count_5 {
position: absolute !important;
top: 30px !important;
right: 20px !important;
display: flex !important;
gap: 6px !important;
margin: 0 !important;
padding: 0 !important;
}
}
A more specific selector should do the trick.
Best regards,
Rikard
Hello,
I am trying to add new elements to my page in the avia layout architect. Before the tool bar was sticky, now it scrolls with the page and I cannot add anything new to the middel or end. I am sure that it did not used to be like this. So what happnend? HOw can I get the tools to stay at the top?
Here I got the code from Rikard: Post #1327639
Is there a hook to tie it only to the logo?
Hi,
Thank you for the info.
We may need to login to the site to properly check the issue. Please provide the login details in the private field. In the meantime, try adding the following css code to manually stretch the video and make sure that it covers the entire slider container.
#top .avia_video {
object-fit: cover;
}
Best regards,
Ismael
Hi,
Thank you for the screenshot.
Have you tried applying top padding to the column containing the image? This should push the image downward.
View post on imgur.com
As for the box-shadow, you may need to use a photo editor to apply a shadow effect directly to the transparent image, then re-upload it.
Best regards,
Ismael
Hey webidoo,
Thank you for the inquiry.
It’s possible that some scripts or plugins don’t work well with the current compression settings. You may need to disable compression and use minification only. Another option is to completely disable the default compression settings and use a third-party caching/compression plugin such as Autoptimize, WP Rocket or WP Super Cache.
Best regards,
Ismael
Hey es.design.ma,
Thank you for the inquiry.
You can use this css code to adjust the size of the slider arrows:
#top .av-slideshow-ui .avia-slideshow-arrows.av-visible-prev > a.prev-slide, #top .av-slideshow-ui .avia-slideshow-arrows.av-visible-next > a.next-slide {
width: 30px;
height: 30px;
line-height: 30px;
font-size: 16px;
top: 50%;
margin: -30px 15px 0;
}
#top .avia-slideshow-arrows a.avia-svg-icon svg:first-child {
margin-top: 0;
height: 0.5em;
width: 0.5em;
}
Best regards,
Ismael
on https://kriesi.at/support/topic/center-logo-with-burger-icon-on-right/#post-1481879 it is the setting now.
change font-size to 36px or something else.
#top #wrap_all #av-burger-menu-ul li {
font-size: 36px !important;
}
see: https://kriesi.at/support/topic/center-logo-with-burger-icon-on-right/#post-1481874
it does work on dev tools – so either it had to set something to !important or to have on a selector a higher specificity.
Try:
@media only screen and (max-width: 767px) {
.responsive #top .avia-content-slider-element-container .avia-content-slider-inner .slide-entry-wrap {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.responsive #top .avia-content-slider-element-container .avia-content-slider-inner .slide-entry-wrap .slide-entry {
flex: 1 1 100%;
margin: 0 0 20px !important;
width: unset !important;
}
}
I really need this if you can:
I have “Reviews” area on the home page using “Content Slider”. It has 2 columns on desktop, but how can I have it show just 1 Column on Mobile view?
I know you sent this code below, but it didn’t do anything.
@media only screen and (max-width: 767px) {
#top .avia-content-slider-element-container .avia-content-slider-inner .slide-entry-wrap {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
#top .avia-content-slider-element-container .avia-content-slider-inner .slide-entry-wrap .slide-entry {
flex: 1 1 100%;
margin: 0 0 20px !important;
}
}
font-size is now on :
#top #wrap_all #av-burger-menu-ul li {
font-size: 40px;
}
just change that value
the logo positioning with 37% on the left is not so advisable.
i would first make the header fixed even in between 768 and 989 px.
then make for the nav a determined width – f.e. 170px
#top .av-main-nav-wrap {
float: right;
position: relative;
z-index: 3;
padding: 0 !important;
margin: 0 0 0 15px !important;
}
.header_color.av_header_transparency .av-hamburger-inner,
.header_color.av_header_transparency .av-hamburger-inner::before,
.header_color.av_header_transparency .av-hamburger-inner::after {
background-color: #FFF !important;
}
#top .av_header_transparency .phone-info,
#top .av_header_transparency .social_bookmarks li a {
color: #FFF !important;
}
#top .av_header_glassy.av_header_transparency .avia-menu.av_menu_icon_beside {
border: none !important;
}
#top .main_menu {
width: 170px
}
#top .logo {
width: calc(100% - 170px);
left: unset;
}
#top .logo img {
left: 50%;
transform: translateX(-50%)
}
@media only screen and (min-width: 768px) and (max-width: 989px) {
.responsive.html_mobile_menu_tablet #top #wrap_all #header {
position: fixed;
}
}
@media only screen and (max-width: 767px) {
#header .social_bookmarks {
display: none !important;
}
}
First have a look at the burger opened layout – this is realy nearby your example page – isn’t is?
now your columns – best would be if the section got a custom class that no other sliders are influenced :
look for testing purpose:
@media only screen and (max-width: 767px) {
#top .avia-content-slider-element-container .avia-content-slider-inner .slide-entry-wrap {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
#top .avia-content-slider-element-container .avia-content-slider-inner .slide-entry-wrap .slide-entry {
flex: 1 1 100%;
margin: 0 0 20px !important;
}
}