Jump to content

Adjust the position of the site header layout using CSS code.

Go to solution Solved by tuanphan,

Recommended Posts

Hi,

Because the current layout in site header doesn't have the template I want to use, I would like to ask if there is a way to swap the Navigation and Social links using code?

Thanks!

截圖 2024-03-05 下午9.51.51.png

Link to comment
12 minutes ago, PANNN said:

Because the current layout in site header doesn't have the template I want to use, I would like to ask if there is a way to swap the Navigation and Social links using code?

Can you share your website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution
On 3/13/2024 at 8:16 PM, PANNN said:

sorry for the late reply
this is the URL
https://ocelot-garlic-ka7a.squarespace.com/
password:0000

thx !

You can use this code to Website > Website Tools > Custom CSS

@media screen and (min-width:992px) {
.header-nav {
    position: absolute;
    right: 0;
    text-align: right;
}

.header-actions.header-actions--right {
    position: absolute;
    left: 0;
    justify-content: flex-start !important;
}

header#header a.icon {
    margin-left: 0px !important;
    margin-right: 2.5vw !important;
}
}

image.thumb.png.b5b589cb67d78f9c57038a644ba23159.png

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 3/15/2024 at 4:10 PM, tuanphan said:

You can use this code to Website > Website Tools > Custom CSS

@media screen and (min-width:992px) {
.header-nav {
    position: absolute;
    right: 0;
    text-align: right;
}

.header-actions.header-actions--right {
    position: absolute;
    left: 0;
    justify-content: flex-start !important;
}

header#header a.icon {
    margin-left: 0px !important;
    margin-right: 2.5vw !important;
}
}

image.thumb.png.b5b589cb67d78f9c57038a644ba23159.png

it's work!
thx for your help!

Link to comment
On 3/15/2024 at 4:10 PM, tuanphan said:

You can use this code to Website > Website Tools > Custom CSS

@media screen and (min-width:992px) {
.header-nav {
    position: absolute;
    right: 0;
    text-align: right;
}

.header-actions.header-actions--right {
    position: absolute;
    left: 0;
    justify-content: flex-start !important;
}

header#header a.icon {
    margin-left: 0px !important;
    margin-right: 2.5vw !important;
}
}

image.thumb.png.b5b589cb67d78f9c57038a644ba23159.png

Hi tuanphan , sorry to bother you again that when I open a web page in safari, the paging options do not appear in the drop-down menu. how can i fix it ?

thanks!

IMG_4805.JPG

Link to comment
On 3/22/2024 at 1:05 PM, PANNN said:

Hi tuanphan , sorry to bother you again that when I open a web page in safari, the paging options do not appear in the drop-down menu. how can i fix it ?

thanks!

IMG_4805.JPG

I see it shows fine now, you try checking it again

image.png.87c0853596899f4d4b209e601f8f3900.png

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.