Problem Stack Center on sticky.

alrafi3 · August 2015

Hi

when I inserted the code to center the menu (Stack: Center)

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

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

when i active: Sticky, see picture

Albert · August 2015

Hi,

any url to site where this happen?

alrafi3 · August 2015

http://safe-hosting.net/lecomad/

Albert · August 2015

Ok, but please activate sticky header as well because it's not activated by now.

alrafi3 · August 2015

Sticky is activated

Albert · August 2015

Ok, got it. Because sticky menu can't be 100% width as there is logo and search in the same line, you must replace below css:

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

with:

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

alrafi3 · August 2015

dont work

Albert · August 2015

Please take a look above once again. As we wrote above, you must REPLACE current css line, not add the new one. This is the reason why it does not work.

alrafi3 · August 2015

ok See

After replace CSS:

the menu is not centered

and the same problem remains sticky

Albert · August 2015

Ok, once again. Please take a look on what we wrote above once again. We wrote to REPLACE THIS:

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

with this

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

But the 1st line should stay as was:

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

So the complete code should be:

#Top_bar .menu > li { display: inline-block; float: none; }
#Top_bar:not(.is-sticky) .menu_wrapper { text-align: center; width: 100%; }

And now, look at your code http://snag.gy/5e6Hr.jpg and tell us if this is the same code? Doesn't look like you replace the line we mentioned above, right? Does it make sense?

alrafi3 · August 2015

Thanks, Code CSS OK:

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

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

Problem Stack Center on sticky.

Comments