How to resize Sidebar Menu on the small screen (mobile devices)?

Hi Inkthemes,

Sorry for keep asking questions, but i want to know, is it possible to change the size of sidebar menu? I think it is too wide when viewing on the mobile devices. It is ok for desktop viewing though.

Here my screenshot on my phone (HD resolution), one before menu sliding out, the other when the menu being hidden.

www.donovandennis.com/wp

Thank You.

Donovan

 

Hello!

I am afraid to say that, It is not possible to reduce the width of the panel, As the CSS is applying dynamically via jQuery and if reduce it then, it will be affected in other screens as well.

Hope you understand,

Warm Regards!
Naveen Kolhe
InkThemes.com

 

Hi Naveen,

Ok i understand, but in other word, can i change the width of Sidebar menu, applied in every kind of screen?

I'm also thinking about making the Sidebar menu background in 0.7 opacity in the home page only. Is it possible?

Thank you.

 

Hello,

Please paste the code given below in Custom CSS section (Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

#dynamic_sidebar {
    width: 349px;
    opacity: 0.7;
}
@media only screen and (max-width: 767px){
#dynamic_sidebar {
    width: 293px;
}
}

Note: Change the numeric value as per your requirement..

Hope it will resolve your issue

Do let me know if you need more assistance,

Thanks & Regards!
Priyanka
InkThemes.com

 

Hi Priyanka,

Thank you for kind reply.

I have tried your input and the size of sidebar menu did change, but one problem occur when i hide the side bar menu, the side bar menu button become out of frame and the sidebar menu cannot be clicked.
In mobile device, the problem become obvious, i cannot find the side bar menu button, so the sidebar menu cannot appear.
Is there anything more i should do?

Thank you

Donovan

 

Hello,

I have checked it at our end and didn't get any issue with the theme...

Would you please deactivating all plugins to see if this resolves the problem. If this works, re-activate the plugins one by one until you find the problematic plugin(s).

Hope it will resolve your issue

Thanks & Regards!
Priyanka
InkThemes.com

 

I tried to resize it to 220 and the problems occur. Somehow it is only works if i set to 285 px.

I have tried to deactivate all plugin and it still show the same result.
If i tried to set it with the value of your example, when i click the icon to hide the sidebar menu, it did not entirely collapse (see the attachment). Is it something with my customize css? Here are my all css customizing:

Code:

@import url(https://fonts.googleapis.com/css?family=Quicksand:300);
 
 
.copyrightinfo p {
font-size: 11px;
text-align:right;
opacity:0.1;
}
 
a.pp_next, a.pp_previous, .pp_gallery, .pp_nav {
    display: none !important;
}
 
 
.tf_content p {
    display:none;
}
 
  .tf_content h1 {
      display:none;   
}
 
.tf_content {
    bottom: 20%;
}
 
body {
font-family: 'Quicksand', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Quicksand', sans-serif;
    font-weight: light;
}
.page-content .content-bar .contactform textarea {
    font-family: 'Quicksand', sans-serif;
}
 
.page-content .content-bar .contactform input[type="submit"] {
    font-family: 'Quicksand', sans-serif;
    font-weight: 300;
}
#respond label {
    font-family: 'Quicksand', sans-serif;
}
 
textarea#comment {
    font-family: 'Quicksand', sans-serif;
}
 
 
.ddsmoothmenu ul li a, .menu_wrapper.mobile ul li a{
  padding: 5px 7px;
    font-size: 14px;
}
 
 
#dynamic_sidebar {
    width: 220px;
    opacity: 0.7;
}
@media only screen and (max-width: 767px){
#dynamic_sidebar {
    width: 220px;
}
}

 

Hello,

To determine and fix the issue, we need to access your dashboard.

So, send us your website WordPress login details at [email protected] along with the thread link.

Your Website URL:
WordPress Username:
Password :

Looking forward to your reply.

Thanks & Regards!
Priyanka
InkThemes.com

 

Hello,

Done the changes..

Kindly check your site..

Thanks & Regards!
Priyanka
InkThemes.com

 

Hi Priyanka,

Thanks for the help. In my PC desktop it fix the problem, but in mobile device (ex: my smartphone) the sidebar menu button still disappear when i set it <285px.

Please advice.

Thank you

Donovan

 

Hello, Donovan..

I have made changes for the small screens..

Kindly check your site..

Thanks & Regards!
Priyanka
InkThemes.com

 

Hi Priyanka,

Thank you for helping this out. I have checked. It works at first loading. But when i click the sidebar menu button, it collapse perfectly. But when i click once more, it extend to the default size (too wide). It become normal (desired value) whenever i click any menu items or reload the page. But when it collapse and extend again, it back to the default size.
it only happen in mobile screen though.

Sorry to keep hassling you.

Regards,

Donovan

 

Hello, Donovan..


I am unable to access your site as it takes so much time to loading and at last display an error message.

Kindly check your site..

Thanks & Regards!
Priyanka
InkThemes.com

 

Hi Priyanka,

I think it is because of server maintenance. I dont have any problem accessing my website now.

Thank you

Donovan

 

Thank you for keeping me waiting without update.

Regards,

Donovan

 

Hello, Donovan...

I am sorry for the inconvenience...

I have already forwarded your issue to our developer team and as they are busy at this moment, so I will try to pull them on your issue and will get back to you with positive response ASAP...

I sent you an email regarding this as well....

Hope you will understand.

Thanks & Regards!
Priyanka
InkThemes.com