Support » Fixing WordPress » Reduce Mobile header size

  • qwatton

    (@qwatton)


    I am having some trouble with the mobile header for my site and it appears to have way too much padding at the bottom of the header, how can i fix this?

    I want it to ideally stop the whitespace at the end of the QA Internships section just below the Logo and Hamburger menu.

    Also is therre any way to bring the Hamburger menu up a bit? I would ideally like it to align with the logo,

    Thanks in advance!

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • qwatton

    (@qwatton)

    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?

    jemcbade

    (@jemcbade)

    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?

    mrtom414

    (@mrtom414)

    you could set the position to relative and move it up

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

    (@qwatton)

    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

    jemcbade

    (@jemcbade)

    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?

    mrtom414

    (@mrtom414)

    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;
    }
Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.