Site logo

Archived topic

Sider few questions

3 replies · Started by Krystian on June 3, 2022

Viewing posts 1–4 of 4

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

2. How can I center menu items, and force the text to be one line?
image
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;
	}

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 :)

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?

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;
}
This archived topic is closed to new replies.