Enfold Theme – Header/Body Alignment on Mobile Phones

Hello,

ISSUE #1

Top navigation bar (logo, social icons, menu) aligns top left on mobile screen, while the body content aligns to the far right, and off the screen on Blackberry Bold, Sony Xperia X10. Displays just fine on Nokia N8. Looks great in Chrome, IE9, FireFox. Advice would be greatly appreciated!

ISSUE #2

I can’t seem to get the menu items to vertically align onload, they shift each time you click to load a page.

THE SPECS

– WordPress Version 3.5.1

– Enfold Version 1.6

– Using Boxed Blue, Responsive Layout Default, Fixed Header with Social Icons and additional Navigation

– Custom CSS

---

/* MAKE MENU FONT VERTICALLY ALIGN*/

.responsive #header_main {

padding-top: 10px;

padding-bottom: 0;

height: 50px;

line-height: 60px;

vertical-align: middle;

}

.fixed_header #header_main .container {

height: 65px;

vertical-align: middle;

line-height: 60px;

}

/* REVERSE TELEPHONE TEXT AND SOCIAL BOOKMARKS HORIZONTALLY*/

.sub_menu {

position: absolute;

left: 0;

}

#top .social_bookmarks {

right: 0;

position: absolute;

}

/* CONSTRAIN LOGO SIZE – FOR IE*/

.logo img {

display: block;

height: auto;

max-width: 250px;

padding: 0;

width: auto;

}

/* ICON BOX SHADOW FIREFOX*/

.iconbox_top .iconbox_content {

border-radius: 3px 3px 3px 3px;

box-shadow: 0 0 0 0 rgba(0,0,0,0.3);

}