Re: How can i make my mobile navigation bar smaller using Ella theme?

Solved

How can i make my mobile navigation bar smaller using Ella theme?

esmoent
Excursionist
22 0 7

I want to reduce the width of the navigation bar like shown with the red arrow. Please, do you have any codes to help?

 

 

Screenshot_2024-05-15-12-46-59-884~2.jpg

Accepted Solution (1)
webwondersco
Shopify Partner
1113 164 162

This is an accepted solution.

@esmoent 

 


Follow these Steps:

- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code in the bottom of the file above </body> tag

 

<style>
body .halo-sidebar{
max-width:70%;
}
</style>


YOu can update the 70% value as per your taste.

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram

View solution in original post

Replies 16 (16)

Made4uo-Ribe
Shopify Partner
6971 1660 2049

Hi @esmoent 

Would you mind to share your store URL? Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
esmoent
Excursionist
22 0 7
Made4uo-Ribe
Shopify Partner
6971 1660 2049

Thanks for the info, do you like to make more smaller on the smaller screen? 

Check this one then.

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

@media only screen and (max-width: 550px){
.halo-sidebar{
            max-width: 300px;
        }
}

 

And save. 

Result:

Made4uoRibe_2-1715779604907.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

webwondersco
Shopify Partner
1113 164 162

@esmoent Hope you are doing well.

 

Could you please share your store URL? so can check and guide you accordingly 

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
esmoent
Excursionist
22 0 7

My URL is https://esmoshops.com check and give me a solution. Thank you. 

webwondersco
Shopify Partner
1113 164 162

This is an accepted solution.

@esmoent 

 


Follow these Steps:

- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code in the bottom of the file above </body> tag

 

<style>
body .halo-sidebar{
max-width:70%;
}
</style>


YOu can update the 70% value as per your taste.

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
esmoent
Excursionist
22 0 7

Webwondersco, thank you so much for the solution. Please, can you also help me with changing the color of the Menu Navigation Bar to any color with border lines? Thank you

webwondersco
Shopify Partner
1113 164 162

@esmoent Sure, could you please confirm if you are talking about this menu bar color?

 

webwondersco_0-1715843287428.png

 

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
esmoent
Excursionist
22 0 7

Yes please, that and changing the menu navigation bar color from white to black. Attached is a screenshotScreenshot_2024-05-16-07-12-04-905.jpg

webwondersco
Shopify Partner
1113 164 162

@esmoent Did you mean to change the text color of menu items? or background color of menu.

 

could you please clarify in detail? what I understand please check attachment:

 

webwondersco_0-1715844903231.png

 

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
esmoent
Excursionist
22 0 7

I wish to change the background color, like what you just did in the screen shot and change the menu bar color when you click on it like in your previous screenshot. Thank you.

webwondersco
Shopify Partner
1113 164 162


Follow these Steps:

- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code in the bottom of the file above </body> tag

 

<style>
span.mobileMenu-toggle__Icon,
span.mobileMenu-toggle__Icon::before,
span.mobileMenu-toggle__Icon::after{
background-color:#000 !important;
}
</style>
Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
esmoent
Excursionist
22 0 7

It didn't work. This is how it looks.

 

 Menu Black.png

menu 2.png

 

I want it to look like this:

menu 3.png

webwondersco
Shopify Partner
1113 164 162

@esmoent still has some doubt. could you please clarify?

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
esmoent
Excursionist
22 0 7

Please, can you give me step by step guidance? I dont understand this part of your code. 

 

span.mobileMenu-toggle__Icon,

span.mobileMenu-toggle__Icon::before,

span.mobileMenu-toggle__Icon::after{

 

I was able to do it, but the text color was black.

Screenshot 2024-05-16 135534.png

webwondersco
Shopify Partner
1113 164 162

span.mobileMenu-toggle__Icon,

span.mobileMenu-toggle__Icon::before,

span.mobileMenu-toggle__Icon::after

 

This part of the code update the color of menu bar which has 3 lines on the mobile in the header. just update to any other color and check in front end you'll get the idea what this part of code update in mobile header.

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram