Sticky banner is not full width

VisionArt_DenBosch · December 2015

Hi,

I have a problem with my sticky banner, it is not full width. There are like 20px left on each side. Do you know how to correct this problem? This is the website: http://ad-test.demo-website.nl

Thank you!

Kind Regards,
Marloes Verhofstadt
VisionArt

Albert · December 2015

Hi,

looks like it's due to your custom css. Please remove custom css responsible for header and then check.

VisionArt_DenBosch · December 2015

Hi,

I put some css in to align the menu to the center:

#Top_bar .menu_wrapper {
text-align: center;
width: 100%;
}

#Header .menu > li {
display: inline-block;
float: none;
}

#Top_bar .top_bar_left {
width: 100% !important;
}

This is the code that will center the menu, but it also triggers the sticky menu to not show properly.
Do you have a solution to align the menu and also show a proper working sticky menu?

Albert · December 2015

If above css works only for main menu, you supposed to use additional class for the #Top_bar element. So the css should look as below:

#Top_bar:not(.is-sticky) .menu_wrapper {
    text-align: center;
    width: 100%;
}

#Header .menu > li {
    display: inline-block;
    float: none;
}

#Top_bar:not(.is-sticky) .top_bar_left {
    width: 100% !important;
}

VisionArt_DenBosch · December 2015

Ok thanks! It works!
But it is not possible to align the sticky menu in the center?
The normal menu aligns in the center and the sticky menu at the left. I want both in the center.

VisionArt_DenBosch · December 2015

Also, te sticky responsive menu isnt working on a tablet? Ipad.
Does that also have to do with css?
Thanks!

Albert · December 2015

Sticky menu does not work on tablets because is simply incompatible. But to center menu items in sticky header, please use below css:

#Top_bar.is-sticky .menu_wrapper {
    text-align: center;
    width: 90% !important;
}

Sticky banner is not full width

Comments