Archived topic
Logo Align left full width, Primary Nav aligned Center, Social Icon align right?
4 replies · Started by nomadiceman on May 19, 2021
Hi.
I want to align the logo to the left, primary navigation centre and social icons to the right.
The navigation area is full width
When I go into the Customize - Layout - Primary navigation, there is no option to align centre.
Please can you advise how to do this
This is the site I took inspiration from
Hi there,
It's quite tricky to pull the same thing off on your site because some elements may overlap each other.
While we can easily center the primary navigation with this CSS:
nav#site-navigation {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: fit-content;
}The difference/s between your site and the reference is/are:
- Your site's navigation is significantly wider content-wise, compared to the inspiration site. (your site has 766px, the reference has 680px.)
- Your site's logo is significantly wider than the inspiration site's logo. (your site's branding + logo is 219px width, the inspiration site's logo + wordmark totals 100px. That's 119% larger. )
These points make it tricky because if we apply the same thing, the elements overlap against each other as they won't have enough horizontal space clearance.
Here's my recommendation/s:
- try to resize the font-size of the menu items. (to give the menu more horizontal space when we center it)
- try to resize the font-size of the site branding or completely remove it. (for more horizontal space)
- Increase the mobile breakpoint of your Primary navigation from 768px to 1024px to match the inspiration site.
Great thank you for your help
No problem. :)
