how can i change navbar original collapsed height to fit my logo?

Hello everyone
i’m having a problem with my zerif lite theme
first after a huge fight i was able to change the logo size to fit my purposes and so the navbar was to small that it hid some of the logo so i increased the navbar height using this code

#main-nav {height: 100px;}
.navbar-brand img {
  min-width: 200px;
 min-height: 110px;}

so this worked for the logo and everything was fine till later when i found that on mobile devices when clicking the menu button on the upper right it didn’t extend the navbar to show my pages and menu items and it
was like this before and after clicking the menu button
“https://drive.google.com/file/d/0B0kS9x3Y1nvJbHVtVzRFYXpwVWs/view?usp=sharing”
“https://drive.google.com/file/d/0B0kS9x3Y1nvJbWlIb2lqUG5MUnc/view?usp=sharing”
so i tried to increase navbar height using this code
#main-nav {height: 140px;}
it was like this
“https://drive.google.com/file/d/0B0kS9x3Y1nvJaG95VG5sa2lUOE0/view?usp=sharing”
but the menu button worked as a view\hide button so is there is any code i can use to make the collapsed-extended navbar height different
so i can use the the menu button effect of extending the navbar to show
my pages

P.S: this what it looked like before me ding any thing at this time the menu button worked perfectly
“https://drive.google.com/file/d/0B0kS9x3Y1nvJbk45QXpGa2VQbTQ/view?usp=sharing”

Any help will be appreciated
Thanks in Advance.