Logo position in header on 7.1

Hi! I want my logo on the right side of my header and nav options on the left. I'm currently only given the option to have the logo on the right side or centered with various positions for navigation. I've checked to see what template I'm using and only see version 7.1 so I'm not sure if that is the issue or how I would be able to fix it. Please help!

THANK YOU SO MUCH!!! This worked beautifully

Hi! This worked great for me too but the logo is still positioned on the left/hamburger on right in mobile. How can I swap these so the logo remains on the right in small screen sizes?

Thanks!

7 hours ago, mandabuck said:

Hi! This worked great for me too but the logo is still positioned on the left/hamburger on right in mobile. How can I swap these so the logo remains on the right in small screen sizes?

 

Thanks!

Can you share link to your site?

Hi @tuanphan ! 

On SS 7.1. CROSBY template

I would like to have Logo (center) - Navigation (right), is that possible? 

1 minute ago, CW2 said:

Hi @tuanphan ! 

On SS 7.1. CROSBY template

I would like to have Logo (center) - Navigation (right), is that possible? 

 

Can you share link to Crosby template demo?

5 minutes ago, tuanphan said:

Can you share link to Crosby template demo?

https://crosby-demo.squarespace.com/

https://c-l.squarespace.com/

1234

17 minutes ago, CW2 said:

Hi @tuanphan ! 

On SS 7.1. CROSBY template

I would like to have Logo (center) - Navigation (right), is that possible? 

 

I think it is possible. I will test again tomorrow. SS 7.1 loading slowly tonight

5 minutes ago, tuanphan said:

I think it is possible. I will test again tomorrow. SS 7.1 loading slowly tonight

Ok thank you! 

On 4/7/2020 at 10:42 PM, tuanphan said:

Can you share link to your site?

Yes, thank you! The site is https://prospect-studio.squarespace.com/ pw: wilson. 

Would like the logo to remain right-aligned in small screens. It works on desktop but not small screens right now. 

8 hours ago, mandabuck said:

Yes, thank you! The site is https://prospect-studio.squarespace.com/ pw: wilson. 

Would like the logo to remain right-aligned in small screens. It works on desktop but not small screens right now. 

Add to Home > Design > Custom CSS

.header-menu-nav-folder-content * {
    text-align: right !important;
}

Hi @tuanphan Thanks, but that is not what I meant! 🙂 Please see attached showing what it looks like currently, and what I am trying to achieve. I did this in Photoshop.  

12 hours ago, mandabuck said:

Hi @tuanphan Thanks, but that is not what I meant! 🙂 Please see attached showing what it looks like currently, and what I am trying to achieve. I did this in Photoshop.  

 

 

Use this code

@media screen and (max-width:991px) {
.header-display {
    flex-direction: row-reverse;
}
.header .header-title-nav-wrapper .header-title {
    text-align: right;
}
}

Yay! Thanks so much @tuanphan

On 3/29/2020 at 1:09 AM, tuanphan said:

SS 7.1 supports Logo (center) - Navigation (left), doesnt support Logo (right) - navigation (left)

You can set Logo (Center) - Nav (left), then add this code to Home > Design > Custom CSS

@media screen and (min-width:768px) {
.header-title-nav-wrapper {
    flex: 1 0 100%;
}
.header-layout-branding-center .header-title {
    text-align: right;
}
}

 

Thanks for a great workaround!

Any chance you can group "elements" (language and social buttons) with the logo on the right side, with the logo being last on the right?
With the current code, those elements will be moved to a lower line offset from the middle.

5 hours ago, camarx said:

Thanks for a great workaround!

Any chance you can group "elements" (language and social buttons) with the logo on the right side, with the logo being last on the right?
With the current code, those elements will be moved to a lower line offset from the middle.

Can you share link to your site? I can check easier.

On 6/24/2020 at 10:34 PM, tuanphan said:

Can you share link to your site? I can check easier.

Yes sure thing, thanks!

It's not yet published, here's the link.

For now, the class with those elements is hidden.
http://laika-rumdesign.squarespace.com

I'm also having trouble. I am trying to get the logo centered, while keeping the hamburger on the right. Nothing I try seems to work...

TuanPhan,

Can't get my logo on mobile to get to the center. Any ideas? Used the codes above.

https://nomadcannabis.squarespace.com/config/design

1234

Also, anyway to make the header transparent so that the logo lives on the image directly below it?

22 hours ago, Jefte said:

TuanPhan,

Can't get my logo on mobile to get to the center. Any ideas? Used the codes above.

https://nomadcannabis.squarespace.com/config/design

1234

Also, anyway to make the header transparent so that the logo lives on the image directly below it?

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.header-title {
    text-align: center !important;
}
}

Hi @tuanphan How do I get my logo header to stay in the center with my navigation links on the right?

On 9/18/2020 at 6:59 PM, Cheryljacklyn said:

Hi @tuanphan How do I get my logo header to stay in the center with my navigation links on the right?

Can you share site url? We can check easier.

@tuanphan The site isn't launched yet but here's a screenshot of the homepage.  I'm on 7.1 and currently using the header style where the logo image is in the middle and the navigation links are on the left. However, I'd like to have all the navigation links to live on the right side. 

On 9/21/2020 at 8:32 PM, Cheryljacklyn said:

@tuanphan The site isn't launched yet but here's a screenshot of the homepage.  I'm on 7.1 and currently using the header style where the logo image is in the middle and the navigation links are on the left. However, I'd like to have all the navigation links to live on the right side. 

 

You can setup password & share url