Archived topic
Align language selection button to left in secondary navigation
7 replies · Started by Jarkko on April 11, 2022
Hi!
Is there a way I could align one button (used to select the site language, "swe-button" in CSS) in my secondary navigation to the left? The rest of the buttons should be aligned to the right, as they are now.
This is my current custom CSS:
@media (min-width:800px) {
.secondary-navigation .main-nav ul li.store-button a {
background-color: #009FE3;
border: 3 px solid #009FE3;
color: #FFFFFF;
border-radius: 30px;
line-height: 39px;
}
}
@media (min-width:800px) {
.secondary-navigation .main-nav ul li.login-button a {
background-color: #FFFFFF;
border: 3px solid #1C1463;
color: #1C1463;
border-radius: 30px;
line-height: 35px;
}
}
@media (min-width:800px) {
.secondary-navigation .main-nav ul li.swe-button a {
background-color: #f0f0f0;
border: 0px solid #1C1463;
color: #1C1463;
line-height: 45px;
}
}
@media (min-width: 800px) {
#secondary-navigation .inside-navigation {
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
}
.secondary-navigation .main-nav > ul > li:not(:last-child) {
margin-right: 10px;
}
Thanks!
Hi Jarkko,
Are you referring to this website?: https://laakeosaaminen.fi/
May we know how you’re generating your menu? Is it from a third party plugin? If so, it would be best to reach out to their support for assistance regarding this.
The page doesn’t seem to be created with GeneratePress as well.
This CSS should help, but kindly reach out to the support of your page builder for further assistance:
ul#menu-valikko {
display: flex;
}
ul#menu-valikko li:last-child {
order:-1;
margin-right:auto;
}
.fusion-header-has-flyout-menu-content {
display: flex;
}
nav.fusion-main-menu {
flex-grow: 1;
}If you’re referring to a different site, kindly let us know. :)
Hi
The site that I'm building is here: https://laakeosaaminen.fi/eng/
The old site uses a different WP theme, we're in the process of changing from that one to Generatepress.
I see. Thank you for clarifying. Here is a CSS you may try adding to Appearance > Customize > Additional CSS:
.main-nav {
width: 100%;
}
.main-nav ul#menu-paakayttajille li:first-child {
margin-right:auto
}Hope this helps! Kindly let us know how it goes. :)
Hi
This worked, thanks!
But for some reason, this also causes the sticky main menu orientation to be on the left. Before it was on the right, as it should be. Is there another code to style the sticky menu? Only the main menu is sticky, not the secondary one.
I see. Can you try replacing the code I gave above with this?:
#secondary-navigation .main-nav {
width: 100%;
}
#secondary-navigation .main-nav ul#menu-paakayttajille li:first-child {
margin-right:auto
}Kindly let us know how it goes. :)
Thank you, this solved my problem!
You’re welcome Jarkko! Glad to be of assistance! Feel free to reach out anytime you’ll need assistance with anything else. :)
