Mobile Menu Behind Content

[rhiannaweilert]

The menu on the mobile version of the site is loading behind the content on the page when it is dropped down, making it impossible to click. I think this may be a side effect of disabling the big header/small header size shift, which I don’t want. Any help would be greatly appreciated! Thanks!

Here’s the site:
http://www.leawoodsmiles.com

[rhiannaweilert]

Here is the CSS I’ve added:

#content h1 a, #content h2 a, #content h3 a, #content h4 a, .page-content h1, .post-content h1, h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, .serif, cite, h1, h2, h3, h4, h5, h6, .post-header, .page h1, #rps h4.post-title a span, .su-heading-shell {
color: #7b7c7f;
border: 0px;
font-weight: 200 !important;
}

#header #header-box {
border-bottom: 1px dotted #DEE5E6;
}

#header {
border: 0px;
}

#footer #copyright .container {
border-top: 1px dotted #DEE5E6;
}

a:link {
text-decoration: none;
border-bottom: 1px dotted #DEE5E6;
color: #666666;
}

#nav-primary ul a, #nav-secondary ul a, .mobilemenu .dropdown-menu, .mobile-icon-title-text {
font-family: ‘Open Sans’, Arial, sans-serif;
font-weight: bold;
}

#respond input#submit, .contact-submit input, .back-button input, input[type=”submit”] {
cursor: pointer;
color: #7a7a7e;
margin-left: 0;
padding: 11px 13px;
background-color: transparent;
border: 2px solid #7a7a7e;
}

#nav-primary .current-menu-item > a {
border: 2px solid #7a7a7e;
}

.social-widget-icon {
border: 2px solid #7a7a7e;
}

.widget-sidebar {
margin-top: 30px;
}

.page-heading {
margin-bottom: 0px;
}

#page-background {
margin-top: 160px;
}

#sidebar {
margin: 0 0 0 650px;
position: fixed;
}

#footer {
background-color: transparent;
}

[rhiannaweilert]

Update: I’ve removed all the CSS that alters the header size and starting from the ground up. Can you recommend a CSS alteration that will remove the size shift without hurting anything else like the menu? You can ignore the above question.

[satori]

Hey Rhiannaweilert,

first of all, thank you for the purchase!

I can see that the header does not shrink anymore on the website you’ve provided – have you already managed to alter the code to disable the shrinking header, you do you still need help on this one?

Sincerely,
Andrii / Satori Studio

[rhiannaweilert]

I got the header to remain the same size but the page content still jumps up about 15 px when the small header would’ve been triggered ONLY on the mobile site. Also, there is a large amount of space between the header and the page content that needs to be reduced to about 10 px, also ONLY on the mobile site. Any ideas? Thanks!

http://transmog.net/iphone-simulator/mobile-web-browser-emulator-for-iphone-5.php?u=www.leawoodsmiles.com

[satori]

Alright, this is a bit outside the scope of the intended theme functions, but I’ll try to point you in the right direction: please use this code in the “Styles: Add Custom CSS” tab of the Theme Options panel:

@media only screen and (max-width: 767px) {
.page-space {
   height: 0 !important;
}
#main-header #header, #main-header .bigheader, #main-header #header-box, #main-header .smallheader {
   border-bottom: none !important; 
   position: static !important;
   height: auto !important;
}
}

Sincerely,
Andrii / Satori Studio

[rhiannaweilert]

Yes, it was a client request that I said I would try. I think this is as good as it’s going to get. Hopefully they are happy. Thanks so much for your help!

[satori]

Glad to hear it worked! Do not hesitate to contact me in case any other questions or issues arise.

Sincerely,
Andrii / Satori Studio

[Author]

Posts