I know onedesign is working on new version to fix this problem,
but I’ve no time to wait,
so I check the navbar sidebar using web browser under check element and found out the menu bar and its container is set to fixed height 80px (with large menu selected), so I’ve tried to select all setting which included “80px” (I know I’m stupid but I’m a struggling graphic designer…) and change to my logo size which is “150px”, here its the code I’ve copied to Appearance/theme option/design/custom css:
Please delete everything in “(description for wp newbie as me)”
__________________________________________________
.body-navbar-offset {
margin-top: 50px;
}
@media (min-width: 768px) {
.body-navbar-offset {
margin-top: 60px;
}
}
@media (min-width: 992px) {
.body-navbar-large.body-navbar-offset {
margin-top: 150px; (<–changed to your logo height)
}
}
.admin-bar .navbar-fixed-top {
top: 32px;
}
@media (min-width: 992px) {
.navbar-large {
min-height: 150px;(<–changed to your logo height)
height: 150px;(<–changed to your logo height)
}
}
@media (min-width: 992px) {
.navbar-large a.navbar-brand {
padding: 16px 15px;
line-height: 48px;
height: 150px;(<–changed to your logo height)
}
}
@media (min-width: 992px) {
.navbar .nav > li > a {
max-height: 60px;
}
.navbar-large .nav > li > a {
max-height: 150px;(<–changed to your logo height)
padding: 30px 20px;
}
.navbar-large .nav > li.menu-item-has-description > a {
padding: 20px 20px 18px;
}
}
.navbar-brand > .site-logo {
display: inline-block;
width: auto;
max-height: 48px;(<–changed to your logo max height in mobile)
vertical-align: top;
-webkit-transition: height .25s ease, max-height .25s ease;
-moz-transition: height .25s ease, max-height .25s ease;
-ms-transition: height .25s ease, max-height .25s ease;
-o-transition: height .25s ease, max-height .25s ease;
transition: height .25s ease, max-height .25s ease;
}
@media (min-width: 992px) {
.navbar-large .site-logo {
max-height: 120px;(<–changed to your logo height in normal web browser which smaller than container height)
}
}
_________________________________
So the css code involve 2 parts:
1. Container which restrain the menu and logo size.
2. Logo height in both normal web browser and mobile browser.
At first I’ve made a mistake,
I thought @media is only affect mobile setting which its actually affect the logo size in normal web browser!
Hopefully this help to newbie!