Editing Drop Down Menu Size - noob question

First, I would like to say hello! I just joined the forum and look forward to learning a lot from everyone and coding websites!

My newbie issue is pretty straight forward, I have a Wordpress Theme that I like, but want to alter it. The drop down menu on the right expands and covers up the entire page: I want to edit the size so it only takes up a small section...

I am asking for your help in locating where the code is to change this. I am using Chrome Developer tools, and have tried altering the padding, margins, position, etc... but I cannot seem to show the website in the background that is being blocked by the menu. Below is the URL

http://www.finediningnycllc.com

Thank you in advance for your help!

 

Hello,

The drop down menu expands and covers up the entire page because you set width: 100% for sidebar menu in your style.css file.
So you need to delete that rule and instead of left: 0, you may set right: 0, so your sidebar will open from right side:

.sidebar {
    display: none;
    position: absolute;
    top: 73px;
    right: 0;
    z-index: 2;
    background: #f2f2f2;
    /* width: 100%; */
}

Code (CSS):

Also, in your script file cubic.js, you have rule to hide .site-main container when click on menu icon to open sidebar.
If you don't want to hide site content when sidebar is open, just delete that single line of code:

/*
* Sidebar toggle.
*/

var scroll_top_position = 0;
$( '.sidebar-toggle' ).click( function( event ) {

....

    if ( $( 'body' ).hasClass( 'sidebar-open' ) ) {
        // $( '.site-main' ).hide(); /* delete this line if you don't want to hide site content
            $( 'html, body' ).animate( {
                scrollTop: 0
            }, 0 );
        }

        ...

    } );

Code (JavaScript):

Hope that will help you.

 

devcake,

I just want to first say thank you for taking the time to look at the theme / coding! And thank you for finding a solution. I implemented your suggestions and it was exactly what I was looking for!! Thank you!!!

 

I'm glad it helped.

I looked website now and noticed horizontal scrolling of page when sidebar is open.
To solve this just remove fixed width of sidebar content in style.css file:

@media screen and (min-width: 768px) {
.sidebar-content {
    /* width: 768px; */
    padding: 72px 72px 0;
}
}

Code (CSS):

 

I was JUST looking for that (making changes in chrome developer). Thank you again!!