How to change the mobile dropdown items justification?

[MichaelACastro]

Hello there!

I want to move the page displays in the mobile dropdown to be justified to the right. The reviews widget is hiding some of the page titles. I'm currently using the Stiletto theme.

Thank you! 🙂 

 

[akshay_bhatt]

Hi @MichaelACastro ,

To move the page titles in the mobile dropdown to be justified to the right in your Stiletto theme and avoid overlap with the reviews widget, follow these steps:

1. Identify the Correct CSS Class: Open your theme's live preview or inspect the dropdown menu using browser developer tools to find the class or ID associated with the page titles.

2. Edit the Theme's CSS:

   • From your Shopify admin, go to Online Store > Themes.
   • Click Actions > Edit Code on the Stiletto theme.
   • Open the theme.css or style.css file (the name may vary depending on the theme structure).

3. Add the CSS Rule: Add the following CSS code to align the text to the right:

.mobile-dropdown-class-name {
    text-align: right;
}

• Replace .mobile-dropdown-class-name with the actual class or ID you identified in step 1.

• Adjust Z-Index for the Reviews Widget (if necessary): If the reviews widget is still interfering, adjust its z-index .

.reviews-widget-class-name {
    z-index: 1;
}

 save and review.

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Thanks & Regards
Akshay Bhatt

[MichaelACastro]

Hi Akshay! I am not familiar with classes or ID's. Can you break it down a little more? Thank you.