How to center Header Menu

Hi @ntumblin, @ricotheque from LyraThemes here.

You can add this to your Appearance > Customize > Additional CSS:

@media (max-width: 767px) {
	.navbar-nav > li {
		text-align: center;
	}
}

Hope this helps!

@ntumblin, Add below code in your current theme’s “style.css” file.

.logo 
{
  float: left;
  margin-left: 38%;
}

Note : All Changes you done in style.css or other file are gone when you update theme. So prefer Child Theme

Hope this will helps you

Thanks!

Hello,

@ricotheque I tried the CSS you provided, but I didn’t see any changes in the live preview.

Any suggestions?

My website is cordialyinvited.com if that helps.

Thanks!

New problem. https://www.screencast.com/t/o0Mi2StA

Using “max-width” wasn’t working for some reason (I’m a complete noob on this topic btw) and neither was the center alignment, but the left command had a result, I just set the %. Now the actual links are centered, but the container(?) that the information is in, is not centered and only starts at the center of the page.

• This reply was modified 7 years, 2 months ago by ntumblin.

Please remove everything you’ve been asked to add so far, then use this instead:

@media (min-width: 768px) {
	.navbar-default .navbar-nav {
		width: 100%;
		text-align: center;
	}
	.navbar-nav > li {
		float: none;
		display: inline-block;
	}
}

Thank you so much!!! I appreciate your help. @ricotheque

Hello !

Like ntumblin, I’m looking for a way to center align the Header Menu similar to the format of a Kale demo Kale Demo.

The solutions you offer either do not work or it removes the appearance of the arrow in the ‘blog’ tab of my menu.

I tried several code in the css but nothing works. Can you help me ?

Thanks in advance !

• This reply was modified 6 years, 10 months ago by celeen.

Hello, @celeen.

Would you mind posting your website URL here so that we could suggest some CSS to you?

Hello @siniplyrathemes,

I can’t give you the URL because I work on localhost :/

Could you at least post a screenshot and mark what exactly you’d like to have centred?

I don’t know if this link work : https://drive.google.com/file/d/1jITgN19m7EapprLcZ3V_J0dcpf2GNiUV/view?usp=sharing

I want to center the menu that is surrounded by blue

• This reply was modified 6 years, 10 months ago by celeen.

Hi @celeen,

I’m afraid there is some code on your site which change default Kale style. Main navigation should be centered by default as you can see in our demo: https://demo.lyrathemes.com/kale/

Please deactivate all plugins one by one and test navigation after each deactivation until you find the culprit.

If that doesn’t work you can try to add this css to Appearance → Customize → Additional CSS:

.navbar.navbar-default .navbar-collapse {
    text-align: center !important;
    display: block !important;
}

Hope that helps.

Best

Hi @jarektheme,

As you said I have desactivate all the plugins one by one and I haven’t seen a change. Then I add the additonal CCS you gave me but nothing change. I don’t know what to do…

Could you please hit F12 in Chrome and open Console tab in Developer Tool to see if there are any JavaScript errors? See this screenshot as reference: https://prntscr.com/i1vz4q
If there are any errors please attach screenshot here.

I’m really sorry for any issue you are having with styling but it’s hard to figure out what might be the cause of the issue when I can’t see your site. Default Kale style center navigation so it should work unless you don’t have any custom style.

Best

Hi @jarektheme,

Here the screenshot of the console tab in developer tool :
https://drive.google.com/file/d/103ufTLH5YoSfuHM5WW-LDWjeVjuLsKQZ/view?usp=sharing

Thanks for your help