Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 11, 2016 at 3:11 am #722765
    webWahine

    I’ve been looking at lots of posts and I can’t seem to reduce the size of the header for mobiles (specifically portrait phones). I’ve changed the colour to red to debug – it’s taking up way too much screen space – the logo is fine now with a margin of -40 px but there’s way too much space above and below the toggle pancake menu. Basically, I’d like about 40px above and below the toggle before the page content ie the fullscreen slider starts. Please advise and thanks, as usual! :)

    My site is in the private area, pwd protected.

    December 11, 2016 at 9:50 am #722801
    Vinay

    Hey webWahine,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all #header {
    max-height: 180px!important;
}}

    Best regards,
    Vinay

    December 11, 2016 at 8:47 pm #722858
    webWahine

    Thanks! That worked with a little bit of tweaking because the toggle was sitting over the fullwidth slider at a height of 180 so I changed it to 300 for more space, then moved the actual toggle up to remain inside the header background area –

    	.responsive #top #wrap_all #header {
	    max-height: 300px!important;
	}
	
	.av_header_transparency #advanced_menu_toggle {
		margin-top: -50px;		
	}

    I’m sharing in case someone else has the same question :)

    December 12, 2016 at 9:48 am #723038
    Rikard

    Hi,

    Great, glad we could help and thanks for sharing the final solution :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.