Archived topic
Sider few questions
3 replies · Started by Krystian on June 3, 2022
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;
}
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;
}