Archived topic
How to get primary navigation centered, logo left aligned and 1 item menu righ
9 replies · Started by Ricardo on December 22, 2020
Hi,
I'm trying to achieve this kind of header:
https://orsa.webflow.io/post/beginners-guide-to-photography
- Navigation centered- I can get this done;
- Logo left align within the container width- I don't know how to do this keeping the primary navigation centered;
- 2 menu items right aligned- I just need one and it should be inside container width; for this maybe I can add a class, but don't know what CSS should I use.
If this is out of your scope I totally understand.
Best regards,
Ricardo Pons
Hi there,
can you share a link to your site so i can provide the CSS?
Sure,
https://wordpress-89823-1605306.cloudwaysapps.com/fado-porto/
Thank you very much.
P.S: My logo height needs to be changed in order to get it centered (in terms of height)
Try this CSS:
@media(min-width: 769px) {
.nav-align-center .inside-navigation {
max-width: 1200px;
margin: auto;
}
.main-nav {
flex: 1;
}
.main-navigation li:first-child {}
.main-navigation li:first-child,
.main-navigation li:last-child {
margin-left: auto;
}
.main-navigation li:last-child {
min-width: 173px; /* Match width of logo */
}
}For your last menu item to control its height and center the text add the two lines to your CSS that i have commented below:
.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a {
color: #ffffff;
border: 3px solid #b5a062;
padding: 8px 18px;
border-radius: 2px;
margin-left: 24px;
transition: all 0.6s ease 0s;
/* Add the following two lines */
line-height: 2em;
text-align: center;
}Great!
Thank you for your kindness.
Best regards,
Ricardo Pons
You're welcome
Hello,
The CSS you gave me it's working great, but is it possible to help to get the last 2 menu items aligned right, instead of only the last?
Thank you very much for your support.
Best regards,
Ricardo Pons
Look for this part of the CSS:
.main-navigation li:first-child,
.main-navigation li:last-child {
margin-left: auto;
}and change it to:
.main-navigation li:first-child,
.main-navigation li:nth-last-child(2) {
margin-left: auto;
}Thank you very much David!
Best regards,
Ricardo Pons
You're welcome
