Moving a hamburger menu

I would like to move a hamburger menu icon in mobiles upwards.
I mean I want to place the menu at the same height of the title.

My site is

I already added the following css.

@media only screen and (max-width: 767px) {
header#masthead div.col-md-4.col-sm-8.col-xs-12,
header#masthead div.col-md-8.col-sm-4.col-xs-12 {
width: auto;

header#masthead div.col-md-8.col-sm-4.col-xs-12 {
    float: right;
    padding: 5px 5px;

header#masthead nav#mainnav-mobi {
    left: -194px;
    width: 250px;


@media only screen and (max-width: 1024px) {
  .site-header.fixed.float-header {
    position: fixed !important;

header#masthead nav#mainnav ul li a {
font-weight: bold;

#mainnav ul li.current_page_item > a,
#mainnav ul li.current-menu-ancestor > a {
  color: #eb1d25;

.jump_style {
position: relative;
top: -100px;
display: block;

How can i fix this?

Thanks in advance.

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 767px) {
      .btn-menu {
        margin-top: -10px;


Hello Kharis,

It worked perfectly.

Thank you for your prompt and kind support.