Move navigation links to right side in header

Site URL: https://www.peterpatzakestate.com/

Hi all,

This seems like it should be so easy to do, but I haven't been able to see how it's possible (which is slightly mind-boggling). 

I'd like to keep the logo in the center of the header but move the navigation links to the right side.  I'm currently using the navigation links as a means to toggle between an English and German version of the site.  

https://www.peterpatzakestate.com/
Password: peterpatzak

Any help you can provide would be very appreciated.  Thank you!

Best,
-Scott

I usually use layout: Navigation (left) - Logo (center)

Then use jQuery to cut half of left navigation to move to right of header.

Can you add all navigations on left, then we can test & give code easier?

Hi Tuan,

Thanks so much for your reply (as always!).  The website currently is already setup with the navigation being left and the logo centered - I only have one navigation item that I'll be using at the moment to toggle between the German and English versions of the site. 

I'm not much of a programmer when it comes to jQuery (yet!), so any insight you can give would be incredibly appreciated.  

Thank you again for your time!

Best,

-Scott

Thank you so much Tuan!  Worked perfectly!

@tuanphan Can I please have the code for moving half of the navigation links to the right side instead of all of them?

Thank you!

On 9/6/2021 at 4:32 AM, tuanphan said:

Ah sorry, misread your question.

Add this to Design > Custom CSS to move nav to right side

/* Move Nav to right side of header */
@media screen and (min-width:992px) {
.header-display-desktop {
    flex-direction: column;
}
.header-title-nav-wrapper {
    flex-direction: row-reverse;
    flex: 100% !important;
    width: 100%;
}
.header-nav {
    text-align: right;
}
.header-layout-branding-center .header-title {
    text-align: right;
    width: 67% !important;
    flex: 1 1 67% !important;
}
}

 

hi! I used this code and my nav link got moved to to the right but how do I center the logo? I use the mycelium-fluid template. And this is the code 

/* Move Nav to right side of header */
@media screen {
.header-display-desktop {
    flex-direction: column;
}
.header-title-nav-wrapper {
    flex-direction: row-reverse;
    flex: 100% !important;
    width: 100%;
}
.header-nav {
    text-align: right;
}
.header-layout-branding-center .header-title {
    text-align: center;
    width: 9% !important;
    flex: 1 1 9% !important;
}
}

On 4/10/2023 at 3:05 AM, lina18 said:

hi! I used this code and my nav link got moved to to the right but how do I center the logo? I use the mycelium-fluid template. And this is the code 

/* Move Nav to right side of header */
@media screen {
.header-display-desktop {
    flex-direction: column;
}
.header-title-nav-wrapper {
    flex-direction: row-reverse;
    flex: 100% !important;
    width: 100%;
}
.header-nav {
    text-align: right;
}
.header-layout-branding-center .header-title {
    text-align: center;
    width: 9% !important;
    flex: 1 1 9% !important;
}
}

What is site url?

On 4/9/2023 at 4:55 PM, rainbowblessings222 said:

@tuanphan Can I please have the code for moving half of the navigation links to the right side instead of all of them?

 

Thank you!

You can change layout to Left Nav - Middle Logo, then share site url, we can adjust code easier