How to add different background color/image in the menu area and logo area?

athlon24 · July 2016

The scenario is something like this. I will add an image background in the whole logo area and add a different translucent color background

in the whole menu area. I will be using a magazine header layout style.

Albert · July 2016

Hi,

please send us link to page where you would like do this and will see if it's possible.

athlon24 · July 2016

My target is something like this. I just want the menu area standout and if also possible add different bgcolor above the menu instead of white..

you can check it here

Thank you for the reply.

Albert · July 2016

Ok. So to do something like on above image, please use an extra css like below:

#Top_bar .menu_wrapper {
    background: #000 !important;
    margin-left: -10%;
    padding-left: 10%;
    width: 120% !important;
}
.header-stack #Top_bar { background-color: #E2E2E2 !important; }

athlon24 · July 2016

almost perfect. but there is a missing header banner.

Sticky header became like this:

Albert · July 2016

But as we can see http://pasteboard.co/15wx1oih3.png the banner is fine.

athlon24 · July 2016

the problem is when the menu become a sticky header the header banner disappear. try to scroll it down and you will see.

Albert · July 2016

Ok. However, it's not possible to put the banner into sticky header. Inside sticky header, you can have logo, menu and staff from the right top bar. The only thing we suggest to do is took the menu on sticky which is below the logo, next to the logo. And this can be achieved with the following css:

#Top_bar.is-sticky .menu_wrapper { width: 70% !important; margin-left: 0 !important; padding-left: 0 !important; }

athlon24 · July 2016

Much better! Thanks a lot!

Albert · July 2016

You are welcome!

How to add different background color/image in the menu area and logo area?

Comments