Hey mrgoodbeans,

It is possible the theme is not updated correctly and some files are corrupt. Please access the “wp-content/themes” folder via FTP and delete it (Do not rename it as enfold.old) It should be completely deleted and then upload a fresh copy of the theme in the same location. This should fix the issue for you :)

Please make sure to back up your files in case you need to restore it back.

For more info please check the FTP INSTALL section in this link http://graphitivity.com/enfold/docs/how-to-install-enfold-theme/

Best regards,
Vinay

Hey raulangeli,

Please feel free to add the border and other styles to the below code and add it to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

@media only screen and (max-width: 1100px) {
#top .cada-espacio {
	font-size:3vw;	
	line-height:100px;
	display:flex;
	justify-content:center;
	align-items:center;

}}

@media only screen and (max-width: 767px) {
#top .cada-espacio {
	background:gold;
	line-height:normal;
}
}

Best regards,
Vinay

Hi,

Glad we could help!
Please take a moment to review our theme and show your support https://themeforest.net/downloads
To know more about enfold features please check – http://kriesi.at/documentation/enfold/
Thank you for using Enfold :)

Best regards,
Vinay

Hi,

Sorry, I thought it was the logo area you were referring to but it appears you are using a slider to design the site header.
It works nicely as it is right now. To make it sticky will be tricky because a fixed position element will let other elements around it take its place unless it is in a separate container it is not possible to perfectly align a fixed element in a relationship with its neighbour. (This will block the image below so you may have to manually add a white space element manually for each page).

Add the below CSS to Enfold > General Styling > Quick CSS

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

.av-logo-container {
	position: fixed;
	top:0!important;
	background: #f66f00;
	right:0;
	left:0;
	z-index:999999!important;
}

.avia-fullwidth-slider.avia-builder-el-0 {
    border-top: none;
    position: fixed;
    top: 50px;
    z-index: 99;
}

}

If you don’t like the result please try adding the banner as a header background image from enfold options
Enfold > General Styling > Logo area > Background Image

Then Select a suitable header layout from
Enfold > Header > Header Layout > Menu and Logo Position

Set a custom height for the header from
Enfold > Header > Header Layout > Header Size

Best regards,
Vinay

• This reply was modified 7 years, 4 months ago by Vinay.

Hi,

To make the logo area sticky please select “Sticky Header” and “Shrinking Header” From Enfold > Header > Header Behaviour

Best regards,
Vinay

Hey itransact,

The blur filter will blur the elements inside the container to which you apply. If you apply it to the overlay which is “av-burger-menu-ul” it will blur the menu elements.

If you are looking to blur the background when the navigation opens it requires custom js.

Add this code to the Quick CSS section under Enfold > General Styling

.blurMe{
  -webkit-filter: blur(4px);
          filter: blur(4px);
}

Add this at the very end of your themes / child theme’s functions.php file:

function avia_custom_blurry(){
?>
 <script>
jQuery('.av-hamburger').on('click', function () {
    jQuery("#main").toggleClass('blurMe');
jQuery("#main, .logo").toggleClass('blurMe');
});
 </script>
<?php
}
add_action('wp_footer', 'avia_custom_blurry');

Best regards,
Vinay

Hi!

Thank you for the clarification. Even if we use custom CSS the hover feature will not be supported in touch devices due to the browser limitations. However, if you do not like the titles to show on the mobile device we can hide them using custom code.

@media only screen and (max-width: 767px) {
#top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content {
display:none;
}}

Best regards,
Vinay

• This reply was modified 7 years, 4 months ago by Vinay.

Hi,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

/* Portfolio overlay with title */

/* Disable default animation */
#top .grid-entry  a:hover .image-overlay .image-overlay-inside {
    	animation: none;
    }

/* Overlay */
#top .grid-entry .image-overlay .image-overlay-inside:before {
	content:'';
    position: absolute;
    background: #222;
    height: 100%;
    width: 100%;
    border-radius:0;
    top: 0;
    left: 0;
    margin: 0;
    }
/* Remove default title below */
.grid-content .avia-arrow,
#top .grid-entry  .grid-content {
	display: none;
}

/* Display title on hover*/
.grid-entry a:hover:before {
	content: attr(title);
	position: absolute;
	width: 100%;
	z-index: 1000;
	text-align: center;
	opacity: 1;
	font-size: 18px;
	color: #ffffff !important;
	top: 50%;
	transform: translateY(-50%);
	animation: avia-fadein 0.75s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275)  !important;
}

Best regards,
Vinay

Hi,

We have added the below CSS to Quick CSS section. Please review the site :)

/* Logo margin*/
#top .logo,
#top .logo a{
	margin:15px 0;
}

/* Center menu */
.av-main-nav-wrap ul {
    display: flex;
    justify-content: center;
}
/* Social icon size*/
#top #header .social_bookmarks li a {
    font-size:18px;
}

Best regards,
Vinay

Hey oscarmo,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

/* Sticky header on mobile */
@media only screen and (max-width: 767px) {
  .responsive #top #main {
  	/* Margin top value should be equal to header height*/
    margin-top: 180px;
  }
  .responsive #top #wrap_all #header {
    position: fixed;
  }
}

Best regards,
Vinay

Hi,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

#top .header_bg {
    background: #FFF!important;
}
@media only screen and (min-width: 768px) {
#top .header_bg {
    background: #FFF!important;
}}

Hope this helps :)

Best regards,
Vinay

Hey Colin,

I saw your site but it’s not clear what you are trying to achieve?

To hide something on desktop please use the class “mobile-only”

First, enable Custom CSS class name support.
Create your desktop view with all the elements in place.
Below the desktop view element which you want to replace in mobile go ahead and create your element that should be shown in the mobile view.
Hide the desktop view element by using the CSS class name “mobile-only”.
Hide the desktop element in mobile view by using the CSS class name “desktop-only”.
Finally add the custom CSS in Enfold > General Styling > Quick CSS or in your child theme styles:

 /*----------------------------------------
// CSS 
// Toggle view
//--------------------------------------*/

/* Desktop */

.mobile-only{
	display: none;
}
.desktop-only{
	display: block;
}
/* Mobile */
@media only screen and (max-width: 767px) {
.mobile-only{
	display: block!important;
}
.desktop-only{
	display: none!important;
}}

Let us know if you have any questions.

Best regards,
Vinay

Hi,

To create a header as per your screenshot

1. Select “Logo above menu below” from Enfold > Header > Header Layout > Menu and Logo Position

2. Create a header widget area and check the header widget position section on this link http://graphitivity.com/enfold/docs/header

3. Enable debug mode https://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/

4. Create a fullwidth submenu element with burger menu option enabled and copy the shortcode to the widget area.

Best regards,
Vinay

Hi!

In that case please add a button element and set the link manually with the pdf link.

Regards,
Vinay

Hey rvga,

To create more than 5 columns please follow the below steps:

Drag and drop a color section.
Add six or more 1/5 Columns inside the color section
Give this color section a custom ID “six-columns”.
Add the below CSS in Quick CSS or child theme styles.

/*----------------------------------------
// Six Columns
//--------------------------------------*/

#six-columns .flex_column.av_one_fifth {
width: 15%;
margin-left: 2%;
}

#six-columns .flex_column.first {
clear: none!important;
margin-left: 0!important;
}

#six-columns .column-top-margin {
margin-top: 0 !important;
}

/* Two columns in mobile */

@media only screen and (max-width: 768px) {
#six-columns .flex_column {
    width: 48%!important;
    margin-left: 2%!important;
    margin-bottom: 2%!important;
}}

Best regards,
Vinay