Hi,

I have removed the previous code from Enfold > General Styling > Quick CSS

Please review your website I have made the changes you requested for and tested the code. Everything works fine. If you still wish to remove the code you can access the code I added from WP Dashboard > Appearance > Editor > Select theme to edit > Enfold Child > Style.css

At the moment, the shrinking header does not work with the snippet.

You can enable the CSS and JS merging to enhance the site performance once you are happy with the modifications :)

Best regards,
Vinay

Hi,

For testing purpose, I have disabled CSS and JS merging from Enfold > Performance options.

To change the menu hover link color I have added the below CSS in Enfold > General Styling > Quick CSS

/* Menu hover color */
#avia-menu .current_page_item > a > .avia-menu-text,
#avia-menu .menu-item:hover > a > .avia-menu-text {
color:#24f;
}

Please feel free to check the color value to suit your design.

Don’t forget to bookmark Enfold Documentation for future reference.

Thank you for using Enfold :)

Best regards,
Vinay

Hi,

Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

1. Install and activate ” Temporary Login Without Password “.
2. Go to ” Users > Temporary Logins ” on the left-side menu.
3. Click ” Create New “.
4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
   ( do be sure that we have enough time to debug ).
5. Click ” Submit “.
6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.

When your issue is fixed, you can always remove the plugin!
If you prefer to not use the plugin, you can manually create an admin user and post the login credentials in the “private data” field.

Best regards,
Vinay

Hi,

I checked your site but could not see the header widget.

Please add a banner image in WordPress > Appearance > Widget > Header > and it will work for you ;)

Then you can use a widget login plugin to display the header widget on selected pages.

Best regards,
Vinay

Hey Touraj,

Thank you for contacting us, the sample website looks different for your website and the sample image link did not work.
Would you mind checking once again and then send us working links?

We are happy to help :)

Best regards,
Vinay

Hi,

Thank you for sharing the example site to show what you are trying to achieve.

In the example site, the image behind the logo is absolute positioned and in the WordPress site, the image behind the logo is set using CSS background property which is why it does not work the way you expect.

Enfold is fully responsive and works right out of the box as you may have already seen it in our demos. If you like to make the theme work in a different way which it is not designed for then you need to add the necessary code.

I personally like the header style which you are trying to achieve using Enfold. I was able to achieve a similar header style on my local system with a slightly different approach.

Please perform the below steps:

1. Remove all modification/codes added to achieve this header style.
2. Remove the header background image from Enfold > General Styling > Logo area.
3. Create a header widget area.
4. Add the header background as a widget image from WordPress > Appearance > Widget > Header > Image Widget
5. Copy and paste the below CSS to your child theme styles.css file.

/************************************

 Full width widget as background 

*************************************


CSS Settings:

» Initiate Flexbox
» Topbar
» Header
» Logo
» Menu
» Widget
» Social icons
» Search
» Cart icon

***********************************/ 



/*--------------------------------

» Initiate Flexbox

--------------------------------*/



/* Header */
.responsive #top #header,
/* Top bar */
.responsive #top #header #header_meta,
/* Search icon */
.responsive #top #header #menu-item-search a,
/* Cart icon */
.responsive #top #header a.cart_dropdown_link,
/* Social icon */
.responsive #top #header #header_main nav .social_bookmarks,
/* Logo */
.responsive #top #header #header_main .inner-container .logo,
/* Main menu, cart and social icons */
.responsive #top #header #header_main .inner-container .main_menu,
/* Widgets */
.responsive #top #header #header_main .inner-container .widget,
/* Header inner container */
#top #header #header_main .container.av-logo-container .inner-container {    
    display: flex;
    position: relative;
}




/*--------------------------------

» Topbar

--------------------------------*/



/* Top bar */

.responsive #top #header #header_meta {
    flex-basis: 100%;    
}



/*--------------------------------

» Header

--------------------------------*/

/* Height */

#top #header #header_main .container.av-logo-container {
    height: inherit;   /* Auto height: Header takes the height of the contents */
    padding: 0; 
}


/* Header inner container */

#top #header #header_main .container.av-logo-container .inner-container {
  height: inherit; 
  position: relative !important;
  flex-wrap: wrap;
}


/* Wrappers 
--------------------------------*/

/* Header content and Topbar */

.responsive #top #header {
    flex-wrap: wrap;
}

/* Header contents: Logo, Menu, Social Icons and Widgets. */

.responsive #top #header #header_main {
    flex-basis: 100%;    
}

/* Transparent header 
--------------------------------*/

.responsive.html_header_transparency #top #wrap_all #header {
    position: absolute;
}


/* Main content: 
-----------------------*/

.responsive #top #main { 
    padding-top: 0px; /* Gap between the content and header */
} 


/* Fixed header 
--------------------------------*/

/* Fixed header */

.html_header_sticky.html_header_transparency #top #wrap_all #header,
.html_header_sticky #top #wrap_all #header { 
    position: fixed; 
} 


/* Fixed header and page content gap. 
   Padding value should be same as the fixed header height. */

.html_header_sticky:not(.html_header_transparency) #top #wrap_all #main { 
    /*padding-top: 145px !important; */
} 

@media only screen and (max-width: 767px) {
.html_header_sticky #top #wrap_all #main {
    /*padding-top: 145px !important; */
}}





/*--------------------------------

» Logo

--------------------------------*/



/* Logo */

.responsive #top #header #header_main .inner-container .logo {
   order: 2;
    flex-basis: 100%;    

    width: auto;
    min-width: 80px; /* Minimum width of the logo in small screens */
    z-index: 1;
    justify-content: center;
    align-self: center;  


    /* Logo Overflow */
    /*transform: translateY(50%);*/
}

/* Logo image size */
/*.responsive #top #header .logo,*/
.responsive #top #header .logo a,
.responsive #top #header .logo img { /* Logo Width and alignment */
    width: auto;         
    max-width: auto;  /* Logo width: (auto | 100% | px );  Set auto to display the uploaded image size. Select full size in media library */
    height: auto; /* Height specification is not required. It is proportional to the max width of the logo */
    align-items: center;
    align-self: center;
}

/* center transparency logo */
 .responsive #top #header .logo span img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
} 


/*--------------------------------

» Menu

--------------------------------*/



/* Menu outer container: Menu with siblings cart and social icons */

.responsive #top #header #header_main .inner-container .main_menu {
    order: 3;
    flex-basis: 100%;   /* Use calc to minus the width of the logo */
    align-items: flex-end;
    align-self: center;
    justify-content: center;
    margin-top: -100px;
}

/* Navigation */

#header .av-main-nav {
    display: flex;
    flex-wrap: nowrap;
}

/*  Activate burger menu  */

@media only screen and (max-width: 1000px) {
    #top #header .av-main-nav>li.menu-item {
        display: none!important;
    }
    #top #header .av-burger-menu-main {
        cursor: pointer;
        display: block!important;
    }
}

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

/* Mobile menu position fix */
.responsive #top .av-logo-container .avia-menu {
    display: flex!important;
    align-items: center;
}}

/* Mega menu fix */
#header li .avia_mega_div,
#header li:hover .avia_mega_div {    
    right: auto!important;
    left: auto!important;
    max-width: 50vw;
}

/*--------------------------------

» Widget

--------------------------------*/


/* Widgets */

.responsive #top #header #header_main .inner-container .widget {
    order: 1;
    flex-basis: auto;
    padding: unset;
    clear: none!important;

    align-self: center;
    align-items: center;
    z-index: 1;
}

.responsive #top #header #header_main .inner-container .widget > div {
    display: flex;
    align-items: center;

    width: 100%;
    line-height: 14px;
    padding:0 10px;
}





/*--------------------------------

» Social icons

--------------------------------*/




/* Flex support and position fix */
.responsive #top #header #header_main nav .social_bookmarks {
    display: flex;
     top: auto;
     margin-top: 0;
     align-items: center;
}
/* Inherit height for flex alignment */
#top .av-logo-container .social_bookmarks li {
    height: inherit;
}




/*--------------------------------

» Search 

--------------------------------*/



/* Your styles here */



/*--------------------------------

» Cart 

--------------------------------*/



@media only screen and (max-width: 767px) {
.responsive #top #menu-item-shop.cart_dropdown {
    display: flex;
    align-items: center;
}
.cart_dropdown .dropdown_widget .avia-arrow {
    display: none;
}}



/*--------------------------------

Position fix

----------------------------------*/


.responsive #top #header #header_main .inner-container .logo {
    margin-top: -75%;
    z-index: 9;
}
.responsive #top #header #header_main .inner-container .main_menu {
    margin-top: -10%;
}
.responsive #top #header #header_main .inner-container .widget {
    z-index: 1;
}

If you have any issue please post the WP login credentials with the user role as admin in private content area so we can take a closer look at the issue.

Best regards,
Vinay

• This reply was modified 7 years ago by Vinay.

Hi,

To center the logo and menu please remove the previous code and add the below CSS:

NOTE: The code works for both text and Icon menu. To activate the Icon menu go to Enfold > Main Menu > General > Menu Items for Desktop

CSS:

/************************************

Centered menu widget and logo

*************************************


CSS Settings:

» Initiate Flexbox
» Topbar
» Header
» Logo
» Menu
» Widget
» Social icons
» Search
» Cart icon

***********************************/ 



/*--------------------------------

» Initiate Flexbox

--------------------------------*/



/* Header */
.responsive #top #header,
/* Top bar */
.responsive #top #header #header_meta,
/* Search icon */
.responsive #top #header #menu-item-search a,
/* Cart icon */
.responsive #top #header a.cart_dropdown_link,
/* Social icon */
.responsive #top #header #header_main nav .social_bookmarks,
/* Logo */
.responsive #top #header #header_main .inner-container .logo,
/* Main menu, cart and social icons */
.responsive #top #header #header_main .inner-container .main_menu,
/* Widgets */
.responsive #top #header #header_main .inner-container .widget:nth-child(3),
/* Header inner container */
#top #header #header_main .container.av-logo-container .inner-container {    
    display: flex;
    position: relative;
}




/*--------------------------------

» Topbar

--------------------------------*/



/* Top bar */

.responsive #top #header #header_meta {
    flex-basis: 100%;    
}



/*--------------------------------

» Header

--------------------------------*/

/* Height */

#top #header #header_main .container.av-logo-container {
    height: inherit;   /* Auto height: Header takes the height of the contents */
}


/* Header inner container */

#top #header #header_main .container.av-logo-container .inner-container {
  height: inherit; 
  position: relative !important;
  flex-wrap: wrap;
  justify-content: center;
}


/* Wrappers 
--------------------------------*/

/* Header content and Topbar */

.responsive #top #header {
    flex-wrap: wrap;
}

/* Header contents: Logo, Menu, Social Icons and Widgets. */

.responsive #top #header #header_main {
    flex-basis: 100%;    
}

/* Transparent header 
--------------------------------*/

.responsive.html_header_transparency #top #wrap_all #header {
    position: absolute;
}


/* Main content: 
-----------------------*/

.responsive #top #main { 
    padding-top: 0px; /* Gap between the content and header */
} 


/* Fixed header 
--------------------------------*/

/* Fixed header */

.html_header_sticky.html_header_transparency #top #wrap_all #header,
.html_header_sticky #top #wrap_all #header { 
    position: fixed; 
} 


/* Fixed header and page content gap. 
   Padding value should be same as the fixed header height. */

.html_header_sticky:not(.html_header_transparency) #top #wrap_all #main { 
    /*padding-top: 145px !important; */
} 

@media only screen and (max-width: 767px) {
.html_header_sticky #top #wrap_all #main {
    /*padding-top: 145px !important; */
}}





/*--------------------------------

» Logo

--------------------------------*/



/* Logo */

.responsive #top #header #header_main .inner-container .logo {
   order: 1;
   flex-basis: auto;
   /*width: auto;*/
   min-width: 80px; /* Minimum width of the logo in small screens */
   z-index: 1;
}

/* Logo image size */
.responsive #top #header .logo,
.responsive #top #header .logo a,
.responsive #top #header .logo img { /* Logo Width and alignment */
    width: auto;         
    max-width:200px;  /* Logo width: (auto | 100% | px );  Set auto to display the uploaded image size. Select full size in media library */
    height: auto; /* Height specification is not required. It is proportional to the max width of the logo */
    align-items: center;
    align-self: center;
}

/* center transparency logo */
 .responsive #top #header .logo span img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
} 


/*--------------------------------

» Menu

--------------------------------*/



/* Menu outer container: Menu with siblings cart and social icons */

.responsive #top #header #header_main .inner-container .main_menu {
    order: 1;
    flex-basis: auto;   /* Use calc to minus the width of the logo */
    align-items: center;
    align-self: center;
}

/* Navigation */

#header .av-main-nav {
    display: flex;
    flex-wrap: nowrap;
}

/*  Activate burger menu  */

@media only screen and (max-width: 1000px) {
    #top #header .av-main-nav>li.menu-item {
        display: none!important;
    }
    #top #header .av-burger-menu-main {
        cursor: pointer;
        display: block!important;
    }
}

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

/* Mobile menu position fix */
.responsive #top .av-logo-container .avia-menu {
    display: flex!important;
    align-items: center;
}}

/* Mega menu fix */
#header li .avia_mega_div,
#header li:hover .avia_mega_div {    
    right: auto!important;
    left: auto!important;
    max-width: 50vw;
}

/*--------------------------------

» Widget

--------------------------------*/


/* Widgets */

.responsive #top #header #header_main .inner-container .widget {
    order: 2;
    flex-basis: auto;
    padding: unset;
    clear: none!important;

    align-self: center;
    align-items: center;
    z-index: 1;
    max-width: 200px;
}

.responsive #top #header #header_main .inner-container .widget > div {
    display: flex;
    align-items: center;

    width: 100%;
    line-height: 14px;
    padding:0 10px;
}





/*--------------------------------

» Social icons

--------------------------------*/




/* Flex support and position fix */
.responsive #top #header #header_main nav .social_bookmarks {
    display: flex;
     top: auto;
     margin-top: 0;
     align-items: center;
}
/* Inherit height for flex alignment */
#top .av-logo-container .social_bookmarks li {
    height: inherit;
}




/*--------------------------------

» Search 

--------------------------------*/



/* Your styles here */



/*--------------------------------

» Cart 

--------------------------------*/



@media only screen and (max-width: 767px) {
.responsive #top #menu-item-shop.cart_dropdown {
    display: flex;
    align-items: center;
}
.cart_dropdown .dropdown_widget .avia-arrow {
    display: none;
}}

Best regards,
Vinay

Hey mframe,

Thank you for writing to us about the favicon issue. The same issue happened to me recently, I had to clear the cache to view the new favicon icon. Right now on your site I see your logo as favicon. Please see the attached screenshot.

You may not see the updated favicon until the cached files are cleared in your browser.

Please perform the below steps to clear the browser cache:

1. Disable “merging and compression” for CSS and JS files from Enfold > Performance.
2. If a caching plugin is installed check the plugin settings and clear the cache and deactivate the plugins for testing purpose.
3. Hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload”.

Best regards,
Vinay

Hi,

Thank you for getting in touch with us. There are two ways to achieve this.

1. Using functions: Try adding the code provided by Ismael in the previous ticket.
2. Using widgets: To create a header widget area from WordPress > Appearance > Widgets and add your text please check this post,

Best regards,
Vinay

Hi,

Thank you for getting back to us, you are using an old version 3.8 please update the theme to the latest version 4.4.1 to be able to view the latest options.

Best regards,
Vinay

Hi,

I tried to troubleshoot your website and notice the child theme was created using a plugin. For testing purpose please try the following:

1. Deactivate the child theme plugin.
2. Backup theme settings.
3. Delete the current child theme.
4. Download and install a fresh copy of the Child Theme.

Best regards,
Vinay

Hi,

Sorry for the delayed response, While I was working on your case I noticed you have 3 copies of the theme installed. It’s recommended to remove the unused copy of the theme to avoid conflicts. Access the themes folder using an FTP client or your hosting control panel and delete the theme folders that are not used.

Please Backup theme settings before deleting the theme copies. Also, you can go ahead and install a child theme which makes it easy to add customizations.

I have added the required CSS to your site in Enfold > General Styling > Quick CSS. But for this to work I have to disable the sticky header, please review your site and let me know is this works for you :)

Best regards,
Vinay

Hey lerua99,

To highlight the active menu item please check the documentation.

Best regards,
Vinay

Hi,

Please check the documentation for code snippets to move the sidebar on top.

NOTE: The code can be used to move the default theme sidebar on top but not for the sidebars built with Advanced Layout Builder or other plugins.

To make the code work only for the shop section please add a shop page class before the CSS selectors.

Best regards,
Vinay

Hey Egor Ukoloff,

Thank you for contacting us.

– does it have drag an drop builder?

Yes, Enfold comes with its own drag and drop builder called “Advanced Layout Builder”.

– does it have under constructions mode?

Yes, It has an under construction mode.

– is that booking feature/plugin that I see on the spa template included with the theme?

No, the WooCommerce Booking plugin is not included.

– is the license only good for one site? Could it be mine or to be built for a customer?

Yes, one license per site. You can buy and build a site for your customer. :-)

Don’t forget to bookmark Enfold Documentation for future reference.

Best regards,
Vinay