Jump to content

Centering navigation bar drop down menu links

Recommended Posts

  • Replies 3
  • Views 426
  • Created
  • Last Reply
3 hours ago, P-Lato said:

Site URL: https://www.patrickpilato.ca/

I cannot seem to get the drop down menu links in the navigation bar to align properly with the parent folder. I would like them to be aligned on the left side, and open to the right.

 

password: 123

 

Screen Shot 2021-04-04 at 2.40.50 PM.png

Replace this snippet in your custom css, it's made the text align in center instead of to the right

a.header-nav-folder-title:hover+div,.header-nav-folder-content {
    /* text-align:center !important; */
    position: absolute;
    /* left:50% !important; */
    text-align: right;
    right: unset !important;
    -webkit-transform: translatex(-50%);
    -o-transform: translatex(-50%);
    transform: translatex(-50%);
    background: transparent !important;
}

image.thumb.png.0780da1369438189b5c94d1c8e91a40d.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
2 hours ago, bangank36 said:

Replace this snippet in your custom css, it's made the text align in center instead of to the right


a.header-nav-folder-title:hover+div,.header-nav-folder-content {
    /* text-align:center !important; */
    position: absolute;
    /* left:50% !important; */
    text-align: right;
    right: unset !important;
    -webkit-transform: translatex(-50%);
    -o-transform: translatex(-50%);
    transform: translatex(-50%);
    background: transparent !important;
}

image.thumb.png.0780da1369438189b5c94d1c8e91a40d.png

Thanks for getting back tome!

Link to comment
On 4/4/2021 at 9:15 PM, bangank36 said:

Replace this snippet in your custom css, it's made the text align in center instead of to the right


a.header-nav-folder-title:hover+div,.header-nav-folder-content {
    /* text-align:center !important; */
    position: absolute;
    /* left:50% !important; */
    text-align: right;
    right: unset !important;
    -webkit-transform: translatex(-50%);
    -o-transform: translatex(-50%);
    transform: translatex(-50%);
    background: transparent !important;
}

image.thumb.png.0780da1369438189b5c94d1c8e91a40d.png

 

 

 

 

Hi Bangank, are you able to please help me center sections of my website on mobile view? I have tried everything and cant seem to help it out, I'd appreciate your help.

these three pages:

https://www.patrickpilato.ca/sixstepprocess

https://www.patrickpilato.ca/key-cornerstones

https://www.patrickpilato.ca/financial-pyramid

Password: 123

 

Thanks you!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.