Jump to content

Centre Logo and Right Align Navigation

Recommended Posts

  • Replies 5
  • Views 640
  • Created
  • Last Reply

Top Posters In This Topic

You can choose layout: Left Navigation - Middle Logo. Then we can give some code to move Nav from Left to right. I think it will be easier.

With current layout, try this to Design > Custom CSS

@media screen and (min-width:992px) {
.header-title-nav-wrapper {
    flex: 1 1 50%;
    justify-content: center; 
}
.header-title {
  flex-grow: 1;
    flex-shrink: 1;
}
.header-nav {
    flex-grow: 0.5;
    flex-shrink: 1;
  padding: 0 !important; 
}
.header-title-logo {
text-align: right;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 10/17/2022 at 8:10 AM, tuanphan said:

You can choose layout: Left Navigation - Middle Logo. Then we can give some code to move Nav from Left to right. I think it will be easier.

With current layout, try this to Design > Custom CSS

@media screen and (min-width:992px) {
.header-title-nav-wrapper {
    flex: 1 1 50%;
    justify-content: center; 
}
.header-title {
  flex-grow: 1;
    flex-shrink: 1;
}
.header-nav {
    flex-grow: 0.5;
    flex-shrink: 1;
  padding: 0 !important; 
}
.header-title-logo {
text-align: right;
}
}

 

Thanks for the suggestion, when I pasted this code however nothing changed.. I've left that code in there for now. Any ideas?? 

Edited by parispeak
Link to comment
On 10/23/2022 at 10:11 AM, parispeak said:

Thanks for the suggestion, when I pasted this code however nothing changed.. I've left that code in there for now. Any ideas?? 

Did you changed header layout since my comment? Do you still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 10/26/2022 at 8:03 AM, tuanphan said:

Did you changed header layout since my comment? Do you still need help?

I changed the header layout to left navigation with middle logo and then tried your code - which I didn't have any luck with! So yes still need help! Thank you

Link to comment
On 11/2/2022 at 10:23 AM, parispeak said:

I changed the header layout to left navigation with middle logo and then tried your code - which I didn't have any luck with! So yes still need help! Thank you

Use this new code

@media screen and (min-width:992px) {
.header-title-nav-wrapper {
    flex: 1 1 50%;
    flex-direction: row-reverse;
}
.header-title {
  flex-grow: 1;
    flex-shrink: 1;
}
.header-nav {
    flex-grow: 0.5;
    flex-shrink: 1;
  padding: 0 !important; 
}
.header-title-logo {
text-align: right;
}
  
.header-display-desktop {flex-direction: row-reverse;}

.header-nav {
    text-align: right;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.