[Support request] Sider few questions

[Krystian]

Hi!
1. How can I move the logo location as in this image?

2. How can I center menu items, and force the text to be one line?

I’ve used the css below:

@media (min-width:769px) {
    .menu.sf-menu li {
        background-color: #ffffff;
        border: 2px solid #474747;
			  width:100%;
				text-align:center;	
			  margin: 5px;		
		
	}
	.menu.sf-menu li:hover {
		border: 2px solid blue;
	}

[Ying]

Hi there,

1. Add this CSS:

.site-branding-container {
    flex-direction: column;
}

2. Go to customizer > layout > primary navigation> Menu Item Width, set it to 50px instead of100px.

Let me know if this helps 🙂

[Krystian]

Thanks, CSS works like a charm! 🙂

About the question 2 – the 50px setting makes it narrower, which kinda works, but… is there anything I can do to make them them “full width” and keep them centered?

[Ying]

Set menu item width value to 20px, then add this CSS:

.main-navigation .main-nav ul li a {
    white-space: nowrap;
    width: 250px;
    margin-left: auto;
    margin-right: auto;
}

[Author]

Posts