Solved

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

esmoent
Excursionist
18 0 5

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
1103 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
5991 1444 1783

Hi @esmoent 

Would you mind to share your store URL? Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


esmoent
Excursionist
18 0 5
Made4uo-Ribe
Shopify Partner
5991 1444 1783

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


webwondersco
Shopify Partner
1103 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
18 0 5

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

webwondersco
Shopify Partner
1103 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
18 0 5

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
1103 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
18 0 5

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
1103 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
18 0 5

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
1103 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
18 0 5

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
1103 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
18 0 5

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
1103 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