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

[esmoent]

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

[Made4uo-Ribe]

Hi @esmoent 

Would you mind to share your store URL? Thanks!

[esmoent]

My URL is https://esmoshops.com

[Made4uo-Ribe]

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:

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

[webwondersco]

@esmoent Hope you are doing well.

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

[esmoent]

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

[webwondersco · 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.

[esmoent]

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]

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

[esmoent]

Yes please, that and changing the menu navigation bar color from white to black. Attached is a screenshot

[webwondersco]

@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:

[esmoent]

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]

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>

[esmoent]

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

 

I want it to look like this:

[webwondersco]

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

[esmoent]

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.

[webwondersco]

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.