Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • November 25, 2015 at 11:11 pm #542756
    webWahine

    Hello
    I read through this post and tried everything and still can’t get my logo centered above and the toggle mobile menu centered below. Please advise. Thanks.

    https://kriesi.at/support/topic/logo-cut-off-and-mobile-menu/

    November 25, 2015 at 11:15 pm #542759
    Yigit

    Hi webWahine!

    Can you please post the link to your website?

    Best regards,
    Yigit

    November 25, 2015 at 11:20 pm #542764
    webWahine

    Sure and thanks for the speedy reply! I’m using a child theme and commented out all of my attempts in the media queries area tsrating at line 738.

    November 26, 2015 at 2:00 pm #543115
    Yigit

    Hey!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 767px) {
.responsive .logo a, .responsive .logo {
    width: 100%!important;
}
.responsive .logo img {
margin: auto;
}
.header_color img {
padding-top: 0;
}
#header {
    height: 220px!important;
}
#advanced_menu_toggle {
    top: 150%;
    right: 46%;
}
}

    Best regards,
    Yigit

    November 26, 2015 at 7:49 pm #543361
    webWahine

    Ok, that is getting very close! I’d like to make the logo larger, eg, 240 px wide and it’s a square so 240 high. The toggle is slightly off center, so I assume that is somehow connected to the 46% :)

    November 27, 2015 at 2:53 pm #543646
    Yigit

    Hey!

    Yes, please adjust 46% value to center it perfectly.
    And then add following code to Quick CSS 

    @media only screen and (max-width: 767px) {
.responsive .logo img {
    max-height: 240px;
}}

    then adjust “220px” value in the first code i posted :)

    Cheers!
    Yigit

    November 27, 2015 at 9:37 pm #543824
    webWahine

    Ok, that’s working nicely now; I made a few changes that I’d like to share so that others can benefit –

    /* mobile to tablet portrait - default 767 does not include tablet landscape */
@media only screen and (max-width: 767px) {
	/* start */

	/* social */
	.responsive #top #header_meta .social_bookmarks li a {
		margin-top: 40px;
	}
	
	
	/* this centers the logo and places the toggle under */
	.responsive .logo a, .responsive .logo {
	    width: 100%!important;
	}
	.responsive .logo img {
	margin: auto;
	max-height: 140px;
	margin-top: 40px;
	margin-bottom: 0px;
	}
	
	.header_color img {
	padding-top: 0;
	}
	#header {
	    height: 420px!important;
	}
	
	#advanced_menu_toggle {
	    top: 140%;
	    right: 43%;
	}
	/* end centers the logo and places the toggle under */
		
	/* end */	
}

    I now have a slightly off centered set of social icons above and have added this to give it some space above –

    	/* social */
	.responsive #top #header_meta .social_bookmarks li a {
		margin-top: 40px;
	}

    However, I can see that it’s slightly off center and I need to adjust that. I tried padding and margins but couldn’t get it to work. Shall I start a new post or is this a quick fix, please? Thank you, as always :)

    December 1, 2015 at 3:08 pm #545235
    Andy

    Hey!

    thanks for sharing.

    Where can we see that if’s slightly off center? I tried to check your website but password from here does not work for me. Can you check please?

    Best regards,
    Andy

    December 1, 2015 at 8:11 pm #545542
    webWahine

    I’ve added the password again in private data. When you look on a phone you’ll see that the Facebook icon is a bit too far to the right. /I tried to style with margins and padding but it didn’t work. Thanks!

    December 2, 2015 at 5:08 am #545724
    Rikard

    Hi,

    Please try the following:

    @media only screen and (max-width: 767px) {
.av_icon_active_right .social_bookmarks {
    padding-left: 9px !important;
}
}

    Thanks,
    Rikard

    December 2, 2015 at 6:26 pm #546033
    webWahine

    I tried that and it didn’t make a change, so I tried 20px and it’s still not moving over.

    December 2, 2015 at 10:23 pm #546149
    Basilis

    Hey!

    can u try make padding-left to margin-left and let us know if it works.
    It depends on your element position, margin might fix the problem.

    Best regards,
    Basilis

    December 2, 2015 at 10:53 pm #546161
    webWahine

    Sadly, no. It’s still off by about 9px.

    December 4, 2015 at 3:57 pm #547065
    Andy

    Hey!

    I checked your backend and you did not implement the code Rikard provided to you in your Quick CSS field. Now it put it inside it myself and it works fine. Can you confirm please?

    Regards,
    Andy

    December 12, 2015 at 12:01 pm #551425
    webWahine

    Sorry for the delayed reply – I thought I hit submit. I do have that code in my child theme’s css so it’s odd that it’s not picking that up there and only seeing it in the quick css – any ideas? Thanks :)

    December 14, 2015 at 3:32 pm #552350
    Andy

    Hey!

    are all other changes in your child theme working for you? Deactivate and activate it again, clear browser cache and hard refresh a few times.

    Regards,
    Andy

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