Hi Ismael,

thank you. But I thought you meant that the class was added to the header not only to the header logo. blackout.js can invert Images from enfold dynamically too but it ignores the logo which is good in some cases. In my case, I would like to tweak the full header with menu background border etc. to get inverted too just like the footer and the whole page.

I am still working o a solution. its frustrating because if the site goes black it breaks the design (border-bottom of the header is still black and now hidden in dark mode because it doesn’t get inverted. :()

Best regards,
Sab

EDIT*
You can close this one. We figured it out :)

/* Blackout Configs */
.darkmode–activated #main-image{
mix-blend-mode: difference;
}
.darkmode–activated #header, .darkmode–activated .avia-menu-text{
color: white !important;
}
.darkmode–activated .header_bg{
background-color: black !important;
}

.darkmode–activated .av-hamburger-inner::after, .darkmode–activated .av-hamburger-inner::before, .darkmode–activated .av-hamburger-inner{
background-color: white !important;
}

.darkmode–activated #footer-style{
background-color: #ffffff !important;
}

.darkmode–activated .avia_textblock > p > span {
color: black !important;
}

Thank you!

• This reply was modified 3 years, 9 months ago by sabsab.

Hi Ismael,

thank you for the update. Unfortunately, nothing changes on my end (I cleared cache and opened in incognito on mobile to check the menu bar). I am trying to get the logo on the left-hand side, widget-button in the center of the mobile-menu-bar and hamburger-menu on the right-hand side of the menu bar. I am not finding the correct CSS. May you can help? Yes, I was hiding the social-icons on mobile to achieve the mobile-menu the way I mentioned. :)

The current state of the mobile menu: https://imgur.com/d4p9rNY

Thanks in advance!
Sam

• This reply was modified 4 years, 11 months ago by sabsab.

Hi Victoria, thank you for helping me out.

I always post it as a link (in blue in my last comment :) saying “Here is the mobile menu at its current state“). I am uploading to “Imgur” and it is working isn’t it?

Here is the mobile menu again: https://imgur.com/a/j7I1x9P May you can help me arange it as mentioned.

I am trying to add this small arrow to the button on the left side: https://imgur.com/a/27xsUhw . LIke this one here: https://imgur.com/afIXUT4

I thought its like:

.button:after {
background-image: url(//image.url);
left: 0;
}

Thanks in advance,
Sabsab

• This reply was modified 4 years, 11 months ago by sabsab.

Hi Victoria,
thanks for helping me out!

The button is now created and i tested with the code your’re providing here: “Menu Centered” but cant find the right modification without destroying the current process with overlapping and so on. :)

I think now I just need to modify this snippet right?

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

 Add a widget area on the right side
 Logo left, Menu center, Widget right

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

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

/* Header inner container */

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

/* 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: 0;
    flex-basis: auto;
    /*width: auto;*/

    /* Define scalable min width of the logo on small screens */
    min-width: 100px;
    /* Define scalable max width of the logo on big screens */
    /* Logo width: (auto | 100% | px );  Set auto to display the uploaded image size */
    max-width: 180px;
    
    z-index: 9;
}

/* Logo image size */

.responsive #top #header .logo,
.responsive #top #header .logo a,
.responsive #top #header .logo img {
    width: auto;
        
    /* Height specification is not required. It is proportional to the max width of the logo */
    height: auto;    
    align-items: center;
    align-self: center;
    justify-content: center;
}

/* Vertically 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: 0;
    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 position fix */
#header li .avia_mega_div,
#header li:hover .avia_mega_div {
    right: 0 !important; /* submenu position */
    left: auto!important; /* submenu position */
    max-width: 50vw;
}

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

» Widget

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

/* Widgets */

.responsive #top #header #header_main .inner-container .widget {
    order: 0;
    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 {
    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 

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

/* Cart position fix */

#top #header #header_main #menu-item-shop a.cart_dropdown_link {
    height: auto;
}

@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;
    }
}

Thank you very much!