Archived topic
centered logo in inline menu not centered
3 replies · Started by Michael on November 18, 2018
Hi Team-GP,
i make a website for a german Cheerleading group with a centered logo in the inline menu.
My problem is the logo not really in the center. See the example site....
You can see on the "News" site the header text of the content is centered but not the logo. I think the problem is that i have two dropdown menu´s on the left side and one on the right side.
Have you a solution. Thanks you for help.
This is because the logo is a menu item, so it's showing up whenever the menu item before it ended.
You can shift it to the left a bit more like this:
.main-navigation .centered-navigation-logo {
left: -25px;
}We're working on an easier way to achieve a centered logo.
Let me know if the above works for you or not :)
This not the solution for me. I can move the image but the image is not in the center of the menu entries...
I have tested the main menu without arrows (Link) but the hover have not the same space on the left / right site of the text.
See menu entries "Über uns", "Team" or "FAQ". If I make the padding-right with 35px too, the logo is not centered ;(
It's really difficult to achieve a truly centered navigation logo without separating the menus, unfortunately.
You could try removing your current custom CSS for the menu, and then adding this:
.main-navigation .main-nav > ul {
height: 100px;
display: flex;
justify-content: center;
padding: 0 10%;
}
.main-navigation .main-nav > ul > li {
margin-top: 40px;
flex: 0 0 16.6%;
text-align: center;
}
.main-navigation .main-nav > ul > li.centered-navigation-logo {
margin-top: 0;
}