Center Menu

stormcycles · May 2017

Hi Support,

Can you please advise on how to make the Menu appear centered in the theme? I am using a Fixed header style.

Thanks!

Bryan · May 2017

Hi,
Please send a link to your website.
thanks

stormcycles · May 2017

http://stormcycles.net

Albert · May 2017

Ok, so to center menu items in header when its non sticky, you need to use the following css:

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

stormcycles · May 2017

What about for Sticky as well?

Bryan · May 2017

#Top_bar.is-sticky .menu { text-align: center !important; }
#Top_bar.is-sticky .menu > li { display: inline-block !important; float: none !important; }
#Top_bar.is-sticky .menu_wrapper { float: none !important; }
#Top_bar.is-sticky .logo { display: none !important; }

stormcycles · May 2017

Hi Support,

I put both into the BeTheme Theme Option Custom CSS area.

Please let me know about:

The small logo that was in the header is now gone. How do I restore?
The header moves. For example, as I navigate from page to page the header starts out on the left then shifts to the center. I do not want any shifting.
On the Home page the header was transparent. The sticky header is correct to be dark. How do I restore the transparent header on the Home page?

Thanks!

Bryan · May 2017

You asked to have the same css for the normal header. Now please delete from the custom css the last line:

#Top_bar.is-sticky .logo { display: none !important; }

We do not see any movement, please delete browser cache.
thanks

stormcycles · May 2017

How do I make the dark sticky header non transparent?

Bryan · May 2017

.sticky-dark #Top_bar.is-sticky {
	background: black !important;
}

Center Menu

Comments