Reduce Mobile header size

I have since discovered how to reduce the whitespace on my mobile header, but find i am unable to change the height of the hamburger menu,

How can i raise the hamburger menu?

For moving the hamburger up, I copied the whole selector but I am sure you could use less of the path I copied to:

#sticky-wrapper > div > div > div > div.responsive-nav.hidden-lg.hidden-md.visible-sm.visible-xs {
margin: 0;

As for the header, did you style the header image for mobile first? Ah looks like you used Revslider. I suspect there is an adjustment in it’s config for this slider.

Have you looked at that?

you could set the position to relative and move it up

.header_main .responsive-nav {
       position: relative;
    top: -45px;
}

Thank you both, this sucessfully moved the hamburger menu up, however now the whitespace at the bottom again looks strange and i find my initial method unable to decrease this further.

Do you know how i could reduce the whitespace underneath the logo and Hamburger menu to even it on both the top and bottom sides? Thank you very much for your help

I think the best way to have them on an “equal par” is to put both elements inside the same tag “ie: div” (or whatever you choose).

That way you could align them easily. They should respond together that way also.

Does that help?

you have this css statement if you reduce the padding size it will make your padding at the bottom of your header smaller.

.vc_section.vc_section-has-fill, .vc_section.vc_section-has-fill+.vc_row-full-width+.vc_section, .vc_section.vc_section-has-fill+.vc_section {
    padding-top: 35px;
}

change to

.vc_section.vc_section-has-fill, .vc_section.vc_section-has-fill+.vc_row-full-width+.vc_section, .vc_section.vc_section-has-fill+.vc_section {
    padding-top: 0;
}