Hey Bianca Elsworth,

I understand the issue is urgent, we would like to help you with it please write to us using the support forum or open a new ticket if your previous ticket is closed.

Best regards,
Vinay

Hi,

Would you mind providing a precise link to the page, showing the elements in question? We need to be able to inspect them in order to help :)

Best regards,
Vinay

Hey emanuelecocchiaro,

I have added the below CSS to quick CSS

/* Overlap logo */
#top #header #header_meta {
    z-index: 1!important;
}

#top #header .logo {
    z-index: 100!important;
    margin-top: -20px;
}

Best regards,
Vinay

Hi,

Please activate the burger menu just before the menu touches the logo at around 1300px width of the browser window.

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

For more tips please check https://kriesi.at/documentation/enfold/menu/#-menu-overlaps-logo-on-tablet

Best regards,
Vinay

Hi,

I tried to troubleshoot this issue but the login credentials you provided do not work for me.

I have customized the code for you please remove the previous code and try the below CSS

1. How to I get the 2 logos to align with the container for the page
By default, the logo and widget should automatically align to the width of the page container unless some change has been made. Please check the theme options Header > Header Behavior > Let logo and menu position adapt to browser window is checked? You can also define a custom header width (Please check the header section of the docs for code snippets).

2. What kind of CSS should I use to make the logo in the widget area adjust in size to become responsive
After the code is added the logo and the widgets show up in the original image size provided there is enough space available. If there isn’t much space available the images are auto re-sized proportionately to fit in the available space. To increase or decrease the width of the images a “flex-basis” value can be specified.

3. On tablet portrait and mobile portrait mode in the customise view the logo is moving to the right and forcing the widget down
This issue is fixed in the below code :)

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


Widget area on the right

----------------------------------


CSS Settings

. Flexbox support
. Settings
. Header
. Logo
. Menu
. Cart Icon
. Social Icons
. Header Widget

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

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

Enable Flexbox Support to the header elements. 

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

/* Header */
.responsive #top #header,
/* Top bar */
.responsive #top #header #header_meta,
/* Search icon */
.responsive #top #header #menu-item-search a,
/* Shopping cart */
.responsive #top #header a.cart_dropdown_link,
/* Social icons */
.responsive #top #header #header_main nav .social_bookmarks, 
/* Logo */
.responsive #top #header #header_main .inner-container .logo,
/* Main menu area including the main menu (with search and burger icons), 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 {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
}



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

Settings: flexbox order, width, height and alignment for header and header elements

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

/* Top bar */

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

/* Header */

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

/* Header inner container */

#top #header #header_main .container.av-logo-container .inner-container {
    order: 0;
    flex-grow: 0;
    flex-basis: auto;
    flex-direction: row;
    /* Vertical alignment */
    align-content: center;
    /* Horizontal alignment */
    justify-content: space-between;
    height: inherit;
}


/* Logo */

.responsive #top #header #header_main .inner-container .logo {
    order: 1;
    flex-grow: 0;
    flex-basis: auto;
}



/* Main area: Menu with siblings cart and social icons */

.responsive #top #header #header_main .inner-container .main_menu {    
    order: 2;
    flex-grow: 0;
    flex-basis: auto;
    align-items: center;
    align-self: center;
    justify-content: flex-end;    
}

/* Menu: Menu items with search and burger icon */

.responsive #top .av-main-nav #avia-menu {
    order: 0;
    align-items: center;
    align-self: center;
    flex-grow: 0;
    flex-basis: auto;
}

/* Search icon */

.responsive #top #header #menu-item-search a {
    order: 0;
    flex-grow: 0;
    flex-basis: auto;
}

/* Shopping cart */

.responsive #top #header a.cart_dropdown_link {
    order: 0;
    flex-grow: 0;
    flex-basis: auto;
}

/* Social icons */

.responsive #top #header #header_main nav .social_bookmarks {
    order: 0;
    flex-grow: 0;
    flex-basis: auto;
} 

/* Widgets */

.responsive #top #header #header_main .inner-container .widget {
    order: 3;
    flex-grow: 0;
    flex-basis: auto;
    align-items: center;
    align-self: center;
    justify-content: center;
    margin-left: auto;    
}






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

Header 

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

/* Header */

.responsive #top #header #header_main {
    padding: 30px 0;
}


/* Main Header  */
.responsive #top #header #header_main,
.responsive #top #header #header_main .container.av-logo-container {    
    height: inherit;
    /*background: aquamarine;*/
}

/* Header container height */
.responsive #top #header #header_main .container.av-logo-container .inner-container {    
    position: relative !important;
}



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

Logo 

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

/* Logo image size */
.responsive #top #header .logo,
.responsive #top #header .logo a,
.responsive #top #header .logo img { /* Logo Width and alignment */
    width: 100px;
    max-width: auto;
    align-items: center;
    align-self: center;
    height: auto;
    justify-content: center;
}







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

Menu 

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

/* Main area: Menu with siblings cart and social icons */
.responsive #top #header #header_main .inner-container .main_menu {    
    /*flex-wrap: nowrap;*/
}

/* Meun: Menu items with search and burger icon */
.responsive #top .av-main-nav #avia-menu {

}

/* Menu style */
#top #header #avia-menu a .avia-menu-text {
    color: #222;
    font-size: 18px;
}

/* Menu hover color */
#top #header #avia-menu .menu-item:hover>a>.avia-menu-text {
    color: #20f;
}

/*  Activate burger menu  */

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


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

Cart Icon

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


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

Header Social Icons 

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


/* Main menu social icon alignment fix */

/* 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;
}



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

Header Widget

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

/* Reset default theme styles */
.responsive #top #header #header_main .inner-container .widget {    
    padding: unset;
    clear: none!important;
    margin-left: 10px;
}


/* Widget Text */

.responsive #top #header #header_main .inner-container .widget p {
    font-size: 11px;
    line-height: 14px;
    text-transform: uppercase;
    letter-spacing: .35em;
    color: #222;
    padding:0 10px;
}

Best regards,
Vinay

Hi,

It is difficult to provide the solution without inspecting the element, thanks for your understanding. I tried to troubleshoot this issue again but the login URL/credentials you provided do not work for me. Would you mind checking once again and then send us working login credentials?

Best regards,
Vinay

Hi,

I checked your site on IE 11 and it works perfectly fine.

You may not see the changes 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”.

4. If you have installed any browser extensions/plugins please disable it for testing purpose.

Best regards,
Vinay

Hi,

I’m sorry to say that there is nothing visible on the link you provided.

Please try to upload the background image from Enfold > General Styling > Logo Area and select option:

Position of the image: Top Center
Repeat : Tile Horizontally or No repeat if you have a large image that can cover the whole screen.
Attachment: Scroll

Best regards,
Vinay

Hi,

Thank you for your understanding. It still requires quite a lot of customization to achieve the header layout as described above.

1. Go to Enfold > Header > Header Layout > Menu and Logo position > Logo left, menu below
Now you have the logo on top and main menu at the bottom which can handle the mega menu.

2. Add a header widget area as mentioned here https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area

3. Position the header widget to the right using the custom CSS.

4. You can add HTML code for the menu in the widget area and style it using custom CSS.
Please check this link for menu examples https://codepen.io/search/pens?q=horizontal%20menu&page=1&order=popularity&depth=everything&show_forks=false

I am very sorry to tell you that this type of customization is not covered by our support.

I hope you will find the above links helpful.

Best regards,
Vinay

Hi,

Sorry for the delay, Yes creating all the pages from scratch does not make any sense.

For testing purpose, please enable debug mode by adding the code provided in this link to your functions.php file which can be accessed from Appearance > Editor

This lets you view the shortcode for all the pages.

Copy the shortcode from a page and save it as a test page.

Let us know if this help!

Best regards,
Vinay

• This reply was modified 7 years, 1 month ago by Vinay.

Hey Happy Enfold User,

Please try using a masonry element, as you can see in the below example we have used category names to style posts to look different using CSS.

For instructions to reproduce the same results please check https://kriesi.at/documentation/enfold/blog-post/#using-categories-to-style-masonry-blog-grid

Let us know if this helps you :)

Best regards,
Vinay

Hey S.!

Thank you for writing to us.
We will add more examples and shortcodes to our documentation.
Your feedback and suggestions are most welcome :)

Cheers!
Vinay

Hi,

Thank you for getting back to us. From what I remember seeing the site last time it has changed a bit and looking nice :)

This is a complicated approach to add two menus. In this approach, the drawback is that you need to load your header.php file from child theme or else the changes will be overwritten when you update the theme. Since we are constantly releasing updates anytime there is a change in the header.php file you have to re-import it.

A much easier way would be to add a navigation widget to the header widget area and style it accordingly.

Please share a screenshot/mockup of the end result you are looking for it will help me assist you better.

https://snag.gy/
https://ctrlv.cz/en/
https://imgur.com

I may also require your login details to set things up for you please share credentials in private content area.

Best regards,
Vinay

Hi,

Glad we could help!

Please take a moment to review our theme and show your support https://themeforest.net/downloads
Don’t forget to bookmark Enfold Documentation for future reference.

Thank you for using Enfold :)

Best regards,
Vinay

Hi,

Thank you for writing back to us with correct credentials. I was able to check your site. Since you had some custom styles for rounded corners already I had to use extra CSS to overwrite your code.

I have added this code to to your child theme’s style.css file:

CSS Snippet:

/* CSS - Rounded corners */

#top #header,
#top #header_main,
#top #header .header_bg,
#top #header .container.av-logo-container,
#helpyou {
	border-radius:25px;		
}

#top #header_main,
#top #header .header_bg {
background:#FFF!important;
	}

#top #header .container.av-logo-container {
background:#047a41!important;
	}


#top #main {
    background: #fff!important;
}

/* End CSS */

Best regards,
Vinay