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,

You have a lot of options to open an image to a new window.

1.) Insert a text block then add an html tag. Something like this

<a target="_blank" href="YOURURLHERE"><img src="YOURIMAGEHERE" /></a>

2.) You can edit config-templatebuilder > avia-shortcodes > image.php then find this code

$output.= "<a href='{$link}' class='avia_image ".$meta['el_class'].$this->class_by_arguments('align' ,$atts, true)."'><img class='avia_image {$class}' src='{$src}' alt='' /></a>";

Replace it with

$output.= "<a target='_blank' href='{$link}' class='avia_image ".$meta['el_class'].$this->class_by_arguments('align' ,$atts, true)."'><img class='avia_image {$class}' src='{$src}' alt='' /></a>";

3.) This is the rendered html tag when using the Image shortcode via AviaBuilder. You can copy and paste it manually. Change the anchor tag link and the image url.

<a href="http://www.yourlinkhere.com" class="avia_image avia-builder-el-49 el_after_av_slideshow_full avia-builder-el-no-sibling avia-align-center "><img class="avia_image avia_animated_image avia_animate_when_almost_visible right-to-left avia_start_animation" src="http://localhost/kriesi/enfold/wp-content/uploads/2011/12/imac_big_demo-300x180.png" alt=""><span class="image-overlay overlay-type-extern" style="opacity: 0; left: 0px; top: 0px; display: block; height: 180px; width: 300px;"><span class="image-overlay-inside"></span></span></a>

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

Hi,

Please refer to these links for the header background

https://kriesi.at/support/topic/mega-menu-bug#post-108100

https://kriesi.at/support/topic/header-background-image-2

To change the sidebar background, use this on your Quick CSS

.sidebar {

background: red;

}

Regards,

Ismael

Hi,

Font use is

h1, h2, h3, h4, h5, h6, tr.pricing-row td, #top .portfolio-title, .callout .content-area, .avia-big-box .avia-innerbox {

font-family: Open Sans, 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;

}

PNG text images is preffered when using the LayerSlider WP.

Regards,

Ismael

Hi,

Please add this on your custom.css to change the menu color

.main_menu a {

color: white !important;

}

To change the active page color, use this

.current-menu-item > a {

color: black !important;

}

For the submenu hover, you can use this

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

background-color: white;

color: orange !important;

}

Regards,

Ismael

Hi,

Is Desktop Wallpaper a category for your portfolio entries? Please make it a category then do Dude’s code above. This will only work if you are not using the Advance Layout Editor for your portfolio items.

Regards,

Ismael

Hi,

1.) The sidebar expands when there are widgets present. It has no definite height. You need a javascript of some sort to make the sidebar inherit the height of the content area. A simple solution is to define a minimum height for the sidebar but this is not flexible and may not be appropriate for all types of pages. Add this on your Quick CSS or custom.css

#top #main .sidebar {

background: red;

min-height: 600px;

}

2.) You can add this on your custom.css or Quick CSS.

.widgettitle {

border-bottom: 1px dotted red;

padding-bottom: 10px;

}

3.) To add a bottom separator, you can use this

.widget {

border-bottom: 1px solid black;

}

Regards,

Ismael

Hi,

Glad they are fixed.

For the header background, please follow these links.

https://kriesi.at/support/topic/mega-menu-bug#post-108100

https://kriesi.at/support/topic/header-background-image-2

Cheers,

Ismael