Hi,

If you want to disable the prettyPhoto feature on Enfold, please open js >avia.js then find this code

//activates the prettyphoto lightbox

if($.fn.avia_activate_lightbox)

$('body').avia_activate_lightbox();

Replace that with

//activates the prettyphoto lightbox

//if($.fn.avia_activate_lightbox)

//$('body').avia_activate_lightbox();

Remove browser cache then reload the page.

Regards,

Ismael

Hi,

I can see that the products are aligning correctly. http://www.learning11.com/la-academia/

Regards,

Ismael

Hi,

You removed something. Please use this instead.

.main_menu a {

color: white !important;

}



.current-menu-item > a {

color: black !important;

}



.header_color .main_menu .menu ul li a:hover {

background-color: white;

color: orange !important;

}



.current-menu-item > a .avia-menu-fx {

background: black;

}



.current-menu-item > a .avia-menu-fx .avia-arrow-wrap .avia-arrow {

background: black !important;

border-color: black;

}



.avia-menu-fx {

bottom: 0;

}

Enjoy the theme. :)

Cheers,

Ismael

Hi,

Unfortunately, this is a bit complicated. Please hire a freelance developer to add this customization on the theme. You can edit the fixed header behavior on js > avia.js.

//check if the browser supports element rotation

function avia_header_size()

{

var win	            = $(window),

header          = $('.fixed_header #header'),

elements        = $('#header_main .container, .main_menu ul:first-child > li > a:not(.avia_mega_div a)'),

el_height       = $(elements).filter(':first').height(),

isMobile        = 'ontouchstart' in document.documentElement,

scroll_top		= $('#scroll-top-link'),

set_height      = function()

{

var st = win.scrollTop(), newH = 0;



if(st < el_height/2)

{

newH = el_height - st;



//header.removeClass('shadow');

}

else

{

newH = el_height/2;

//header.addClass('shadow');

}



elements.css({height: newH + 'px', lineHeight: newH + 'px'});

}



if(!header.length) return false;



if(isMobile)

{

return false;

}



win.scroll(set_height);

set_height();

}

Thanks,

Ismael

Hi,

Open css > shortcodes.css then find this code

@media only screen and (max-width: 767px)  {

.responsive .tabcontainer{border-width: 1px; border-style: solid; border-top:none;}

.responsive .tabcontainer .tab_titles{display:none;}

.responsive .tabcontainer .tab_content, .responsive .tabcontainer .tab

{width:100%; max-width:100%; border-left:none; border-right:0;left:0; top:0; min-height: 0!important;}

.responsive .tabcontainer .tab_content{border-bottom:none; padding:15px 30px; clear: both; }

.responsive .tabcontainer .tab.fullsize-tab{ display:block; margin-bottom:-1px;}

.responsive .top_tab .tab.fullsize-tab{ margin-bottom:0px;}



}

Remove it. Although it does look better when viewing on mobile device.

Regards,

Ismael

Hi,

Please do the following to create a blog page with slideshow.

1.) Edit the page, go to Advance Layout Editor. Under Media Element > Insert a Slideshow. You have three options EasySlider, Fullwidth ES and LayerSlider.

2.) Go Content Element tab, insert the Blog Post element. Configure the options.

3.) To remove the sidebar on that particular page, look for Layout > Layout, select No Sidebar.

If you want to understand how the theme works, please Import the dummy data and watch these videos.

https://vimeo.com/channels/aviathemes

Regards,

Ismael

Hi,

Try to add it on js > avia.js, under this code

(function($)

{

"use strict";



$(document).ready(function()

{

Regards,

Ismael

Hi,

Add this on your custom.css

#socket {

z-index: 0;

}

Regards,

Ismael

Hey,

You can probably fix the alignment using this

.size-full .image-overlay-inside {

left: 160px;

}

Regards,

Ismael

Hi,

You can set it on Enfold > General Settings > Blog Style.

Regards,

Ismael

Hi,

Yes, create a backup of your css modifications when updating.

Regards,

Ismael

Hi,

I’m sorry but I don’t see your secondary menu.

This code should hide it.

#header_meta .sub_menu {

display: none;

}

Regards,

Ismael

Hi,

I will probably do this.

.current-menu-item > a .avia-menu-fx {

background: black;

}



.current-menu-item > a .avia-menu-fx .avia-arrow-wrap .avia-arrow {

background: black !important;

border-color: black;

}



.avia-menu-fx {

bottom: 0;

}

This will make the arrow black on the current page.

Regards,

Ismael

Hello,

Can you give us a link to your website?

Adjust the max-width property.

Regards,

Ismael

Hi,

Maybe this will work.

#header_main_alternate .container {

padding-left: 19%;

}

Use Media Queries to target specific screen sizes.

Regards,

Ismael