Center menu items on Mobile

businessvip · March 2017

Hi,

I've used the CSS code you share on this discussion http://forum.muffingroup.com/betheme/discussion/170/any-suggestion-how-to-center-menu-using-stack-center but r didn't worked for me.

This is teh CSS code I've added:

/*ALIGN MENU ITEMS CENTER ON MOBILE*/

#Header .menu > li { display: inline-block; float: none;}
#Top_bar #menu { width: 100% !important; }
#Top_bar .menu_wrapper { text-align: center; width: 100%; }
#Top_bar .top_bar_left { width: 100% !important; }
.header-stack #Top_bar .top_bar_right { display: none; }

Thanks

Bryan · March 2017

Hi,

We have no idea what or where you want to center items on your page.

Please send us a link to your page and a screenshot descripting the issue.

thanks

businessvip · March 2017

Hi,

This is the site provisory URL as it is under construction: http://www.lalkafashionkids.ovh

I want to have the top header items all align center or have it in only 1 line, because the e-mail and telephone will disappear and on that place I'll have 2 language flags from WPML plugin.

Here is the print: http://prnt.sc/ejhg3r

Thanks

Bryan · March 2017

Please first put all elements in the action bar and then let us know so we can center them.

thanks

businessvip · March 2017

Hi,

I already have all items on the action bar, but the flags appear on the right side and I need to have the flags on the left side.

For the mobile devices, I would like to have all items in the top bar centered.

http://www.lalkafashionkids.ovh/

Thanks

Bryan · March 2017

Hi,

Use this css

@media (max-width:767px){
#social-menu li.wpmenucartli {
	float:none !important;
}
#menu-top-menu-right {
	width:100% !important;
	text-align:center !important;
}}
@media (min-width:768px){
#menu-top-menu-right li:nth-child(1), #menu-top-menu-right li:nth-child(2) {
	float:left;
}
#menu-top-menu-right {
	width:100% !important;
	text-align:right !important;
}
}

businessvip · March 2017

Hi,

Thank you for your reply.

I would like to have the WPML flags on the left side of the action bar, right here: http://prnt.sc/el8fc7

Can you please help me?

Thanks

businessvip · March 2017

Hi,

I contact WPML support and they shared a CSS code that does not result as expected.

Can you please take a look to their reply and help me with the correct CSS code to use?

Thanks.

WPML support reply:

Hello,

If I use this code:

#Action_bar .social-menu > li:not(.wpml-ls-item) {

float: left;

padding: 20px 0;

}

The result isn't the expected: http://prnt.sc/el9o15

===> Correct, Thats because you have only seperated the switcher
from the theme's CSS now you need to also now target WPML switcher by
adding this

1

2

3

.wpml-ls-item{

float:left;

}

#Action_bar .social-menu {

float: left;

padding: 20px 0;

}

All items are properly aligned to the left as you can see here: http://prnt.sc/el9p9x

===> That is because you are still within the theme's CSS which keeps everything looking nice and neat.

Please contact your theme Author or Theme support as they will be able to further provide you with the correct CSS.

Like i have mentioned prior this is controlled by your theme.

businessvip · March 2017

Hi,

I remember something. The right side of the action bar is a menu and the left side is a "contact_details".

This is why when I enter this code:

#Action_bar .social-menu > li:not(.wpml-ls-item) {
float: left;
padding: 20px 0;
}

Effectivelly the flags go left in the right side of the social menu, because this is in fact the right container of the action bar. What I need is to move the flags inside the action bar from the right container to the left container and not just align them left.

Did you understand my explanation?

Does it help you helping me?

Thanks

Albert · March 2017

Hi,

because your site is not online, i am not able to check this. So please send me private message thru contact form on the right at https://themeforest.net/user/muffingroup#contact with WP dashboard access and i will take a look closer. Please do not forget to attach the link with the screenshot of what you would like to achieve exactly.

businessvip · March 2017

Sorry, the website it online now.

I want to move the WPML flags from the acion bar right menu to the left container of the action bar, where "Flags Here" words are in this image: http://prnt.sc/elg6zi

Thanks

businessvip · March 2017

Just sent you the image with the login details. Thanks

businessvip · March 2017

Sorry and thank you

Bryan · March 2017

Hi,

Remove any CSS you wrote regarding the action bar. Remove the sloga as well.

Use this CSS

@media (max-width:767px){
#social-menu li.wpmenucartli {
	float:none !important;
}
#menu-top-menu-right {
	width:100% !important;
	text-align:center !important;
}}
@media (min-width:768px){
#menu-top-menu-right li:nth-child(1), #menu-top-menu-right li:nth-child(2) {
	float:left;
}
#menu-top-menu-right {
	width:100% !important;
	text-align:right !important;
}
}

businessvip · March 2017

Thank you very much!

Center menu items on Mobile

Comments