- This topic has 5 replies, 2 voices, and was last updated 4 years, 2 months ago by
.
-
Posts
-
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?Customer Support
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
- You must be logged in to reply to this topic.