Jump to content

Drop down menu is right alogned and would like it left aligned

Recommended Posts

  • Replies 7
  • Views 1.7k
  • Created
  • Last Reply

Top Posters In This Topic

10 hours ago, Ginger_Meadow_08 said:

I have a site that has a dropdown menu. We recently upgraded the site to 7.1. The dropdown is showing as right aligned and the client would like it left aligned. Is there any way this could be done with code? 

Can you share the site URL?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment

Hi @Ginger_Meadow_08

I am by no means an expert but someone who has come here for help myself before. I tinkered around with your site and found this:

.header .header-layout-nav-right .header-nav .header-nav-item--folder .header-nav-folder-content {
    left: inherit!important;
    text-align: left!important;
}

I think if you add this in custom css it should appear as you'd like. If you just add 'text-align' the overall dropdown will stay in the same location, which would look rather weird, so I've added in the 'left' to make it look how I would think is best. 

Screenshot 2024-01-25 at 21.23.24.png

Link to comment
4 hours ago, Ginger_Meadow_08 said:

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS.

.header .header-layout-nav-right .header-nav .header-nav-item--folder .header-nav-folder-content {
    left: -1em !important;
    right: auto; !important;
    text-align: left !important;
}

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
  • 4 weeks later...
On 1/25/2024 at 6:59 PM, Web_Solutions said:

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS.

.header .header-layout-nav-right .header-nav .header-nav-item--folder .header-nav-folder-content {
    left: -1em !important;
    right: auto; !important;
    text-align: left !important;
}

 

I tried this and it's not working

Link to comment
On 1/25/2024 at 3:23 PM, Molololol said:

Hi @Ginger_Meadow_08

I am by no means an expert but someone who has come here for help myself before. I tinkered around with your site and found this:

.header .header-layout-nav-right .header-nav .header-nav-item--folder .header-nav-folder-content {
    left: inherit!important;
    text-align: left!important;
}

I think if you add this in custom css it should appear as you'd like. If you just add 'text-align' the overall dropdown will stay in the same location, which would look rather weird, so I've added in the 'left' to make it look how I would think is best. 

Screenshot 2024-01-25 at 21.23.24.png

I tried this and it's not working

Link to comment
2 hours ago, Ginger_Meadow_08 said:

I tried this and it's not working

Where did you add the code? I can't see the code. And the code working on my end. See the image 

Screenshot_103.png

Edited by Web_Solutions

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

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.