Hi Mike,
While waiting to receive a response from “Motopress”, I did a local installation on Mamp, I imported the database of the site in production (see site url in the Private Content), then I installed and activated Enfold.
For the moment I have not seen any real compatibility problems.
The big problem is the formatting of the plugin’s post taxonomies (Accomodation).
Unfortunately, all the work you did in your demo cannot be used with the Motopress plugin :(
And therefore, to make the booking’s content pleasant and captivating, there is a lot of css work to do :(
The ideal… sorry if I say it,
but it would be for Enfold to release another Hotel demo that uses the (free) MotoPress plugin.
But I understand that I am making an unacceptable request on your part 😳.
Best regards,
Oriano
@Guenni007 Yeah! Thanks! That’s what I was looking for! I suppose the number in if( is_page(3) ) can be an array also?
@Nikko question regarding only desktop view. Mobile should be hamburger menu anyway.
Thank you!
Hey,
Please add the following code to the Quick CSS field in Enfold theme options > General Styling tab:
#scroll-top-link:hover {
color: white;
}
Cheers!
Yigit
Hi, is it possible to use different widths for different elements on pages?
I’d like to have a width of approx. 960px for my website in general. So I’ve set this in the Enfold’s layout settings. This width is usable for:
– Menu’s (primary, secondary)
– Featured image (in case it’s visible at the top of a single post)
– Grid elements (like post grids etc)
– Footer
However, for the text content I’d like to have a more readable width of approx. 720px. This width is more suitable for:
– Content, text
– Forms
So: what is the best/easiest way of playing with different widths for certain parts of a page?
PS For static pages I use Enfold’s Page Builder. However, for single blog posts I use the default editor (not the Enfold’s Page Builder).
-
This topic was modified 2 years, 6 months ago by
Marc Bijl.
Hello Mike,
I contacted MotoPress support, to ask if I can use their plugin Hotel Booking Pro (I need the PRO version services 😳 ) on Enfold.
I hope to have a positive response.
Best regards
Oriano
Also I can see that the url becomes different and this to the domain —> ?avia_forced_reroute=1#top Why? and how can I change?
Hi,
Thank you for the update.
Did you purge the cache before testing the page? You may have to toggle or temporarily disable the Enfold > Performance > File Compression settings as well. Please make sure to perform a hard refresh before testing the page.
The code above should adjust the size of the h1 element. If you want to change the size of the h2 element manually, just copy the css rule above, then replace all instances of the h1 selector.
#top #wrap_all .header_color h2,
#top #wrap_all .main_color h2,
#top #wrap_all .alternate_color h2 {
font-size: 24px;
}
Or as suggested above, you can adjust the font size settings in the Enfold > General Styling > Typography panel.
Best regards,
Ismael
Miraculously it has gone, Nikko,
I have a delay in the refreshing of the site it seems. In spite of emptying cache various times.
The aim is to have both burger menu and social icons on mobile screen.
The question in this topic was how to add a scroll-to-top on the mobile screen.
Thanks a lot!
Henning
Hello,
I almost finished my website but I could see that some styling aren’t showing properly, I share you a screenshot to see it in a quickway.

How can I adjust these columns in notebook version? As you can see in Desktop is correct and in mobile too.
Also in smartphone version I couldn’t see the buttons on main slider, and I don’t know how to change to see it properly.
Thanks in advance!
On my blog, https://gatehealing.com/blog when you have phone in portrait orientation, the blog page will not scroll beyond the image for the first post. You can pull the page up, and use more fingers to keep pulling up, but as soon as you release, it pops right back up to the top of blog.
Scrolling works fine in landscape orientation.
I have a screencast of the issue if you cannot recreate it on another phone.
Hi WebbR,
Is the hamburger menu on desktop or only in mobile?
Best regards,
Nikko
Hi Daniel,
You can try to use this CSS to put some overlay color:
#top .av-masonry-outerimage-container:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 99;
width: 100%;
height: 100%;
opacity: 0.5;
background-color: blue;
}
#top .av-masonry-outerimage-container:hover:before {
opacity: 0;
}
Then on the page you’ll need to add this style and use ACF color picker to change blue with the color you selected.
I hope it helps.
Best regards,
Nikko
Hey amanda-mdllc,
Thank you for the link to your site, to add the background image to the header try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
#header_main {
height: 170px;
background: url(https://campfire-sunshine.org/wp-content/themes/CampFireCouncilTheme/images/header-small.jpg) no-repeat center top;
background-size: cover;
}
After applying the css, please clear your browser cache and check.
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
Best regards,
Mike
Hi,
I am trying to figure something out with the top menu bar at http://www.coloradorunnerevents.com.
1. When I am look at my website, it looks perfect on my desktop. But, on mobile it pretty much takes up the whole screen. So, how can I just remove it on mobile? I can’t seem to find a setting for that. See screenshot below:
Mobile: https://www.coloradorunnerevents.com/wp-content/uploads/2023/10/capture3.png
2. When I am logged into my website, it looks perfect on my desktop. When I look at my website when I am logged out, it pushes the menu down overtop of the screen. See screen shots below:
Logged in: https://www.coloradorunnerevents.com/wp-content/uploads/2023/10/Capture.jpg
Logged out: https://www.coloradorunnerevents.com/wp-content/uploads/2023/10/Capture2.jpg
Can you help me figure out why the top menu is doing that when I am logged out? This is on Firefox, but it is the same on other browsers.
Hey Oriano,
I tried searching for Motopress Hotel Booking Plugin but I didn’t find any results for using it with Enfold, I did find that they offer a free version: Hotel Booking Lite so assuming that it is built the same way, perhaps you can test with it and ask the plugin author if it works in the same way.
Best regards,
Mike
Dear All,
I tried to increase the social media buttons.
Emptied my cache with: W3 total cache plugin.
Somehow they appeared larger shortly and then back to small again.
I added this to the Quick CSS.
#top #header .social_bookmarks li a {
font-size: 20px;
}
Please help!
Thanks,
Henning
Hi Henning,
Please add the following code to the Quick CSS field in Enfold theme options > General Styling tab:
#top .special_amp {
font-size: inherit;
line-height: 1;
font-style: normal;
font-family: inherit;
font-weight: inherit;
}
Best regards,
Yigit
Hey,
Please refer to this post: https://kriesi.at/documentation/enfold/footer/#display-scroll-to-top-button-mobile
If this doesn’t work for you, please check if you have any errors in your custom CSS. You can use this website to do that http://csslint.net/.
Regards,
Yigit
ok – the page with version 4.5.2. does not have this option (so it has all these -webkit- prefixes included).
The default on 5.6.6 is: modern browsers only. – So the missing vendor prefixes could have been a reason.
Isn’t the most logical explanation that something changed in the Enfold code between those two versions? Probably something having to do with either burger menu or with logo/menu settings or with mobile settings.
see here an excerpt of legacy-enfold.css :
/*
Contains vendor prefixed CSS rules that have been removed from core files because no longer needed
Cannot be minified because old rules are removed !!!!
@source enfold/css
@since 5.6.3
*/
…
.av-burger-menu-main{
-webkit-transition: padding 0.3s ease-out;
}
.av-hamburger--spin-r .av-hamburger-inner::after {
transition: bottom 0.1s 0.34s ease-in, -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.av-hamburger--spin-r.is-active .av-hamburger-inner {
-webkit-transform: rotate(-225deg);
}
.av-hamburger--spin-r.is-active .av-hamburger-inner::after {
-webkit-transform: rotate(-90deg);
-webkit-transition: bottom 0.1s ease-out, -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#av-burger-menu-ul li a{
-webkit-transition: none;
}
#top #wrap_all #av-burger-menu-ul > li{
-webkit-transition: opacity 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
-webkit-transform: translate3d(0,0,0); /*fixes disapearing in ios*/
}
.avia_desktop.avia-safari #top #wrap_all #av-burger-menu-ul > li {
-webkit-transform: none;
}
.html_av-overlay-side .av-burger-overlay-scroll{
-webkit-transform: translateX(350px); transform: translateX(350px);
-webkit-transition: all 0.5s cubic-bezier(0.75, 0, 0.25, 1);
}
etc. etc. …
these are all concerning to hamburger – and a lot more
___________
What happend if you use not the smaller hamburger icon?
-
This reply was modified 2 years, 6 months ago by
Guenni007.
did you see the download link in: https://kriesi.at/support/topic/icon-box-numbers-icons/#post-1421348
Link: https://webers-webdesign.de/numbers.zip
Edit here – because topic closed already:
html body [data-av_iconfont="numbers"]::before {
font-family: 'numbers';
font-weight: bold !important;
font-size: 1.6em;
position: relative;
left: -5px
}
to center the numbers !
Hi,
Great, I’m glad to hear that the problems are gone. Please let us know if you should need any further help on the topic, or if we can close it.
Best regards,
Rikard
Hey!
Here is the code we provided you for that: https://kriesi.at/support/topic/arrow-scroll-up/#post-1416249.
Best regards,
Yigit
Hi Ismael,
at the very top of the second pic you see it (hopefull).
The mails reads as follows:
Guten Tag Herr Strunk! vielen Dank für Ihre Reservierungsbestellung für den Wandkalender “Norddeutschlands Farben”, mit der Sie sich Ihr(e) Exemplar(e) gesichert haben. Hier kommt die Zusammenfassung Ihrer Eingaben im Bestellformular:
__________________________________________________________
Ihre Nachricht:
Anrede:: Herr
Vorname:: Heinz
Nachname: Strunk
ggf. Firma:: INferno
ggf. Tel. (für Rückfragen):: 0123
E-Mail:: (Email address hidden if logged out)
Straße, Nr.: street 23
PLZ, Stadt:: 21465 Reinbek
Anzahl:: 2
Ich bestelle als:: Unternehmen
Versand oder Abholung:: Versand
ggf. Nachricht oder Frage (z.B. zu Lieferung oder zu Preisanfragen ab 5 Stk.)::
Was beste Preis?
Ich stimme den AGB und Datenschutzbestimmungen zu.: true
__________________________________________________________
Sobald die Kalender geliefert werden, erhalten Sie weiteren Infos zur Abholung bzw. zum Versand.
Herzliche Grüße, Ihr Tilman Möller
Zielfoto Hamburg / Tilman Möller
Hofriedeallee 1, 21521 Aumühle
Tel.: +49 (0) 04104 / 699 66 96
http://www.zielfoto-hamburg.de
Hi,
can you tell me if Enfold is compatible with the Motopress Hotel Booking Plugin?
I see that on Enfold Hotel demo you use the WooCommerce Bookings plugin, but it costs too much for my client :(
Best regards,
Oriano
Hey Stilecatalini,
You can override the opacity applied to that element using CSS like this:
#scroll-top-link.avia_pop_class {
opacity: 0.8;
}
Best regards,
Rikard
Hello @Ismael.
No, I did not replace the file. I re-uploaded the file from the source and the error continues to appear if the post type is set to link.
I’ve tested further and the error only occurs with link type posts. Any other post format is fine.
The content of the post is:
<a href="https://www.merchsmerch.com/" target="_blank" rel="noopener">Online Merch from Lowest of the Low!</a>
Mugs? <strong>Check!</strong>
T-shirts? <strong>Check!</strong>
Keychains, hoodies, posters, pins, hats, toques, and more!
[av_button label='Go Shopping!' icon_select='yes' icon='ue859' font='entypo-fontello' link='manually,https://www.merchsmerch.com/' link_target='_blank' size='small' position='center' label_display='' title_attr='' size-text='' av-desktop-font-size-text='' av-medium-font-size-text='' av-small-font-size-text='' av-mini-font-size-text='' margin='' margin_sync='true' padding='' padding_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-margin='' av-small-margin_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-margin='' av-mini-margin_sync='true' av-mini-padding='' av-mini-padding_sync='true' color_options='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' btn_color_bg='theme-color' btn_custom_grad_direction='vertical' btn_custom_grad_1='#000000' btn_custom_grad_2='#ffffff' btn_custom_grad_3='' btn_custom_grad_opacity='0.7' btn_custom_bg='#444444' btn_color_bg_hover='theme-color-highlight' btn_custom_bg_hover='#444444' btn_color_font='theme-color' btn_custom_font='#ffffff' btn_color_font_hover='white' btn_custom_font_hover='#ffffff' border='' border_width='' border_width_sync='true' border_color='' border_radius='' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' hover_opacity='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' css_position='' css_position_location=',,,' css_position_z_index='' av-desktop-css_position='' av-desktop-css_position_location=',,,' av-desktop-css_position_z_index='' av-medium-css_position='' av-medium-css_position_location=',,,' av-medium-css_position_z_index='' av-small-css_position='' av-small-css_position_location=',,,' av-small-css_position_z_index='' av-mini-css_position='' av-mini-css_position_location=',,,' av-mini-css_position_z_index='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-2gs7zi' sc_version='1.0' admin_preview_bg='']
Hey woogie07,
Thank you for the inquiry.
Please try to toggle or temporarily disable the Enfold > Performance > File Compression settings and see if the issue gets fixed. If not, please add this css code.
#top .av-share-box ul {
display: flex;
gap: 12px;
justify-content: space-around;
}
#top .av-share-box ul li {
flex: auto;
}
Best regards,
Ismael
Hey willymagee,
Thank you for the inquiry.
The transparent header is disabled on mobile devices by default, and there is no built-in option to reactivate it. You can however adjust the style of the header on smaller screens using css. In the Enfold > General Styling > Quick CSS field, please add this code.
@media only screen and (max-width: 989px) {
/* Add your Mobile Styles here */
.responsive #top .av_header_transparency #header_main {
border-top: 0;
}
.responsive #top #wrap_all .av_header_transparency {
position: absolute;
background-color: transparent;
border-color: transparent;
border: 0;
}
}
You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings afterward.
Best regards,
Ismael
Hey woogie07,
Thank you for the inquiry.
You can add this css code to adjust the width of the columns on mobile view.
@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */
.responsive #top #main .flex_column.av-b3s6-4c68ef9fc64be5c306ddbb83e1de262e {
width: 100% !important;
display: block;
clear: both;
margin: 50px 0 0 0;
}
.responsive #top #main .flex_column_table_cell.flex_column.av-k05s-f9fce12797e122f4e36413920243833b,
.responsive #top #main .flex_column_table_cell.flex_column.av-t9vy-5272f52a9f41d9430748edfd05e414db {
width: 50% !important;
display: block;
float: left;
}
}
Best regards,
Ismael
Hi
My social share icons are displaying as squeezed up to the left on desktop and mobile on my blog pages.
Can you help?
Thanks