Logo Pic responsive

Hi,

Unfortunately, it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However, if it’s really important for you to get this done, you can always hire a freelancer to do the job for you :)

Best regards,
Basilis

Hi fabienneBESD,

Could you please attach a mockup of what you’re trying to achieve?

It is responsive, but customizations added on top have to be responsive too otherwise you get what you get.

Best regards,
Victoria

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 6 years, 4 months ago by Vinay.