Header issues since updates - Support | Kriesi.at

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
April 22, 2014 at 2:23 am #254107

davidrk
Participant

Hi there. I recently updated WP and the Enfold theme and have a few issues I’m still trying to resolve with the header. The site is http://www.bhutantravelbureau.com

1) On an ipad the social icons are appearing beneath the logo in portrait mode instead of aligned to the right.

Also on the Ipad, the sticky logo and navigation are not minimising, and don’t appear to be transparent.

2) On smartphones the logo now appears quite small after applying the custom CSS required to stop the logo stretching across the entire screen and behind the menu icon. It also doesn’t line up next to the menu toggle, appearing above it instead.

The CSS I have applied is as follows:
@media only screen and (max-width: 768px) {

.responsive .mobile_slide_out .logo {
float: none;

}

.responsive .logo a, .responsive .logo img {
height: auto !important;
margin-top: 8px!important;
max-width: 85%;}
.html_header_top.html_logo_center .logo {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}

.responsive #header .social_bookmarks {
position: relative;
margin-top: 10px;
}
}
@media only screen and (max-width: 480px) {
.responsive .logo a, .responsive .logo img {
max-width: 80%;
height: auto!important; }
}

Help to resolve this issue much appreciated. Cheers.

April 22, 2014 at 8:45 am #254224

bazmund
Participant

I have the exact same problem. Is this being worked on? It was fine until the latest update. Any help appreciated.

April 22, 2014 at 2:02 pm #254320

bazmund
Participant

Looks like the update today has solved this. Thanks.

April 22, 2014 at 6:49 pm #254529
Yigit
Keymaster
Hi!

@davidrk Please update Enfold to the latest version 2.7 and check if issue remains.
I could not reproduce social icons moving to left issue when i resize the window. Have you fixed it already? Please add following code to Quick CSS
```
@media only screen and (max-width: 767px) {
.responsive .mobile_slide_out .logo img {
margin-top: 20px!important; }}
```
Regards,
Yigit
April 23, 2014 at 1:31 am #254715

davidrk
Participant

The update appears to have fixed most issues with some additional custom CSS. A couple of issues remain:
1) Sticky header still not minimising with Ipad.
2) Had to remove social icons from Smartphone landscape (max-width: 540px) as they remained aligned left. They used to appear centred beneath the logo and menu toggle with previous version I think. Would be good to reinstate them but not end of the world if not possible.

Thank you for your help with this.

April 23, 2014 at 1:25 pm #254886
Ismael
Moderator
Hi!

Thank you for the update.

1.) Not sure why it is happening on iPad. Let me ask Josue to check this on his iPad.

2.) Please add this on Quick CSS or custom.css to position the social icons below the logo, center aligned.
```
@media only screen and (max-width: 767px) {
.responsive.html_header_top #header_main .social_bookmarks {
width: auto;
position: absolute;
left: 50%;
top: 80px;
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}

.responsive .logo {
margin-bottom: 40px;
}
}
```
Regards,
Ismael
April 25, 2014 at 1:26 am #255899

davidrk
Participant

Thanks for that. Works all good for horizontal smartphone, however with portrait view social icons still disappear, and margin below the logo remains. Any ideas as to how I can get the social icons to appear? Here is the code I’m using targeting the logo and social icon elements:

@media only screen and (max-width: 767px) {
#header_meta { display: none; }
.responsive .mobile_slide_out .logo {float: none;}
.responsive .logo a, .responsive .logo img {margin-top: 8px!important;}
.responsive.html_header_top #header_main .social_bookmarks {
width: auto;
position: absolute;
left: 50%;
top: 90px;
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.responsive .logo {margin-bottom: 30px;}
}
@media only screen and (max-width: 480px) {
.responsive .logo a, .responsive .logo img {
margin-top: 15px!important;
max-width: 85%;
height: auto!important;
}
}

Any assistance with the Ipad sticky menu not minimising appreciated too when you get a chance. Thanks for all your help with this.

April 28, 2014 at 8:37 am #256928
Dude
Participant
Hey!

Please try to insert this code into the quick css field:
```
@media only screen and (max-width: 479px){
.responsive.html_header_top #header_main .social_bookmarks {
display: block;
}
}
```
Cheers!
Peter
April 28, 2014 at 12:41 pm #257028

davidrk
Participant

Almost there, however the email icon at the end appear beneath the other 2 social icons! I think it has to do with this:

@media only screen and (max-width: 767px) {
.responsive.html_header_top #header_main .social_bookmarks {
width: auto;
position: absolute;
left: 50%;
top: 90px;
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);

When I remove left:50% everything appears fine for smartphone portrait view however in horizontal view the icons are over to the right.

Sorry about this… I’d just like them to appeared centred to screen when the toggle menu mode is applied.

April 29, 2014 at 9:24 am #257526
Dude
Participant
Hey!

Ok, try this code:
```
@media only screen and (max-width: 479px){
.responsive.html_header_top #header_main .social_bookmarks {
display: block;
}

.responsive.html_header_top #header_main .social_bookmarks {
left: auto;
}
}
```
Cheers!
Peter
April 29, 2014 at 11:29 am #257567

davidrk
Participant

OK thanks for that. Had to fiddle around and it’s still not perfect but will do. Thanks for perservering.
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Header issues since updates’ is closed to new replies.