Archived topic
Logo Location
5 replies · Started by Ruth Kijner on February 26, 2020
Hello,
I'm just started to configure the template. My goal is to locate the navigation bar in the middle of the header and adjust the location of the logo.
So I configured mobile menu through Customizing --> Layout --> header.
But unfortunately from the customization panel, I couldn't customize the location of the logo itself as I wanted, therefore I used CSS to adjust the logo.
.navigation-branding .site-logo {
position:absolute;
left: 300px;
}
It's partly solved my problem .the issue is that the logo location changes between different sizes of PC screens.
My questions:
Is it possible to adjust the same location of the logo for all width of pc screens/tablets?
Is it possible to keep the logo in the middle of the header just on the mobile?
Hi there,
what would the logo align to in the desktop mode ?
Hello David,
I appreciate your reply.
I succeeded to locate the logo (left after the mission) and keep that position also in wider pc screens and laptops. (my anchor point is the mission in the body, so I located the logo after the left border of our mission )
.navigation-branding .site-logo {
position:absolute;
left:49%;
margin-left: -749px;
}
The issue with that is the logo disappears off the edge of the screen when you reduce the browser width. Can i suggest:
1. Add this CSS:
@media (min-width: 1200px) {
.inside-navigation {
max-width: 1600px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.navigation-branding .site-logo {
position: absolute;
left: 10px;
}
}2. Customizer > Layout > Primary Navigation and reduce the Menu width to say 20px ?
When there is enough room the logo will align to the left and menu will remain center.
Hello David,
I applied your suggestion, and it works great.
Thank you so much!
Happy to be of help
