2 logos in the header (1 left, 1 right)

Hi Huw,

Could you please attach a mockup of what you’re trying to achieve? So that we know which css to suggest for you.

Best regards,
Victoria

Hi,

Can u check the private cointent again?
Not a lot visible…

Best regards,
Basilis

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,

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,
Basilis