Logo Centre, Menu Right

Hey hazelallturf,

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

Hi,

Please remove the header widget style.

Add the below CSS
The Background color is used only for reference please remove it to suit your design.

.container.av-logo-container .inner-container {
    display: flex!important;
    background: #eee;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap:wrap;
}

#top #header .logo,
#top #header .main_menu,
#top #header #search-3 {
   position: relative;
}


/* Logo */
#top #header .logo {
    background: #ffdd00;
    order:2;
    /*flex-grow: 1;*/
}


/* Menu */
#top #header .main_menu {
    background: #0099e5;
    order:3;
    /*flex-grow: 2;*/
}


/* Header widget*/
#top #header #search-3 {
    background: #34bf49;
    padding: 0;
    order:1;
    z-index: 999;
    /*flex-grow: 1;*/
}

/* Header widget Breakpoint */
@media only screen and (max-width: 850px) {

   .container.av-logo-container .inner-container {
        display: block !important;
    }
    #top #header .logo {
        display: inline-block;
    }
    /* Menu */
    #top #header .main_menu {
        display: inline-block;
        float: right;
    }
    #top #header .av-main-nav-wrap {
        float: right;
    }
    #top #header #search-3 {
        margin-top: -40px;
    }
}

The result will be:

For more information please feel free to check out the header layouts.

Best regards,
Vinay

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