Sticky banner is not full width

VisionArt_DenBosch

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

Hi,

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

VisionArt_DenBosch

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

VisionArt_DenBosch

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

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

Albert

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next